Slide 1

Slide 1 text

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

Slide 2

Slide 2 text



Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

petitviolet/ReactNativeAndroidSample

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

petitviolet/ReactNativeAndroidSample

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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