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

Made with Slides.com