$30 off During Our Annual Pro Sale. View Details »

ReactNative for Android

petitviolet
September 16, 2015

ReactNative for Android

petitviolet

September 16, 2015
Tweet

More Decks by petitviolet

Other Decks in Programming

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