前言
React-Redux的大全栈代码复用理论有点意思，给出一个具体的例子：[React] 15 - Redux: practice IM
因为与react内容天然地部分重合，故这里将重点放在了对component的学习。
我的开始
一、创建新项目
- 传统做法
Goto: [RN] 01 - Init: Try a little bit of React Native - Run It
npm install -g react-native-cli
react-native init HelloWorld
cd HelloWorld/
react-native start --port=8088
react-native run-android
- Expo做法
Goto: 《React Native高效开发》之 create-react-native-app
$ npm install -g create-react-native-app $ create-react-native-app <project name>
$ cd <project folder>
$ npm start
Ref: Expo大作战系列【有必要过一遍】
- Github做法
$ npm install
$ cd HelloWorld/
$ react-native start --port=
$ react-native run-android
二、代码布局
涉及的四个部分，如下：
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
# 引入组件
-----------------------------------------------------------
class DongFang extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!东方耀的第5课
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
-----------------------------------------------------------
# 样式表 系统api
const styles = StyleSheet.create({
container: { # 可伸缩的表
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
-----------------------------------------------------------
AppRegistry.registerComponent('DongFang', () => DongFang);
三、代码发布
详情请见：[RN] 02 - Overview: React Native Practice of 50 lectures
AWS 后端配置
重点是对 AWS Mobile Hub 的理解，goto: [RN] 03 - Resource Collection & AWS Auth
路由配置
详情请见：[RN] 04 - React Navigation