學習就如同長跑，要想跑的遠，就不能跑得太快。
背景介紹
這段時間瞭解了一些前端方面的知識，並且用 React Native 寫了一個簡易新聞客戶端 Demo。
React Native 和原生開發各有所長，具體就不細說。混合使用能充分發揮各自長處，唯一的缺憾就是 React Native 和原生通訊過程相對不那麼友好。
在這裡分享一下學習過程中個人認為比較重要的知識點和學習資料，本文儘量寫得輕一些，希望對讀者能夠有所幫助。
預備知識
有些前端經驗的小夥伴學起 React Native 就像老馬識途，東西都差不多，變來變去也玩不出什麼花樣。
HTML5：H5 元素對比 React Native 元件，使用方式如出一轍。
CSS：React Native 的 FlexBox 用來為元件佈局的，和 CSS 親兄弟關係。
JavaScript：用 JavaScript 寫，能不瞭解一下嗎？ JavaScript 之於 React Native 就如同磚瓦之於摩天大樓。
React JSX：React 使用 JSX 來替代常規的 JavaScript。JSX 是一個看起來很像 XML 的 JavaScript 語法擴充套件。
一、開始學習 React Native
React Native 社群相對比較成熟，中文站的內容也比較全面，從入門到進階，環境安裝到使用指南，學習 React Native 推薦從官網 reactnative.cn 開始。FlexBox 佈局、元件、API 建議在該官網檢視，注意網頁頂部可以切換 React Native 的歷史版本。
1.1 安裝開發環境
- React Native 官網推薦搭建開發環境指南傳送門。(記得設定
App Transport Security Settings，允許 http 請求) - 已建立原生專案，將 React Native 整合到現有原生專案傳送門
- 基於第2點，React Native 與原生混編的情況下，React Native 與原生如何通訊傳送門
- 在 IDE 選擇這一點上，不要過多糾結，個人使用 WebStorm ，比較省心。
1.2 生命週期
class Clock extends React.Component {
// 建構函式 通常進行一些初始化操作 如定義 state 初始值
constructor(props) {
super(props);
}
// 元件已掛載
componentDidMount() {}
// 元件即將被解除安裝
componentWillUnmount() {}
// 渲染函式
render() {
return (
<View></View>
);
}
}
複製程式碼1.3 Props 與 State
一個元件所有的資料來自於 Props 與 State ，分佈是外部傳入的屬性和內部狀態。
Props 是父元件給子元件傳遞資料用的，Props 由外部傳入後無法改變，可以同時傳遞多個屬性。
// 父元件 傳遞一個屬性 name 給子元件
<Greeting name='xietao3' />
// 子元件使用父元件傳遞下來的屬性 name
<Text>Hello {this.props.name}!</Text>
複製程式碼State ：用來控制元件內部狀態，每次修改都會重新渲染元件。
// 初始化 state
constructor(props) {
super(props);
this.state = { showText: 'hello xietao3' };
}
// 使用 state
render() {
// 根據當前showText的值決定顯示內容
return (
<Text>{this.state.showText}</Text>
);
}
// 修改state，觸發 render 函式，重新渲染頁面
this.setState({showText: 'hello world'});
複製程式碼舉個例子(如果理解了就跳過吧)：
我們使用兩種資料來控制一個元件：props 和 state。 props 是在父元件中指定，而且一經指定，在被指定的元件的生命週期中則不再改變。 對於需要改變的資料，我們需要使用 state 。
一般來說，你需要在 constructor 中初始化 state ，然後在需要修改時呼叫setState方法。
假如我們需要製作一段不停閃爍的文字。文字內容本身在元件建立時就已經指定好了，所以文字內容應該是一個 prop 。而文字的顯示或隱藏的狀態（快速的顯隱切換就產生了閃爍的效果）則是隨著時間變化的，因此這一狀態應該寫到 state 中。
1.4 元件與 API
說到元件就不得不說 React Native 的元件化思想，尼古拉斯 · 趙四 曾經說過，組合由於繼承。簡單來說就是多級封裝巢狀、組合使用，提高基礎元件複用率。
元件怎麼用？
授人以魚不如授人以漁，點選這裡開啟官方文件 ，在左邊導航欄中找到你想使用的元件並且點選，裡面就有元件的使用方式和屬性的詳細介紹。
關於 API
建議寫第一個 Demo 之前把所有 API 瀏覽一遍，磨刀不誤砍柴工，不一定要會用，但一定要知道這些提供了哪些功能，後面開發中可能會用得上。API 列表同樣可以在官網左邊導航欄中找到。
二、助力 React Native 起飛
以下內容不建議在第一個 Demo 中使用：
2.1 Redux
Redux(中文教程、英文教程) 是 JavaScript 狀態容器，提供可預測化的狀態管理。
部分推薦教程：
2.2 CodePush
React Native 熱更新的發動機，接入的時候繞了很多圈圈，後面發現接入還挺方便的。CodePush 除了可以使用微軟提供的服務進行熱更新之外，還可以自建伺服器進行熱更新。
推薦教程：
三、 與原生端通訊
填坑：
- 原生端的 Manager 檔案如果有 RCT 字首，在 RN 中引用的時候不要加 RCT。
- 原生 UI 元件的 RCTBubblingEventBlock 型別屬性命名一定要以 on 開頭，例如 onChange。
3.2 在 React Native 中發訊息通知給原生端(由於RN呼叫原生端是非同步的，最好在回撥中通過通知把訊息傳遞到具體的類)
3.3 在原生端發訊息通知給 React Native (建議在Manager中寫一個類方法，這樣外部也可以靈活傳送通知)
這裡其實是有 Demo 的,但是還沒整理好?️。
四、React Native 進階資源
有時候一下子看到好多感興趣的東西，容易分散注意力，在未到達一定水平之前建議不要想太多，入門看官網就足夠了。當你掌握了那些知識之後，你就可以擴充一下你的知識庫了。
- awesome-react-native 19000+⭐️（包含熱門文章、資訊、第三方庫、工具、學習書籍視訊等）
- react-native-guide 11900+⭐️ （中文 react-native 學習資源、開 源App 和元件）
- js.coach （第三方庫搜尋平臺）
- 個人收集的一些開源專案（讀萬卷書不如行萬里路，行萬里路不如閱碼無數！經常看看別人的程式碼，總會有新收穫的）
五、React Native 第一個小 Demo
5.1 MonkeyNews 簡介
MonkeyNews，純 React Native 新聞客戶端，部分參考知乎日報，並且使用了其部分介面 由於是練手專案，僅供參考，這裡附上 GitHub 地址，感興趣的可以瞭解(star)一下。
5.2 用到的第三方庫：
- react-native-code-push：React Native 熱更新
- react-native-swiper：用於輪播圖
- react-navigation：TabBar + NavigationBar
5.3 專案結構
Common
MKSwiper.js
MKNewsListItem.js
MKImage.js
MKPlaceholderView.js
MKThemeListItem.js
MKLoadingView.js
...
Config
MKConstants.js
Pages
Home
MKHomePage.js
MKNewsDetailPage.jsCategory
MKCategoryPage.js
MKThemeDetailPage.jsUserCenter
MKUserCenterPage.js
Services
MKServices.js
APIConstants.js
Styles
commonStyles.js
六、總結
在對 React Native 有了一些瞭解之後，個人感覺目前 React Native 的狀況很難替代原生開發，至少現階段還不行。
個人認為的缺點：React Native 的雙端執行的優點並不明顯，很多原生 API 使用起來都比較麻煩，很大程度上抵消了雙端執行帶來的開發效率提升，這種情況下我甚至更願意用原生 iOS 和 Android 各寫一套。
優點：React Native 和原生組合使用，通過動態路由動態在原生頁面和 React Native 頁面之間切換，可以在原生頁面出現 bug 的時候切換至 React Native 頁面，或者比較簡單的頁面直接使用 React Native 開發都是非常不錯的。
總之， React Native 也是可以大有作為的。