Introduce React Native

1. 1
React Native開発
Pham Van Dong

2. 目次
I. 環境構築
II. コンポーネント
III. API
IV. ネイティブモジュール
V. ビルド
2

3. 環境構築
•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

4. 環境構築
•インストール
$ 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

5. 環境構築
•Index.ios.js
5

6. コンポーネント
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

7. 環境構築
7
Server
React-Native
Android App
Request index.android.bundle

8. 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

9. POLYFILLS
9
Flexbox TimersNetworkGeolocation

10. ネイティブモジュール
•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

11. ビルド(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

12. ビルド(Android)
$ mkdir -p android/app/src/main/assets
$ react-native bundle --platform android --dev false --entry-
file index.android.js
--bundle-output android/app/src/main/assets/index.android.bundle
--assets-dest android/app/src/main/res/
$ cd android && ./gradlew assembleRelease
12