[[181099]]

2013 年 Facebook 開源了 React 框架，去年上半年開源了基于 React 的 React Native 框架 iOS 部分，下半年開源了 Android 部分。目前國內(nèi) QQ、天貓、攜程、QZone 等都有部分功能用 React Native 開發(fā)。

注：以下部分 React Native 以簡稱 RN 代替，Node 及 Node.js 均表示 Node.js。

限于篇幅，RN 的原理、 RN 與 Native 以及 Hybird 的優(yōu)劣對比、RN 的頁面跳轉(zhuǎn)及 Flexbox 等后面再分享，今天只介紹 RN 的基礎(chǔ)開發(fā)，讓大家能初步了解 RN 開發(fā)。

1. 介紹

React 的 GitHub 介紹是：

A declarative, efficient, and flexible JavaScript library for building user interfaces. 

簡單的說 React 就是一個 JS 庫，一個可用于編寫 UI 的庫。

React Native 的 GitHub 介紹是：

A framework for building native apps with React. 

React Native 基于 React，可用來開發(fā) iOS 和 Android 原生應(yīng)用。

2. React Hello World

上面是 React 示例，是一個簡單的 html 文件，其結(jié)果是顯示 Hello CodeKK。

內(nèi)容主要分為三部分：

***部分引入 React JS 文件，跟一般的 JS 文件引入無異。

第二部分是定義一個 HelloMessage 的組件，組件的渲染函數(shù) render 輸出一個 div，div 內(nèi)容接受一個名為 name 的變量。

第三部分是 ReactDOM 將 HelloMessage 組件渲染到 example 這個 DOM 節(jié)點(diǎn)(body 內(nèi)部的 div)中。

上面的第二、三部分是 JSX 語法，這是 Facebook 對 ECMAScript 的擴(kuò)展，即 JavaScript 語法擴(kuò)展，基于 XML 樣式。非必須，React 也可以直接調(diào)用原生 JS。

JSX 語法可以讓前端代碼可讀性更高，同時像 Java Web 的 Velocity 以及 Node 的 Jade 一樣支持?jǐn)?shù)據(jù)綁定。

通過 React 我們可以讓 UI 代碼基于組件化開發(fā)，可以更好的組合、復(fù)用，更方便進(jìn)行測試和維護(hù)。

同時 React 通過 Virtual DOM 提高性能，不直接操作 Real DOM，達(dá)到快速渲染的效果。

3. 新建 React Native Hello World

在完成必要軟件安裝后，命令行運(yùn)行

react-native init AwesomeProject 

新建工程，其中 AwesomeProject 為工程名，在工程目錄下運(yùn)行

react-native run-android 

或者

react-native run-ios 

分別打包為 Android 或 iOS 應(yīng)用，編譯部署到相應(yīng)模擬器上運(yùn)行。

4. React Native Hello World 工程簡介

4.1 RN 工程目錄

(1) android/ios 文件夾

用于存放 Android/iOS 平臺需要單獨(dú)適配的代碼。拿 Android 為例，android 文件夾內(nèi)部目錄結(jié)構(gòu)跟我們一般的 Android 工程一樣。

(2) index.android.js 和 index.ios.js 文件

分別為 Android 和 iOS 的啟動入口，可以簡單理解為 Java 的 Main 或者 Android 的 LAUNCHER & Main Activity。

React Native 可以通過將 .android 及 .ios 放在文件后綴前面作為 Android 及 iOS 的單獨(dú)適配文件。

如現(xiàn)在需要用到名為 codekk 的圖片，圖片目錄中有 codekk.png 和 codekk.android.png 兩個文件，則 iOS 平臺會打包 codekk.png，而 Android 平臺會打包 codekk.android.png 文件。

(3) package.json

跟 Node 工程類似，用于描述項(xiàng)目的基本信息以及需要的依賴信息，比如默認(rèn)依賴 React 和 React Native。

RN 也是通過 Node.js 的 npm 做依賴管理。

(4) node_modules 文件夾

自動生成的文件夾，存放 package.json 中配置的依賴的源碼以及 bin。

(5) 其他配置文件

.watchmanconfig 為 watchman 的配置文件，watchman 用于監(jiān)控文件變化，輔助實(shí)現(xiàn)工程修改所見即所得。

.flowconfig 為 flow 的配置文件，flow 用于代碼靜態(tài)檢查。

.buckconfig 為 buck 的配置文件，buck 是 Facebook 開源的高效編譯系統(tǒng)，對 Android iOS 同時適用，通過復(fù)用未修改的代碼單元、增量編譯等提高編譯效率。

4.2 index.android.js 內(nèi)容

index.android.js 和 index.ios.js 文件內(nèi)容默認(rèn)一樣，如下：

這是一個 js 文件，通過

react-native run-android 

命令運(yùn)行后，其在 Android 模擬器中運(yùn)行結(jié)果為：居中顯示 Welcome to React Native!。

文件內(nèi)容主要分為三部分：

(1) 引入需要的組件

比如需要 react 中的 Component，需要 react-native 中的 View，跟 Java 以及 C++ 開發(fā)類似。

(2) 定義新的組件

繼承 Component 定義新的組件，組件的 render 函數(shù)返回一個 View，View 內(nèi)包含一個 Text 控件。

styles 為樣式，跟 CSS 類似。

(3) 注冊組件

AppRegistry 是運(yùn)行 RN Apps 的 JS 切入點(diǎn)，App 的根組件需要通過 AppRegistry.registerComponent 注冊。

5. React Native 調(diào)試

(1) 即時運(yùn)行

通過 Debug 菜單開啟 Enable Hot Reloading 以及 Atom 編輯器的自動保存，可以達(dá)到修改代碼后自動部署到模擬器的效果。

Live Reload 與 Hot Reloading 類似，只是 Live Reload 之后會重新進(jìn)入 App 首頁，而 Hot 可以在當(dāng)前頁面直接刷新。

如果修改了 android 及 ios 文件夾下的內(nèi)容或者添加新的圖片等無法 Hot Reloading，需要重新運(yùn)行。

(2) 打日志

通過代碼中添加

console.log('response from codekk is :' + response); 
 
console.error('error is :' + error); 

打印日志。console.warn console.info 等表示其他級別日志。

iOS 日志會打印在 Xcode 中。

Android 需要通過 adb logcat *:S ReactNative:V ReactNativeJS:V 命令在 Terminal 輸出日志。

(3) 遠(yuǎn)程調(diào)試

可以跟 JS 或 Node.js 一樣在 Chrome Developer Tools 中調(diào)試 React Native，在上面 Debug 菜單中選中 Debug JS Remotely，默認(rèn)會打開 http://localhost:8081/debugger-ui 調(diào)試頁面，如下圖：

6. React Native 基礎(chǔ)組件

React Native 基礎(chǔ)通用組件包括 Text、Image、TextInput、ListView、View、WebView、Switch、Slider、ScrollView、MapView 等。

還有只適用于 Android 平臺的 DrawerLayoutAndroid、ProgressBarAndroid、ToolBarAndroid 等。

只適用于 iOS 平臺的 ProgressViewIOS、SegmentedControlIOS 等。

下面簡單以 Image、ListView 為例進(jìn)行介紹

（1） Image 組件

表示顯示本地圖片 codekk.png。

可以通過文件名后綴前加 @2x 和 @3x 表示不同分辨率圖片，如 codekk@2x.png、codekk@3x.png。

也可以直接顯示網(wǎng)絡(luò)圖片。

（2）ListView 組件

在 render 渲染函數(shù)中調(diào)用 ListView 控件，有兩個主要的屬性 dataSource 和 renderRow。

dataSource 表示數(shù)據(jù)源，為一個數(shù)組，在組件構(gòu)造函數(shù)中初始化。

renderRow 表示渲染每行時會調(diào)用的函數(shù)，入?yún)⑹?dataSource 中的一個數(shù)據(jù)，類似 Android 的 getView。

ListView 同樣支持分割線、Header 及固定的分塊 Header、Footer、滾動監(jiān)聽、到達(dá)底部監(jiān)聽等特性。

7. React Native 網(wǎng)絡(luò)

RN 支持 Fetch、WebSocket、XMLHttpRequest 三種請求方式，其中 Fetch 方式更為常用，以 Fetch 為例：

表示網(wǎng)絡(luò)獲取 http://api.codekk.com/op/page/1 的數(shù)據(jù)，并轉(zhuǎn)換為 JSON，然后輸出。

8. Android、iOS 代碼共用

在 4.1 RN 工程目錄 的介紹中，我們可以看到分別有 index.android.js 和 index.ios.js 文件，我們看下怎么讓 Android 和 iOS 實(shí)現(xiàn)簡單的代碼復(fù)用。

將 index.android.js 和 index.ios.js 文件全部改為如下內(nèi)容：

即讓 Android 和 iOS 都調(diào)用 index.js，在 index.js 中實(shí)現(xiàn)相同啟動邏輯。

index.js 內(nèi)容如下：

在 android、ios 文件夾同級目錄下新建 js 目錄存放共用代碼。

這樣 index.js 中示例除 ViewPagerAndroidDemo 和 DrawerLayoutDemo 只在 Android 下運(yùn)行有效果外，其他 Demo 都可以原封不動運(yùn)行在 iOS 中。

上面所有代碼都在 https://github.com/trinea/react-native-demo 中。

【本文是51CTO專欄作者Trinea的原創(chuàng)文章，轉(zhuǎn)載聯(lián)系作者本人獲取授權(quán)】

戳這里，看該作者更多好文