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
10k
小さく始めるクラウドネイティブ/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
3k
Kubernetesを知る/Introduction Kubernertes
petitviolet
1
630
GraphQL on Scala
petitviolet
3
2.6k
Microservices Batch on GAE
petitviolet
0
1.9k
Web API Design
petitviolet
18
8.3k
Other Decks in Programming
See All in Programming
Domain-Driven Transformation
hschwentner
2
1.9k
Unity Android XR入門
sakutama_11
0
140
GAEログのコスト削減
mot_techtalk
0
110
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
Code Reviewing Like a Champion
maltzj
521
39k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Scaling GitHub
holman
459
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Bash Introduction
62gerente
610
210k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Unsuck your backbone
ammeep
669
57k
GitHub's CSS Performance
jonrohan
1030
460k
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͕ใগͳ͗ͯ͢ݫ͍͠ • σόοάग़དྷͳ͍