React Native Advance

Hello.JS Camp 2017

黃駿朋 / DMoon

dmoon.t@gmail.com

GitHub: kyoyadmoon

Blog: blog.dmoon.tw

About Me

創科資訊 技術培訓顧問

中央資工所

彰師大資工系

Packages

Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels

會做輪子很棒
但不需要重複造輪子

有輪堪用直須用
善用套件

欣賞別人造的輪子
進步的好機會

How to install packages ?

  1. install package

  2. link libraries that contain native code

Steps

  1. Install packages with npm

  2. Run '$ react-native link'

Manual linking

Lab 01

  1. Install react-native-vector-icons

  2. render an Icon on screen

Lab 02

  1. edit icon name in a TextInput

  2. icon will change dynamically

Navigation

Navigating Between Screens

react-native-router-flux

react-navigation

react-native-router-flux

Install

$ yarn add react-native-router-flux

Setup

Usage

  <Router>
    <Scene key="root">
      <Scene key="login" component={Login} title="Login"/>
      <Scene key="register" component={Register} title="Register"/>
      <Scene key="home" component={Home}/>
    </Scene>
  </Router>

API

  • Actions.pop()

  • Actions.{SCENE_KEY}()

  • Actions.refresh()

Tab

Tab Usage

  <Tabs key="tabbar" 
    gestureEnabled={false} showLabel={false} tabs 
    tabBarStyle={styles.tabBarStyle} activeBackgroundColor="#ddd">
    <Scene key="tab1" title="Tab #1" icon={TabIcon}>
      <Scene
        key="tab2_1"
        component={Home}
        title="Tab #2_1"
      />
    </Scene>
    <Scene key="tab2" title="Tab #2" icon={TabIcon}>
      <Scene
        key="tab2_1"
        component={Home}
        title="Tab #2_1"
      />
    </Scene>
  </Tabs>

Lab 01

Tab Route 實作

AsyncStorage

client-side storage

類似瀏覽器 localStorage

AsyncStorage

  • Key-Value

  • App's global storage

  • unencrypted

  • persistent

  • asynchronous

Methods

  • setItem

  • getItem

  • removeItem

  • mergeItem

  • document

Usage

try {
  /* set data */
  await AsyncStorage.setItem('@MySuperStore:key', 'Save it.');

  /* get data */
  const value = await AsyncStorage.getItem('@MySuperStore:key');

} catch (error) {
  // Error saving data
}

Lab 01

  1. store username with setItem

  2. show username on another screen with getItem 

Platform Specific Code 

Two Ways

Platform module

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  height: (Platform.OS === 'ios') ? 200 : 100,
});
  • ios

  • android

Platform.OS

Platform module

Platform module

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

Platform.select

Platform-specific extensions

Separate files

  • BigButton.ios.js

  • BigButton.android.js

Usage

const BigButton = require('./BigButton');

Demo

Animations

animatable component types

  • View

  • Text

  • Image

  • ScrollView

<Animated.View              // Special animatable View
    style={{
      ...this.props.style,
      opacity: fadeAnim,    // Bind opacity to animated value
    }}
>
  {this.props.children}
</Animated.View>

view

state = {
  // Initial value for opacity: 0
  fadeAnim: new Animated.Value(0),  
}

animated value

Animated API

Trigger

Animated.timing(        // Animate over time
  this.state.fadeAnim,  // The animated value to drive
  {
    toValue: 1,         // Animate to opacity: 1 (opaque)
    duration: 10000,    // Make it take a while
  }
).start();   

Composing Animations

  • sequence

  • parallel

Lab 01

實作兩個動畫

Lab 02

composing two animations with sequence or parallel

Running On Device

iOS offline bundle

$ react-native bundle --platform ios 
--dev false 
--entry-file index.ios.js 
--bundle-output iOS/main.jsbundle 

--minify

Android offline bundle

$ node node_modules/react-native/local-cli/cli.js 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

Generating App

Android

Steps

  1. Generating a signing key

  2. Setting up gradle variables

  3. Adding signing config to your app's gradle config

  4. Generating the release APK

Howework

Generating Offline App

React Native Advance

By dmoon

React Native Advance

  • 2,210