RN 開發流程簡述

一. RN簡介

1. RN背景及由來

早期開發一款Android, IOS App 需要Android, ios 兩個團隊。同時兩個平臺/終端需要兩套代碼，複用率及成本比較高。傳統方式開發的Android, ios 無法實現動態更新， 每次更新都需要響應APP應用市場上傳，過程複雜還需要等待app審覈。如果審覈還沒通過，新的版本需求來了就造成了非常尷尬的場景。

RN特點： 跨平臺（android, ios）, 低投入高回報(一次學習可以同時開發android,ios應用)，代碼複用率高(兩個平臺代碼基本一致，通用一套) 性能高（併發允許在webkit瀏覽器引擎，而是自己的渲染引擎，性能比webview + h5性能高很多）， 支持動態更新(code push 或服務器等動態更新)。

二. RN開發環境介紹

1. Window環境介紹

• node 環境安裝
• react-native 安裝
  npm install -g react-native-cli
• androidStudio 用於開發android的開發工具
  通過google提供的中文域名： https://developer.android.google.cn/index.html 下載安裝

至此環境準備已完成。

初始化及使用

(1) eact-native init FirsApp 來初始化一個RN自定義名爲FirsApp的項目

(2) 運行一個rn/android 項目 (首先要確定已運行了一個模擬器/或者有一個連接到電腦的android設備)
- 通過命令啓動RN中的android項目
run react-native run android （運行rn中的android項目）
運行後會編譯並安裝到模擬器
- 通過androidStudio 啓動RN中的android項目

二. RN項目調試

1. 調試方式Developer Menu

三. React/ES6-9基礎

1. React 基礎

(1) React 生命週期
(2) React： Props, State（組件自身私有狀態）, setState(更新組件自身狀態)， ref；

基礎知識不再補充，自行參考官網

2. ES6-9 基礎

基礎知識不再補充， 自行參考官網

三. React-Native 佈局

1. 基礎知識點

React Native 中的佈局方式FlexBox. 即: 在React Native 中佈局採用的是FlexBox（彈性框）進行佈局。
FlexBox 提供了在不同尺寸設備上都能保持一致的佈局方式。FlexBox是CSS3彈性框佈局規範，並不是所有瀏覽器都支持FlexBox。 但在做React Native開發時大可不必擔心FlexBox的兼容性問題， 因爲React Native 選擇用FlexBox佈局，那麼React Native 對其的支持自然會做的很好。

像素無關

在React Native中尺寸是沒有單位的， 它代表了設備獨立像素。

<View style={{width: 100, height: 100, margin: 40}}>
     <Text style={{fontSize:16, margin: 20}}>尺寸</Text>
</View>

上述代碼, 運行在Android上時， View的長和寬被解釋成： 100dp 100dp單位是 dp, 字體被解釋成16sp 單位是

React Nativ 中的FlexBox 和 Web CSS上FlexBox的不同之處

其餘相關CSS3 flex 向支持，自行參考官網。