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

ReactNative for Android

93bc8fb48f57c11e417dad9d26a2fb8a?s=47 petitviolet
September 16, 2015

ReactNative for Android

93bc8fb48f57c11e417dad9d26a2fb8a?s=128

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.

    
  2. 

  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. None
  5. None
  6. None
  7. • AVDͩͱF2 • GenymotionͩͱF10 • ࣮ػ͸ৼΔ

  8. petitviolet/ReactNativeAndroidSample

  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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. petitviolet/ReactNativeAndroidSample

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

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