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͕ใগͳ͗ͯ͢ݫ͍͠
• σόοάग़དྷͳ͍