Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Nativeを触ってみた話

React Nativeを触ってみた話

7496c69c781c91d16637ea6102311e26?s=128

Yuta Hiroto

October 10, 2015
Tweet

Transcript

  1. React Native
 Λ৮ͬͯΈͨ ALT #5 2015/10/10 

  2. ୭ʁ 

  3. ࣗݾ঺հ • ໊લ • ኍށ ༟େ • twitter: about_hiroppy 

  4. ͳ͔ͥ 

  5.  ΍Δ͔͠ແ͍Αͳ͊ʁ

  6.  ൒೥Ҏ্લʹൃද͍ͯͨ͠ͷΛࢥ͍ग़ͨ͠ɻɻɻ

  7. React Nativeͱ͸ʁ 

  8. React Native  JSͰReactΛ࢖͍ϞόΠϧ։ൃͰ͖Δ ϑϨʔϜϫʔΫ

  9. ಋೖ 

  10. ಋೖ 1. $ npm install -g react-native-cli 2. $ react-native

    init altProject 3. ऴΘΓ 
  11. Ͷɺ؆୯Ͱ͠ΐʁ 

  12.  DSFBUFHJUJHOPSF DSFBUFXBUDINBODPOpH DSFBUFJOEFYJPTKT DSFBUFJOEFYBOESPJEKT DSFBUFJPTNBJOKTCVOEMF DSFBUFJPTBMU1SPKFDU"QQ%FMFHBUFI DSFBUFJPTBMU1SPKFDU"QQ%FMFHBUFN DSFBUFJPTBMU1SPKFDU#BTFMQSPK-BVODI4DSFFOYJC DSFBUFJPTBMU1SPKFDU*NBHFTYDBTTFUT"QQ*DPOBQQJDPOTFU$POUFOUTKTPO

    DSFBUFJPTBMU1SPKFDU*OGPQMJTU DSFBUFJPTBMU1SPKFDUNBJON DSFBUFJPTBMU1SPKFDU5FTUTBMU1SPKFDU5FTUTN DSFBUFJPTBMU1SPKFDU5FTUT*OGPQMJTU DSFBUFJPTBMU1SPKFDUYDPEFQSPKQSPKFDUQCYQSPK DSFBUFJPTBMU1SPKFDUYDPEFQSPKYDTIBSFEEBUBYDTDIFNFTBMU1SPKFDUYDTDIFNF DSFBUFBOESPJEBQQCVJMEHSBEMF DSFBUFBOESPJEBQQQSPHVBSESVMFTQSP DSFBUFBOESPJEBQQTSDNBJO"OESPJE.BOJGFTUYNM DSFBUFBOESPJEBQQTSDNBJOSFTWBMVFTTUSJOHTYNM DSFBUFBOESPJEBQQTSDNBJOSFTWBMVFTTUZMFTYNM DSFBUFBOESPJECVJMEHSBEMF DSFBUFBOESPJEHSBEMFQSPQFSUJFT DSFBUFBOESPJETFUUJOHTHSBEMF DSFBUFBOESPJEBQQTSDNBJOSFTNJQNBQIEQJJD@MBVODIFSQOH DSFBUFBOESPJEBQQTSDNBJOSFTNJQNBQNEQJJD@MBVODIFSQOH DSFBUFBOESPJEBQQTSDNBJOSFTNJQNBQYIEQJJD@MBVODIFSQOH DSFBUFBOESPJEBQQTSDNBJOSFTNJQNBQYYIEQJJD@MBVODIFSQOH DSFBUFBOESPJEHSBEMFXSBQQFSHSBEMFXSBQQFSKBS DSFBUFBOESPJEHSBEMFXSBQQFSHSBEMFXSBQQFSQSPQFSUJFT DSFBUFBOESPJEHSBEMFX DSFBUFBOESPJEHSBEMFXCBU DSFBUFBOESPJEBQQTSDNBJOKBWBDPNBMUQSPKFDU.BJO"DUJWJUZKBWB iOSͱAndroid༻ͷ
 ςϯϓϨʔτ͕ੜ੒͞ΕΔ Android͸9݄15೔ʹରԠ͞Εͨ
  13.  ΍ͬͨͥʂ $ open altProject.xcode/
 ios/altProject.xcodeproject android͸ɻɻ Θ͔Βͳ͍ $ npm

    start
  14. σόοά 

  15.  Chrome ͔ Safari Λ
 ىಈ͓ͯ͘͠ ϥΠϒϦϩʔυ΋
 σϑΥϧτͰ͍ͭͯΔʂ

  16. ΠϯεϖΫλʔ 

  17. iOSͱAndroidؒͰͷ
 ίʔυͷҧ͍ 

  18. var React = require('react-native'); var { TabBarIOS, NavigatorIOS } =

    React; var App = React.createClass({ render: function() { return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> ); }, });  var React = require('react-native'); var { DrawerLayoutAndroid, ProgressBarAndroid } = React; var App = React.createClass({ render: function() { return ( <DrawerLayoutAndroid renderNavigationView={() => <Text>React Native</Text>}> <ProgressBarAndroid /> </DrawerLayoutAndroid> ); }, }); iOS Android ಉ͡ίʔυͰ̎ͭΛΧόʔ͢Δͷ͸೉ͦ͠͏ɻɻɻ
  19. ߏจ 

  20. ඪ४ίϯϙʔωϯτͷಡΈࠐΈ var { AppRegistry, StyleSheet, Text, View, } = React;

     React Native͕࢖༻͢Δ
 σϑΥϧτͳίϯϙʔωϯτ
  21. viewͷߏங  var altProject = React.createClass({ render: function() { return

    ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } });
  22. styleͷߏங var styles = StyleSheet.create({ container: { flex: 1, justifyContent:

    'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });  iOS ͷ UI ίϯϙʔωϯτ͸ 
 CSS ͷελΠϧઃఆʹରԠ͠ͳ͍ͨΊɺ
 react nativeͷಠࣗίϯϙʔωϯτͰ࣮૷͠·͢
  23. σʔλͷऔಘ fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) =>

    { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData), loaded: true, }); }) .done(); }, 
  24. ΤϯτϦϙΠϯτ AppRegistry.registerComponent('altProject', () => altProject); 

  25. ࢓૊Έ 

  26. index.js  Appdelegate.m jsCodeLocation = [NSURL URLWithString:
 @“http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; ҎԼͰNodeͰཱͯͨhttpαʔόͷpathࢦఆ
 ͞Ε͍ͯΔ

  27. JavaScriptCore.framework • iOS7 Ҏ߱ʹೖͬͨJSΛ૊ΈࠐΊΔframework • DOM΍௨৴Λѻ͏ϥΠϒϥϦ͸ಈ࡞͠ͳ͍ • جຊతͳ૊ΈࠐΈΦϒδΣΫτͷΈఏڙ • ར఺ͱͯ͠ίϯύΠϧ͕ෆཁ

    
  28. React Native • React Native ͸ JavaScriptCoreΛ࢖༻͢Δ • ผεϨουͰJavaScriptCoreΛ࢖͍
 React

    NativeͰॻ͍ͨίʔυΛಡΈࠐ·ͤΔ • Titaniumͱಉ༷ʹωΠςΟϒ΁ͷඇಉظϒ Ϧοδ͕ଘࡏ͢Δ(͜͜ͰUIKitͱ઀ଓ͢Δ) 
  29. ·ͱΊ 

  30. React Native • React.js ͱಉ͡ཁྖͰॻ͘͜ͱ͕Ͱ͖Δ • ES6Ͱॻ͘͜ͱ͕Մೳ • Polyfill͕͋ΔͷͰnpmϞδϡʔϧ͸࢖͑Δ •

    UIKitΛ஌ͬͯͳ͍ͱͭΒ͍ײ͋͡Δ • TitaniumΛ΍ΔΑΓ΋࣮֬ʹֶशίετ͕௿͍ 
  31. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ