ReactNative for Android

Transcript

1. 1.

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

   
2. 2.

   

3. 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
4. 4.

   None
5. 5.

   None
6. 6.

   None
7. 7.

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

8. 8.

   petitviolet/ReactNativeAndroidSample

9. 9.

   var ReactSampleProject = React.createClass({ getInitialState: function() { return {text: “”};

   }, render: function() { var todoItem = {label: 'hoge'}; return ( <View style={styles.container}> <Text>{this.state.text}</Text> <ToastButton text={this.state.text}/> <TextInput style={styles.textInput} onChangeText={(text) => this.setState({text})} value={this.state.text} /> <TodoItem label={todoItem.label} /> </View> ); } });
10. 10.

    var ReactSampleProject = React.createClass({ getInitialState: function() { return {text: “”};

    }, render: function() { var todoItem = {label: 'hoge'}; return ( <View style={styles.container}> <Text>{this.state.text}</Text> <ToastButton text={this.state.text}/> <TextInput style={styles.textInput} onChangeText={(text) => this.setState({text})} value={this.state.text} /> <TodoItem label={todoItem.label} /> </View> ); } });
11. 11.

    var ReactSampleProject = React.createClass({ getInitialState: function() { return {text: “”};

    }, render: function() { var todoItem = {label: 'hoge'}; return ( <View style={styles.container}> <Text>{this.state.text}</Text> <ToastButton text={this.state.text}/> <TextInput style={styles.textInput} onChangeText={(text) => this.setState({text})} value={this.state.text} /> <TodoItem label={todoItem.label} /> </View> ); } });
12. 12.

    var ReactSampleProject = React.createClass({ getInitialState: function() { return {text: “”};

    }, render: function() { var todoItem = {label: 'hoge'}; return ( <View style={styles.container}> <Text>{this.state.text}</Text> <ToastButton text={this.state.text}/> <TextInput style={styles.textInput} onChangeText={(text) => this.setState({text})} value={this.state.text} /> <TodoItem label={todoItem.label} /> </View> ); } });
13. 13.

    var ReactSampleProject = React.createClass({ getInitialState: function() { return {text: “”};

    }, render: function() { var todoItem = {label: 'hoge'}; return ( <View style={styles.container}> <Text>{this.state.text}</Text> <ToastButton text={this.state.text}/> <TextInput style={styles.textInput} onChangeText={(text) => this.setState({text})} value={this.state.text} /> <TodoItem label={todoItem.label} /> </View> ); } });
14. 14.

    var ReactSampleProject = React.createClass({ getInitialState: function() { return {text: “”};

    }, render: function() { var todoItem = {label: 'hoge'}; return ( <View style={styles.container}> <Text>{this.state.text}</Text> <ToastButton text={this.state.text}/> <TextInput style={styles.textInput} onChangeText={(text) => this.setState({text})} value={this.state.text} /> <TodoItem label={todoItem.label} /> </View> ); } });
15. 15.

    var ToastButton = React.createClass({ propTypes: { text: React.PropTypes.string.isRequired, }, render:

    function () { return ( <TouchableNativeFeedback onPress={() => ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)} background={TouchableNativeFeedback.SelectableBackground()} style={styles.toastButton}> <View> <Text style={styles.toastButtonText}>Tap me</Text> </View> </TouchableNativeFeedback> ); }, });
16. 16.

    var ToastButton = React.createClass({ propTypes: { text: React.PropTypes.string.isRequired, }, render:

    function () { return ( <TouchableNativeFeedback onPress={() => ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)} background={TouchableNativeFeedback.SelectableBackground()} style={styles.toastButton}> <View> <Text style={styles.toastButtonText}>Tap me</Text> </View> </TouchableNativeFeedback> ); }, });
17. 17.

    var ToastButton = React.createClass({ propTypes: { text: React.PropTypes.string.isRequired, }, render:

    function () { return ( <TouchableNativeFeedback onPress={() => ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)} background={TouchableNativeFeedback.SelectableBackground()} style={styles.toastButton}> <View> <Text style={styles.toastButtonText}>Tap me</Text> </View> </TouchableNativeFeedback> ); }, });
18. 18.

    var ToastButton = React.createClass({ propTypes: { text: React.PropTypes.string.isRequired, }, render:

    function () { return ( <TouchableNativeFeedback onPress={() => ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)} background={TouchableNativeFeedback.SelectableBackground()} style={styles.toastButton}> <View> <Text style={styles.toastButtonText}>Tap me</Text> </View> </TouchableNativeFeedback> ); }, });
19. 19.

    var ToastButton = React.createClass({ propTypes: { text: React.PropTypes.string.isRequired, }, render:

    function () { return ( <TouchableNativeFeedback onPress={() => ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)} background={TouchableNativeFeedback.SelectableBackground()} style={styles.toastButton}> <View> <Text style={styles.toastButtonText}>Tap me</Text> </View> </TouchableNativeFeedback> ); }, });
20. 20.

    var ReactSampleProject = React.createClass({ getInitialState: function() { return {text: “”};

    }, render: function() { var todoItem = {label: 'hoge'}; return ( <View style={styles.container}> <Text>{this.state.text}</Text> <ToastButton text={this.state.text}/> <TextInput style={styles.textInput} onChangeText={(text) => this.setState({text})} value={this.state.text} /> <TodoItem label={todoItem.label} /> </View> ); } });
21. 21.

    var ReactSampleProject = React.createClass({ getInitialState: function() { return {text: “”};

    }, render: function() { var todoItem = {label: 'hoge'}; return ( <View style={styles.container}> <Text>{this.state.text}</Text> <ToastButton text={this.state.text}/> <TextInput style={styles.textInput} onChangeText={(text) => this.setState({text})} value={this.state.text} /> <TodoItem label={todoItem.label} /> </View> ); } });
22. 22.

    petitviolet/ReactNativeAndroidSample

23. 23.

    None
24. 24.

    ײ૝ • ·ͩૣ͍ • <Button>͢Βແ͍(͸ͣ) • Reactڧ͍ͳΒଟগָʹॻ͚Δ͸ͣ • JSͷauto reloadͰ։ൃग़དྷΔͷ͸࠷ߴ

    • CustomViewΊͪΌ؆୯ʹ࡞Εͯྑ͍ • StackTrace͕৘ใগͳ͗ͯ͢ݫ͍͠ • σόοάग़དྷͳ͍