Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactNative for Android
Search
petitviolet
September 16, 2015
Programming
3
3.8k
ReactNative for Android
potatotips#21
http://connpass.com/event/18732/
petitviolet
September 16, 2015
Tweet
Share
More Decks by petitviolet
See All by petitviolet
Stripeで請求書払い&銀行振込を実装する
petitviolet
0
830
ピュアなドメインを支える技術/pure domain model and the technology behind it
petitviolet
14
9.5k
小さく始めるクラウドネイティブ/small start CloudNative
petitviolet
0
1.6k
2019年だからこそ12factor app/The Twelve-Factor app in 2019
petitviolet
1
930
実践GraphQL on Scala/Real world GraphQL on Scala
petitviolet
8
2.7k
Kubernetesを知る/Introduction Kubernertes
petitviolet
1
570
GraphQL on Scala
petitviolet
3
2.4k
Microservices Batch on GAE
petitviolet
0
1.8k
Web API Design
petitviolet
18
7.7k
Other Decks in Programming
See All in Programming
哲学史とモデリング
tanakahisateru
2
430
酒飲んでたらテックリードになった話
spbaya0141
0
210
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
520
2024 コーディング研修
ckazu
2
660
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
2.8k
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
株式会社ゼネテック
genetec
0
120
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
2
280
Jetpack Composeとデザインシステム
rmakiyama
0
240
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
130
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
mb_trim関数を作りました
youkidearitai
PRO
1
230
Featured
See All Featured
In The Pink: A Labor of Love
frogandcode
138
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Design by the Numbers
sachag
274
18k
The Mythical Team-Month
searls
217
42k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Designing with Data
zakiwarfel
96
4.8k
Bash Introduction
62gerente
605
210k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Raft: Consensus for Rubyists
vanstee
133
6.3k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Transcript
React Native for Android Potatotips #21 @petitviolet Fringe81 Co., Ltd.
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
None
None
None
• AVDͩͱF2 • GenymotionͩͱF10 • ࣮ػৼΔ
petitviolet/ReactNativeAndroidSample
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> ); } });
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> ); } });
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> ); } });
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> ); } });
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> ); } });
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> ); } });
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> ); }, });
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> ); }, });
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> ); }, });
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> ); }, });
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> ); }, });
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> ); } });
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> ); } });
petitviolet/ReactNativeAndroidSample
None
ײ • ·ͩૣ͍ • <Button>͢Βແ͍(ͣ) • Reactڧ͍ͳΒଟগָʹॻ͚Δͣ • JSͷauto reloadͰ։ൃग़དྷΔͷ࠷ߴ
• CustomViewΊͪΌ؆୯ʹ࡞Εͯྑ͍ • StackTrace͕ใগͳ͗ͯ͢ݫ͍͠ • σόοάग़དྷͳ͍