Hello.JS Camp 2017
中央資工所
彰師大資工系
Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels
有輪堪用直須用
善用套件
$ yarn add react-native-router-flux
<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>
<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>
類似瀏覽器 localStorage
try {
/* set data */
await AsyncStorage.setItem('@MySuperStore:key', 'Save it.');
/* get data */
const value = await AsyncStorage.getItem('@MySuperStore:key');
} catch (error) {
// Error saving data
}
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
height: (Platform.OS === 'ios') ? 200 : 100,
});
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: 'red',
},
android: {
backgroundColor: 'blue',
},
}),
},
});
const BigButton = require('./BigButton');
<Animated.View // Special animatable View
style={{
...this.props.style,
opacity: fadeAnim, // Bind opacity to animated value
}}
>
{this.props.children}
</Animated.View>
state = {
// Initial value for opacity: 0
fadeAnim: new Animated.Value(0),
}
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();
$ react-native bundle --platform ios
--dev false
--entry-file index.ios.js
--bundle-output iOS/main.jsbundle
--minify
$ 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