[Full-stack] 跨平台大框架 - RN

前言

---

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

React Native >>

 

 

 

 

路由配置

---

详情请见：[RN] 04 - React Navigation

 

  

UI组件学习

---