React Native Advance
Hello.JS Camp 2017
黃駿朋 / DMoon
About Me
創科資訊 技術培訓顧問
中央資工所
彰師大資工系
Packages
Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels
會做輪子很棒
但不需要重複造輪子
有輪堪用直須用
善用套件
欣賞別人造的輪子
進步的好機會
How to install packages ?
-
install package
-
link libraries that contain native code
Steps
-
Install packages with npm
-
Run '$ react-native link'
Manual linking
Lab 01
-
Install react-native-vector-icons
-
render an Icon on screen
Lab 02
-
edit icon name in a TextInput
-
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
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
-
store username with setItem
-
show username on another screen with getItem
Platform Specific Code
Two Ways
-
Using the Platform module
-
Using platform-specific file extensions
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
-
Generating a signing key
-
Setting up gradle variables
-
Adding signing config to your app's gradle config
-
Generating the release APK
Howework
Generating Offline App
React Native Advance
By dmoon
React Native Advance
- 2,210