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
4.1k
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.5k
ピュアなドメインを支える技術/pure domain model and the technology behind it
petitviolet
14
10k
小さく始めるクラウドネイティブ/small start CloudNative
petitviolet
0
1.9k
2019年だからこそ12factor app/The Twelve-Factor app in 2019
petitviolet
1
1k
実践GraphQL on Scala/Real world GraphQL on Scala
petitviolet
8
3.1k
Kubernetesを知る/Introduction Kubernertes
petitviolet
1
640
GraphQL on Scala
petitviolet
3
2.7k
Microservices Batch on GAE
petitviolet
0
1.9k
Web API Design
petitviolet
18
8.4k
Other Decks in Programming
See All in Programming
C++20 射影変換
faithandbrave
0
530
5つのアンチパターンから学ぶLT設計
narihara
1
110
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
190
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
XSLTで作るBrainfuck処理系
makki_d
0
210
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
370
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.3k
Featured
See All Featured
Done Done
chrislema
184
16k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Code Reviewing Like a Champion
maltzj
524
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Designing for humans not robots
tammielis
253
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Embracing the Ebb and Flow
colly
86
4.7k
Thoughts on Productivity
jonyablonski
69
4.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
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͕ใগͳ͗ͯ͢ݫ͍͠ • σόοάग़དྷͳ͍