ReactNative for Android

potatotips#21 http://connpass.com/event/18732/

Transcript

1. React Native
   for
   Android
   Potatotips #21
   @petitviolet
   Fringe81 Co., Ltd.
   
   

   View Slide

2. 
   

   View Slide

3. How to Setup
   npm install -g react-native-cli
   brew install watchman
   brew install flow
   react-native init ReactSampleProject
   cd ./ReactSampleProject
   npm i
   react-native run-android
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. • AVDͩͱF2
   • GenymotionͩͱF10
   • ࣮ػ͸ৼΔ
   

   View Slide

8. petitviolet/ReactNativeAndroidSample
   

   View Slide

9. var ReactSampleProject = React.createClass({
   getInitialState: function() {
   return {text: “”};
   },
   render: function() {
   var todoItem = {label: 'hoge'};
   return (
   
   {this.state.text}
   
   style={styles.textInput}
   onChangeText={(text) => this.setState({text})}
   value={this.state.text} />
   
   
   );
   }
   });
   

   View Slide

10. var ReactSampleProject = React.createClass({
    getInitialState: function() {
    return {text: “”};
    },
    render: function() {
    var todoItem = {label: 'hoge'};
    return (
    
    {this.state.text}
    
    style={styles.textInput}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text} />
    
    
    );
    }
    });
    

    View Slide

11. var ReactSampleProject = React.createClass({
    getInitialState: function() {
    return {text: “”};
    },
    render: function() {
    var todoItem = {label: 'hoge'};
    return (
    
    {this.state.text}
    
    style={styles.textInput}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text} />
    
    
    );
    }
    });
    

    View Slide

12. var ReactSampleProject = React.createClass({
    getInitialState: function() {
    return {text: “”};
    },
    render: function() {
    var todoItem = {label: 'hoge'};
    return (
    
    {this.state.text}
    
    style={styles.textInput}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text} />
    
    
    );
    }
    });
    

    View Slide

13. var ReactSampleProject = React.createClass({
    getInitialState: function() {
    return {text: “”};
    },
    render: function() {
    var todoItem = {label: 'hoge'};
    return (
    
    {this.state.text}
    
    style={styles.textInput}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text} />
    
    
    );
    }
    });
    

    View Slide

14. var ReactSampleProject = React.createClass({
    getInitialState: function() {
    return {text: “”};
    },
    render: function() {
    var todoItem = {label: 'hoge'};
    return (
    
    {this.state.text}
    
    style={styles.textInput}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text} />
    
    
    );
    }
    });
    

    View Slide

15. var ToastButton = React.createClass({
    propTypes: {
    text: React.PropTypes.string.isRequired,
    },
    render: function () {
    return (
    onPress={() =>
    ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)}
    background={TouchableNativeFeedback.SelectableBackground()}
    style={styles.toastButton}>
    
    Tap me
    
    
    );
    },
    });
    

    View Slide

16. var ToastButton = React.createClass({
    propTypes: {
    text: React.PropTypes.string.isRequired,
    },
    render: function () {
    return (
    onPress={() =>
    ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)}
    background={TouchableNativeFeedback.SelectableBackground()}
    style={styles.toastButton}>
    
    Tap me
    
    
    );
    },
    });
    

    View Slide

17. var ToastButton = React.createClass({
    propTypes: {
    text: React.PropTypes.string.isRequired,
    },
    render: function () {
    return (
    onPress={() =>
    ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)}
    background={TouchableNativeFeedback.SelectableBackground()}
    style={styles.toastButton}>
    
    Tap me
    
    
    );
    },
    });
    

    View Slide

18. var ToastButton = React.createClass({
    propTypes: {
    text: React.PropTypes.string.isRequired,
    },
    render: function () {
    return (
    onPress={() =>
    ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)}
    background={TouchableNativeFeedback.SelectableBackground()}
    style={styles.toastButton}>
    
    Tap me
    
    
    );
    },
    });
    

    View Slide

19. var ToastButton = React.createClass({
    propTypes: {
    text: React.PropTypes.string.isRequired,
    },
    render: function () {
    return (
    onPress={() =>
    ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)}
    background={TouchableNativeFeedback.SelectableBackground()}
    style={styles.toastButton}>
    
    Tap me
    
    
    );
    },
    });
    

    View Slide

20. var ReactSampleProject = React.createClass({
    getInitialState: function() {
    return {text: “”};
    },
    render: function() {
    var todoItem = {label: 'hoge'};
    return (
    
    {this.state.text}
    
    style={styles.textInput}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text} />
    
    
    );
    }
    });
    

    View Slide

21. var ReactSampleProject = React.createClass({
    getInitialState: function() {
    return {text: “”};
    },
    render: function() {
    var todoItem = {label: 'hoge'};
    return (
    
    {this.state.text}
    
    style={styles.textInput}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text} />
    
    
    );
    }
    });
    

    View Slide

22. petitviolet/ReactNativeAndroidSample
    

    View Slide

23. View Slide

24. ײ૝
    • ·ͩૣ͍
    • ͢Βແ͍(͸ͣ)
    • Reactڧ͍ͳΒଟগָʹॻ͚Δ͸ͣ
    • JSͷauto reloadͰ։ൃग़དྷΔͷ͸࠷ߴ
    • CustomViewΊͪΌ؆୯ʹ࡞Εͯྑ͍
    • StackTrace͕৘ใগͳ͗ͯ͢ݫ͍͠
    • σόοάग़དྷͳ͍
    

    View Slide