React Native基本介紹
React Native 是一款用來開發真正原生、可渲染 iOS 和 Android 移動應用的 JavaScript 框架。它基于 Facebook 公司開源的 JavaScript 用戶界面開發框架 React 而產生，但 React 將瀏覽器作為渲染平臺，而 React Native 的渲染平臺則是移動設備。
React Native（下文簡稱RN）使得APP的構建更快，在JS的代碼變更之后，可以立即刷新應用，而不需要再次編譯。該功能是通過Hot Reloading實現的，我們下文會進行說明。
JS項目結構
對于客戶端同學來說，在接觸RN之前，需要先對JS項目的基本結構有個基本的了解。
JS項目基本結構：
.
├── index.js
├── node_modules
├── src
├── package.json
├── ....
src：用于管理真正的開發代碼。
index.tsx/index.js：是程序的入口，在項目執行時，會先執行index.js文件。
package.json：是項目的配置文件，npm-package.json可以管理項目名稱、版本號、依賴關系、也可以用來擴展項目的執行腳本。
node_modules：通過package.json內的dependency下載的依賴文件集合。非常大，一般是git ignore的。
npm
前面說到了npm，npm是全球最大的軟件管理平臺，用于組件發布，對項目進行關聯，依賴安裝等。可以點擊安裝npm理解安裝詳情。
安裝的依賴文件都會放在node_modules文件夾內。
A joke：雷神的錘子里面有什么? "node_modules"....
構建React Native工程/現有項目接入React Native
React Native使用了Expo來創建RN項目，Expo的優勢在于，可以不安裝Xcode或者Android Studio就可以開發和調試RN的JSdaunt代碼。
安裝Expo和初始化RN項目的代碼如下：
//安裝Expo的命令行
npm install -g expo-cli
//初始化RN項目，ProjectName自己填寫
expo init ProjectName
cd ProjectName
npm start
了解了創建項目的方式之后，我們介紹一下JS端和Native的入口和交互方式，具體實現原理，會在后期的文章里進行詳細說明，歡迎關注。
現有項目接入React Native
使用上述指令創建的純RN項目，Native端和JS端的入口已經構建好了，但如果是在現有項目集成RN的話，下面講解。
現有iOS項目集成RN組件需要以下步驟：
- 設置RN依賴和文件結構。
- 確定開發需要的RN組件。
- 使用CocoaPods引入依賴。
- 在JS端開發RN組件。
- 在iOS端增加
RCTRootView，作為RN組件的容器。 - 啟動RN服務，運行APP。
JS項目和Native項目結構的設計迷思
React Native一個完整的項目，包含React端和Native端，Native端作為宿主，React端則是實際開發，使用React框架進行開發，通過bridge的方式，調用Native提供的方法，最終由Native來實現。
在Native的宿主APP上，可以運行任何的React代碼，所以Native工程和React并沒有強制的項目結構約束，是兩個獨立的工程。
項目結構管理方式可以有以下幾種：
- RN官方是建議以React為主工程，在子文件夾/iOS和/Android去管理不同平臺，這種適用于純RN項目，對于現有項目集成RN不太適用。
- Native項目結構上不依賴React項目，只是約定系統的RN版本，保證交互一致。
如何建立Native端的依賴，保證使用的版本和React一致？
RN官方提供的依賴安裝方式只有npm，Native端通過pod指定路徑的方式：pod 'React', :path => '../node_modules/react-native'進行安裝。如果React和Native項目是獨立的，可以通過同一個package.json來控制版本和在Native端安裝node_modules。
另一種做法，有很多公司內部，為了安裝方便，會將RN某個版本的代碼，備份到公司服務器，發布自己的RN依賴，然后在podfile內，直接拉取線上的RN依賴，優勢是不需要npm，缺點是RN升級不易管理。
React和Native入口
Native端入口：RN提供了RCTRootView作為React的容器，實例代碼如下
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"RNHighScores"
initialProperties:
@{}
]
}
launchOptions: nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
上面用到的moduleName，是和React端約定好的組件名稱，React端如何輸出組件呢？
React端入口：通過以下方式，約定的組件名，和具體的組件來輸出。
AppRegistry.registerComponent('RNHighScores', () => Component);
使用React Native開發第一個頁面
RN和React很像，區別點只是使用Native的組件代替了web組件來進行渲染和計算。所以了解RN項目之前，需要了解React的基本概念：JSX、組件、state、props。
React基本知識
下面通過講解React和JavaScript設計和語法等內容，讓各位對RN開發有個基本的了解 ，如果已經理解React知識，可以跳過。
ES6：RN使用了ES2015（常稱為ES6）語法進行開發，支持所有ES6提供的特性，如果不了解可以查看ES6。
JSX：<View><Text>Hello world!</Text></View>是JSX語法。
組件：Component，以下就是定義了一個叫做HelloWroldApp的組件。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View>
<Text>Hello world!</Text>
</View>
);
}
}
Props和State：有兩種控制組件數據的類型，props和state。props是通過外部配置，傳入的參數。state是屬于組件內部，用于存儲可變數據。
在constructor內初始化state，然后在要改變state時調用setState方法。
RN使用的是單項數據流，通過數據綁定的方式，在props和state改變時，實時去刷新頁面，這個叫做Hot Reloading
布局：在RN中，所有的核心組件都有一個屬性叫做style，樣式命名和CSS的幾乎相同，區別只是RN使用駝峰命名法。
一般使用StyleSheet.create創建styles對象，如下
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
export default class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
布局方式使用的Flexbox，通過對布局屬性進行設置，控制頁面樣式。
更多可以參考flexbox guide
begin coding
下面通過開發一個很小的頁面來說明了解RN的import、組件、布局、Flexbox。
從import開始
組件文件默認不會引入依賴，需要通過import的方式來聲明需要使用的框架。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import ...form...的方式大家一定很熟悉，后面是組件的名稱，前面不熟悉前端的同學可能會對于{ View }這種形式很陌生，這種叫做對象的解構賦值，通過中括號的形式，以對象內key的名稱去取對應的value。
export組件
上面增加了依賴后，我們要把當前的組件輸出。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class MyComponent extends Component {
render() {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
這里說明一下export的語義。export命令
提取styles
之前我們說過，style是每個布局組件的默認屬性，可以通過StyleSheet.create去構建樣式。例如上文的樣式就可以抽取如下：
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row'
}，
powderblue:{
width: 50,
height: 50,
backgroundColor: 'powderblue'
},
skyblue:{
width: 50,
height: 50,
backgroundColor: 'skyblue'
}
steelblue:{
width: 50,
height: 50,
backgroundColor: 'steelblue'
}
});
export default class MyComponent extends Component {
render() {
return (
<View style={{styles.container}>
<View style={styles.powderbule} />
<View style={styles.skyblue} />
<View style={styles.steelblue} />
</View>
);
}
};
樣式為：
Flexbox具體示例
通過改變container的flex相關的布局屬性，可以改變子View的排列方式，項目下面只展示修改style的代碼：
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}
flexDirection是確定的排列方向，縱向還是橫向。
justifyContent確定同一方向的排列方式，是簇擁還是分開。
