Introduce React Native

1

React Native開発

Pham Van Dong

目次

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

2

環境構築

•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

環境構築

•Index.ios.js

5

コンポーネント

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

Server

React-Native

Android App

Request index.android.bundle

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

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