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

前言

---

React-Redux的大全棧代碼複用理論有點意思，給出一個具體的例子：[React] 15 - Redux: practice IM

由於與react內容自然地部分重合，故這裏將重點放在了對component的學習。

 

  

個人開始

---

1、建立新項目

• 傳統作法

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=8088
$ react-native   run-android

 

2、代碼佈局

涉及的四個部分，以下：

'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);

 

 3、代碼發佈

詳情請見：[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組件學習