Introduce React Native
-
Upload
gmo-zcom-vietnam-lab-center -
Category
Technology
-
view
417 -
download
4
Transcript of Introduce React Native
環境構築
•OS: OS X, Window, Linux
•iOS:
–Xcode 7.0 ↑
•Android
–Android SDK
–Android Studio(or ADT for Eclipse)
–Android emulator(or Genymotion)
•NodeJs(npm) 4.0 ↑
3
環境構築
•インストール
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject
iOS:
Xcodeでios/AwesomeProject.xcodeproj開く
TextEditorでindex.ios.js開く
Android:
Android Studioでandroid/app開く
TextEditorでindex.android.js開く
$ react-native start #start server react-native
4
コンポーネント
6
Image
MapView
Text
TextInput WebView
View
NavigatorIOS
PickerIOS
TouchableHig
hlight
DatePickerIO
S
ActivityIndicat
orIOS
ProgressView
IOS
TouchableNat
iveFeedback
TouchableOp
acity
DrawerLayout
Android
ProgressBarA
ndroid
TabBarIOS.It
em
TabBarIOS
SwitchIOS
SliderIOS
SegmentedC
ontrolIOS
TouchableWith
outFeedback ScrollView
Navigator
Modal
ListView
ToolbarAndroi
d
SwitchAndroi
d
PullToRefres
hViewAndroid
ViewPagerAn
droid
APIS
8
Alert
AlertIOS
Animated
AppRegistry
AppStateIOS
AsyncStorage
BackAndroid
CameraRoll
Dimensions
IntentAndroid
InteractionMana
ger
LayoutAnimation
LinkingIOS
NativeMethodsM
ixin
NetInfo
PanResponder
PixelRatio
PushNotificationI
OS
StatusBarIOS
StyleSheet
ToastAndroid
VibrationIOS
ActionSheetIOS
POLYFILLS
9
Flexbox Timers Network Geolocation
ネイティブモジュール
• iOS: https://facebook.github.io/react-native/docs/native-modules-ios.html
•Android: https://facebook.github.io/react-native/docs/native-modules-android.html
•目的:
–プラットフォームAPIにアクセス
–Javaコード再利用
–JavaScriptで再実装
–パフォーマンス
10
ビルド(Android)
11
android {
...
defaultConfig { ... }
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
//minifyEnabled true
...
signingConfig signingConfigs.release
}
}
}
android/app/build.gradle