[[181099]]

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

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

限于篇幅，RN 的原理、 RN 與 Native 以及 Hybird 的優劣對比、RN 的頁面跳轉及 Flexbox 等后面再分享，今天只介紹 RN 的基礎開發，讓大家能初步了解 RN 開發。

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，可用來開發 iOS 和 Android 原生應用。

2. React Hello World

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

內容主要分為三部分：

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

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

第三部分是 ReactDOM 將 HelloMessage 組件渲染到 example 這個 DOM 節點(body 內部的 div)中。

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

JSX 語法可以讓前端代碼可讀性更高，同時像 Java Web 的 Velocity 以及 Node 的 Jade 一樣支持數據綁定。

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

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

3. 新建 React Native Hello World

在完成必要軟件安裝后，命令行運行

react-native init AwesomeProject 

新建工程，其中 AwesomeProject 為工程名，在工程目錄下運行

react-native run-android 

或者

react-native run-ios 

分別打包為 Android 或 iOS 應用，編譯部署到相應模擬器上運行。

4. React Native Hello World 工程簡介

4.1 RN 工程目錄

(1) android/ios 文件夾

用于存放 Android/iOS 平臺需要單獨適配的代碼。拿 Android 為例，android 文件夾內部目錄結構跟我們一般的 Android 工程一樣。

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

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

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

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

(3) package.json

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

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

(4) node_modules 文件夾

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

(5) 其他配置文件

.watchmanconfig 為 watchman 的配置文件，watchman 用于監控文件變化，輔助實現工程修改所見即所得。

.flowconfig 為 flow 的配置文件，flow 用于代碼靜態檢查。

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

4.2 index.android.js 內容

index.android.js 和 index.ios.js 文件內容默認一樣，如下：

這是一個 js 文件，通過

react-native run-android 

命令運行后，其在 Android 模擬器中運行結果為：居中顯示 Welcome to React Native!。

文件內容主要分為三部分：

(1) 引入需要的組件

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

(2) 定義新的組件

繼承 Component 定義新的組件，組件的 render 函數返回一個 View，View 內包含一個 Text 控件。

styles 為樣式，跟 CSS 類似。

(3) 注冊組件

AppRegistry 是運行 RN Apps 的 JS 切入點，App 的根組件需要通過 AppRegistry.registerComponent 注冊。

5. React Native 調試

(1) 即時運行

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

Live Reload 與 Hot Reloading 類似，只是 Live Reload 之后會重新進入 App 首頁，而 Hot 可以在當前頁面直接刷新。

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

(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) 遠程調試

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

6. React Native 基礎組件

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

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

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

下面簡單以 Image、ListView 為例進行介紹

（1） Image 組件

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

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

也可以直接顯示網絡圖片。

（2）ListView 組件

在 render 渲染函數中調用 ListView 控件，有兩個主要的屬性 dataSource 和 renderRow。

dataSource 表示數據源，為一個數組，在組件構造函數中初始化。

renderRow 表示渲染每行時會調用的函數，入參是 dataSource 中的一個數據，類似 Android 的 getView。

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

7. React Native 網絡

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

表示網絡獲取 http://api.codekk.com/op/page/1 的數據，并轉換為 JSON，然后輸出。

8. Android、iOS 代碼共用

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

將 index.android.js 和 index.ios.js 文件全部改為如下內容：

即讓 Android 和 iOS 都調用 index.js，在 index.js 中實現相同啟動邏輯。

index.js 內容如下：

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

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

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

【本文是51CTO專欄作者Trinea的原創文章，轉載聯系作者本人獲取授權】

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