源碼github地址：https://github.com/zhengguorong/React-MoonMall
為什么要用react-native重構(gòu)?
由于不確定的業(yè)務(wù)需求導(dǎo)致APP經(jīng)常的調(diào)整肺魁，開發(fā)android和ios兩個(gè)平臺(tái)城丧，成本較高，使用react-native的跨平臺(tái)特性证杭，可以解決該問題沪袭。同時(shí)利用react-native的熱更新技術(shù)湾宙，用戶不需要因?yàn)槲覀儤I(yè)務(wù)變動(dòng)導(dǎo)致APP升級(jí)樟氢。
環(huán)境搭建
根據(jù)官方網(wǎng)站：https://facebook.github.io/react-native/說明，分為四個(gè)步驟侠鳄。
安裝Homebrew
安裝nodejs 4.0以上版本埠啃。nvm install node && nvm alias default node
安裝watchman伟恶。命令：brew install watchman
安裝flow框架碴开。命令：brew install flow
安裝react-native-cli博秫。命令：npm install -g react-native-cli（注意：因?yàn)閴Φ年P(guān)系，我們把npm倉(cāng)庫(kù)地址改為taobao的vi ~/.npmrc registry = https://registry.npm.taobao.org）
創(chuàng)建項(xiàng)目：react-native init React-MoonMall（等待時(shí)間較長(zhǎng)挡育，如果失敗多嘗試幾次）
目錄結(jié)構(gòu)（common目錄存放公共組件巴碗，index.ios.js為ios平臺(tái)入口）
功能開發(fā)
1.引入頁(yè)面使用的組件：
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TabBarIOS
} from ‘react-native’;
2.創(chuàng)建moonMall的類class MoonMall extends Component
3.把創(chuàng)建的類綁定到APP橡淆。AppRegistry.registerComponent('MoonMall', () => MoonMall);
4.編寫業(yè)務(wù)代碼。
效果圖
