基于公司某款APP對于頻繁的更新需求和對交互和性能上面的追求钻蹬，決定用react-native（以下簡稱rn）來替代原來在APP里面的H5頁面舰蟆，在這里對此次小項目做些回顧總結纱注，以及對rn的基礎知識點進行進一步了解咬崔。
1. 項目開發(fā)環(huán)境介紹：
- 開發(fā)設備: mac
- node: 8.9.4
- react: 16.3.1
- react-native: 0.51.0
- teaset: 0.5.6（rn UI框架）
- xcode 9.2
- Android Studio 3.0.1（以下簡稱as）
- Genymotion模擬器
- VirtualBox虛擬機 5.1.30
2. 準備工作
項目是基于rn官方腳手架搭建税稼，全局安裝rn腳手架
npm install react-native-cli -g
Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具，必須安裝
brew install watchman
3. 腳手架搭建項目模板
react-native init rnTemplate
默認的rn版本是0.55.3版本刁赦，這里需要做下更改
rn項目中對于版本的匹配要求比較嚴格娶聘，版本報紅的問題多
cd rnTemplate
rm -rf node_modules
package.json中 react-native 修改版本為0.51.0
npm install
4. 啟動項目
啟動項目的方式大致分為兩種，一是命令行甚脉，二是xcode或者as
這里先介紹命令行
命令行如下：
react-native run-ios // ios
react-native run-android // android
啟動ios:
react-native run-ios
當我們用命令行啟動ios的時候丸升，會用xcode啟動ios目錄下面的 xx.xcodeproj文件
項目啟動成功后如下：
啟動android之前，要先保證電腦開啟了安卓的模擬器或者用安卓真機成功連接了電腦并且開啟了調試模式牺氨，電腦信任狀態(tài)狡耻，而且安卓的要指定sdk，默認會去找環(huán)境變量里面猴凹，這里我在android根目錄下面直接新建了文件local.properties
添加如下：
ndk.dir=/Users/xiao/Library/Android/sdk/ndk-bundle
sdk.dir=/Users/xiao/Library/Android/sdk
啟動android:
react-native run-android
項目啟動成功后如下：
用命令行啟動時夷狰，無論是android或者是ios，都會另起一個命令行工具起啟動最終被原生APP使用的index.bundle文件郊霎，一般是：
localhost:8081/index.bundle?platform=ios(android)
5. 修改腳手架模板
修改模板前大致介紹下腳手架搭建的模板目錄結構
兩個文件夾android和ios沼头，對應原生安卓和ios
node_modules，項目依賴
.babelrc , babel配置文件书劝，用于轉換js
App.js进倍，項目模板入口，供入口index.js使用
index.js购对， 項目入口
package.json猾昆，依賴配置文件
接著我們根據(jù)開發(fā)實際情況改造目錄
主要改動點，在于新建的src文件夾下面骡苞，同時把模板入口移到了src開發(fā)目錄下面垂蜗，下面是src目錄介紹：
src，開發(fā)目錄
assets解幽，項目資源目錄贴见，存放css, imgs, js
components，存放我們的組件
views亚铁， 存放我們的視圖頁面
App.js蝇刀， 入口模板
6. UI框架進場
目前暫時選擇的是teasetUI框架傳送門
UI框架就不過多介紹了，直接使用
npm install --save teaset
在App.js入口模板中使用
// App.js
import React, {Component} from 'react';
import {
View
} from 'react-native';
import {TeaNavigator, Theme} from 'teaset';
import Index from './views/index'
Theme.set({fitIPhoneX: true});
export default class App extends Component {
render() {
return <TeaNavigator rootView={<Index/>}/>
}
}
上面設置了項目的主題色配置徘溢，可以根據(jù)項目自行調整
teaset在頁面跳轉上做了很好的封裝吞琐，上面我們引入了indx.js的頁面
// index.js
export default class Index extends NavigationPage {
renderPage() {
return (
<Text>index</Text>
)
}
}
index.js不再繼承Component捆探，而是teaset內置的NavigationPage頁面導航組件， 渲染函數(shù)也變成了renderPage
具體的文檔請參考上面的teaset傳送門站粟。
