React Nativeを触ってみた話

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. 
    
    
    DSFBUF
    HJUJHOPSF
    
    
    
    DSFBUF
    XBUDINBODPOpH
    
    
    
    DSFBUF
    JOEFYJPTKT
    
    
    
    DSFBUF
    JOEFYBOESPJEKT
    
    
    
    DSFBUF
    JPTNBJOKTCVOEMF
    
    
    
    DSFBUF
    JPTBMU1SPKFDU"QQ%FMFHBUFI
    
    
    
    DSFBUF
    JPTBMU1SPKFDU"QQ%FMFHBUFN
    
    
    
    DSFBUF
    JPTBMU1SPKFDU#BTFMQSPK-BVODI4DSFFOYJC
    
    
    
    DSFBUF
    JPTBMU1SPKFDU*NBHFTYDBTTFUT"QQ*DPOBQQJDPOTFU$POUFOUTKTPO
    

    
    
    
    DSFBUF
    JPTBMU1SPKFDU*OGPQMJTU
    
    
    
    DSFBUF
    JPTBMU1SPKFDUNBJON
    
    
    
    DSFBUF
    JPTBMU1SPKFDU5FTUTBMU1SPKFDU5FTUTN
    
    
    
    DSFBUF
    JPTBMU1SPKFDU5FTUT*OGPQMJTU
    
    
    
    DSFBUF
    JPTBMU1SPKFDUYDPEFQSPKQSPKFDUQCYQSPK
    
    
    
    DSFBUF
    JPTBMU1SPKFDUYDPEFQSPKYDTIBSFEEBUBYDTDIFNFTBMU1SPKFDUYDTDIFNF
    
    
    
    DSFBUF
    BOESPJEBQQCVJMEHSBEMF
    
    
    
    DSFBUF
    BOESPJEBQQQSPHVBSESVMFTQSP
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJO"OESPJE.BOJGFTUYNM
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTWBMVFTTUSJOHTYNM
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTWBMVFTTUZMFTYNM
    
    
    
    DSFBUF
    BOESPJECVJMEHSBEMF
    
    
    
    DSFBUF
    BOESPJEHSBEMFQSPQFSUJFT
    
    
    
    DSFBUF
    BOESPJETFUUJOHTHSBEMF
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTNJQNBQIEQJJD@MBVODIFSQOH
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTNJQNBQNEQJJD@MBVODIFSQOH
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTNJQNBQYIEQJJD@MBVODIFSQOH
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTNJQNBQYYIEQJJD@MBVODIFSQOH
    
    
    
    DSFBUF
    BOESPJEHSBEMFXSBQQFSHSBEMFXSBQQFSKBS
    
    
    
    DSFBUF
    BOESPJEHSBEMFXSBQQFSHSBEMFXSBQQFSQSPQFSUJFT
    
    
    
    DSFBUF
    BOESPJEHSBEMFX
    
    
    
    DSFBUF
    BOESPJEHSBEMFXCBU
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOKBWBDPNBMUQSPKFDU.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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ