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
4k
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
1.3k
ピュアなドメインを支える技術/pure domain model and the technology behind it
petitviolet
14
9.9k
小さく始めるクラウドネイティブ/small start CloudNative
petitviolet
0
1.8k
2019年だからこそ12factor app/The Twelve-Factor app in 2019
petitviolet
1
980
実践GraphQL on Scala/Real world GraphQL on Scala
petitviolet
8
2.9k
Kubernetesを知る/Introduction Kubernertes
petitviolet
1
620
GraphQL on Scala
petitviolet
3
2.6k
Microservices Batch on GAE
petitviolet
0
1.9k
Web API Design
petitviolet
18
8.2k
Other Decks in Programming
See All in Programming
rails newと同時に型を書く
aki19035vc
5
710
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
300
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
300
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
550
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.4k
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
300
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
630
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.2k
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
1.3k
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
200
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
220
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Designing Experiences People Love
moore
139
23k
Building Adaptive Systems
keathley
38
2.4k
Why Our Code Smells
bkeepers
PRO
335
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
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͕ใগͳ͗ͯ͢ݫ͍͠ • σόοάग़དྷͳ͍