React Native 簡稱 RN 是 FaceBook 發(fā)布的跨平臺開發(fā)框架，它的設(shè)計理念是：使用 React Native 開發(fā)，既擁有 Native 的良好人機交互體驗，又保留了 React 開發(fā)效率。
一、為什么選擇 React Native
在 React Native 發(fā)布的短短幾年之內(nèi)，已經(jīng)有很多使用 RN 技術(shù)開發(fā)的 App 上線， 其中就有我們團隊開發(fā)4個 App。它的優(yōu)點非常多。
開發(fā)效率高，成本低
通常情況開發(fā)一款 App 需要發(fā)布在 Android 和 iOS 兩個平臺，導致的結(jié)果就是一個 App 有兩個團隊、兩套代碼，界面幾乎一樣。
React Native 使用 JSX 語法開發(fā)，所謂 JSX，是 JavaScript 的語法擴展，讓我們在 JavaScript 中可以編寫類似 HTML 一樣的代碼。React Native 利用 JavascriptCore 引擎對 JS 文件進行解析，并利用 Bridge 映射到對應的 Native 方法和 UI 控件。相當于使用一套代碼即可完成之前兩套代碼完成的工作量，只需根據(jù)不同平臺稍作修改即可。
不僅如此，RN 代碼量甚至比之前一套都少， Debug 超級方便，一邊開發(fā)一邊看效果再也不是夢。
快速熱更新
RN 生成的 JS 文件，只要不涉及原生功能的增減，已經(jīng)發(fā)布的 App 完全不需要重新安裝即可完成新版功能的上線，用戶只需打開 App 就能體驗到最新的 App，省去了下載重裝的各種麻煩，把 App 的更新做到了和網(wǎng)頁更新一樣的方便快捷。
使用 RN 就能達到既有原生的所有能力，又有類似瀏覽器上的快速更新能力，同時還可以接入各種定制好的網(wǎng)頁，將 App 的自由度提高到一個非常高的地步。
支持混合開發(fā)
React Native 允許開發(fā)者在 React Native 擅長的領(lǐng)域使用 React Native 開發(fā)，而在 React Native 不能實現(xiàn)的領(lǐng)域或者已經(jīng)有原生代碼實現(xiàn)好的領(lǐng)域直接使用原生代碼。React Native 代碼開發(fā)的模塊與原生代碼開發(fā)的模塊可以雙向通信、無縫鏈接。
二、 創(chuàng)建 React Native項目
React Native 環(huán)境搭建稍微麻煩一點，不過 React Native 官網(wǎng)把詳細的步驟都已經(jīng)列出來了，這里就不再重復介紹了。
- 英文官網(wǎng)：http://facebook.github.io/react-native/docs/getting-started.html
- 中文官網(wǎng)：https://reactnative.cn
英文官網(wǎng)內(nèi)容是最新的，建議由能力的查看英文官網(wǎng)，搭建環(huán)境方式有兩種，這里直接選擇 ** Building Projects With Native Code **方式，如下圖所示。
按照官網(wǎng)搭建好 React-Native 項目，請確保電腦上已經(jīng)滿足下面的這些條件：
- nodejs：RN 的所有庫都是從 npm 上安裝的，請確保電腦上已經(jīng)安裝了 npm，可以使用npm -v來查看當前是否已安裝。
- react-native-cli：這個通常用作 RN 的初始化和啟動模擬器等，使用 NPM 可以安裝到電腦上。
- Python2：RN 里面有些腳本是使用 Python 寫的。
- JDK 1.8：Android 項目需要使用 JDK 1.8，請在電腦上安裝好。
- Android Studio：調(diào)試以及編譯安卓代碼需要使用到，請在安裝 Android Studio 之后安裝好 Android SDK 以及模擬器，在安裝好 IED 之后請下載好需要使用到的 Android SDK，下載 SDK 默認是鏈接國外服務(wù)器，會比較慢，最好把下載地址替換成國內(nèi)的幾個下載源。
- Xcode（僅 iOS 項目中）：安裝了 Xcode 才能使用 iOS 模擬器，有些和 Android 不一樣的效果可以單獨調(diào)試。
- Git：后面的項目會加入到 Git 中，使用 Git 做版本管理的好處不言而喻。Mac系統(tǒng)上安裝Xcode后自動也會安裝好Git。
- Watchman（僅 Mac 系統(tǒng)用到）：Watchman 用來監(jiān)聽文件變動等，Mac 下必須安裝 Watchman。
- WebStorm 或者 VSCode ： 這是主流的 RN 開發(fā)工具，本人采用 WebStorm，該軟件和 Android Studio 操作方式幾乎一樣，方便 Android 開發(fā)者無縫過度。
創(chuàng)建項目
執(zhí)行命令
react-native init TShop
可以初始化一個 RN 項目，項目名稱是 TShop ，這一步需要執(zhí)行一段時間，耐心等待。
下面指令分別是運行 Android 和 iOS 程序
react-native run-android
react-native run-ios
三、 熟悉項目
我們簡單熟悉下 RN 項目結(jié)構(gòu)
TShop
|-- android
|-- ios
|-- node_modules
|-- index.js
|-- App.js
|-- package.json
- android 和 ios 對應的就是原生代碼，分別可以通過 Android Studio 和 Xcode打開，目前里面自動生成一些初始化代碼，項目用到混合開發(fā)的時候會用到。
- node_modules 里面內(nèi)容非常多，這是我們項目依賴文件。
- package.json 是項目說明文件。里面可以看到
...
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.3"
},
...
這段代碼說明了當前項目的依賴。
- index.js 是程序的入口文件，里面引入了
App.js文件 ，并注冊程序。
import { AppRegistry } from 'react-native';
import App from './App'; // 引入了 App.js
// 注冊程序
AppRegistry.registerComponent('TShop', () => App);
- App.js 里面存放執(zhí)行的示例代碼。代碼片段1-1
// 導入React 和 RN 控件
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
// 根據(jù)不同的平臺加載不同的代碼
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
// ES6 語法
export default class App extends Component<Props> {
render() {
return ( // 渲染布局
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
// 樣式文件
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,
},
});
代碼片段 1-1
參考代碼片段1-1 ，App 就是當前程序展示的內(nèi)容。RN 使用 JSX 語法，其實就是對 JS 語法進行了擴展，內(nèi)置了一大堆標簽。
這里面的寫法有點類似于網(wǎng)頁寫法， render() 函數(shù)是用來渲染界面的，<View> 控件嵌套著三個<Text/> 控件，默認垂直排列，每個控件的樣式又來源于下面的 styles 常量，styles里的寫法類似于 CSS 。
我們修改下 render() 函數(shù)，讓里面顯示的內(nèi)容變化下，看看效果。
export default class App extends Component<Props> {
render() {
return ( // 渲染布局
<View style={styles.container}>
<Text style={styles.welcome}>
這是 React Native 基礎(chǔ)代碼
</Text>
</View>
);
}
}
// 樣式文件
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 30, // 字體大小
textAlign: 'center', // 文字居中對齊
color: 'red', // 字體顏色改成紅色
}
});
代碼片段1-2
我們只保留了一個 <Text>控件，文字顏色改成紅色。執(zhí)行react-native run-ios 或者 react-native run-android 運行程序。
如果已經(jīng)通過上面指令運行過一次，如果沒修過 Android 或 iOS 原生代碼，可以通過熱加載的方式直接更新程序：
- Android 模擬器雙擊 R，
- iOS 模擬器點擊 command + R即可。
調(diào)出模擬菜單方式：
- Android 模擬器 command/ctrl+ M
- iOS 模擬器 command+D
運行結(jié)果如圖所示：
布局檢查
在 Android 模擬器上運行可以打開 Android Studio 中自帶的布局檢查工具， Tools -> Layout Inspector 查看當前布局。 如下圖， 可以發(fā)現(xiàn) RN中定義的 Text 組件在 Android 中轉(zhuǎn)換成了 ReactTextView 控件，而這個控件繼續(xù) Android 中的 TextView。 可以證明 RN 把 JSX 轉(zhuǎn)換成了原生控件，提高了運行效率。
查看代碼
參考React Native電商項目實戰(zhàn)——開篇
示例代碼可在 GitHub 上獲取 https://github.com/yll2wcf/TShop
如果你已經(jīng)從 GitHub 上克隆了這個程序的 Git 倉庫，那么可以執(zhí)行 git checkout 1a 簽出程序的這個版本。 需要執(zhí)行 npm install 或 yarn install
大家關(guān)注我的公眾號—— 于連林 公眾號ID: likedev，回復RN 即可查看視頻地址。視頻每周都會更新，大家保持關(guān)注。
讀者討論群
對內(nèi)容，代碼有疑問的讀者，可以加入討論群：274328657 交流，加群務(wù)必備注：RN學習。
請大家關(guān)注我的簡書文集——React Native 電商項目實戰(zhàn) 教程都會在這里更新。
