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.9k
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
960
ピュアなドメインを支える技術/pure domain model and the technology behind it
petitviolet
14
9.6k
小さく始めるクラウドネイティブ/small start CloudNative
petitviolet
0
1.6k
2019年だからこそ12factor app/The Twelve-Factor app in 2019
petitviolet
1
940
実践GraphQL on Scala/Real world GraphQL on Scala
petitviolet
8
2.8k
Kubernetesを知る/Introduction Kubernertes
petitviolet
1
580
GraphQL on Scala
petitviolet
3
2.5k
Microservices Batch on GAE
petitviolet
0
1.8k
Web API Design
petitviolet
18
7.9k
Other Decks in Programming
See All in Programming
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
20240706_CDKConf
takuyay0ne
0
1.2k
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
最近追加した型の紹介とその振り返り
aki19035vc
0
170
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
リハビリmruby
kishima
1
160
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Automating Front-end Workflow
addyosmani
1362
200k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Raft: Consensus for Rubyists
vanstee
134
6.5k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
How to name files
jennybc
67
96k
Become a Pro
speakerdeck
PRO
15
4.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Documentation Writing (for coders)
carmenintech
63
4.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
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͕ใগͳ͗ͯ͢ݫ͍͠ • σόοάग़དྷͳ͍