使用react-native重构应用

源码github地址：https://github.com/zhengguorong/React-MoonMall

为什么要用react-native重构?

由于不确定的业务需求导致APP经常的调整，开发android和ios两个平台，成本较高，使用react-native的跨平台特性，可以解决该问题。同时利用react-native的热更新技术，用户不需要因为我们业务变动导致APP升级。

环境搭建

根据官方网站：https://facebook.github.io/react-native/说明，分为四个步骤。
安装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（注意：因为墙的关系，我们把npm仓库地址改为taobao的vi ~/.npmrc registry = https://registry.npm.taobao.org）
创建项目：react-native init React-MoonMall（等待时间较长，如果失败多尝试几次）
目录结构（common目录存放公共组件，index.ios.js为ios平台入口）

屏幕快照 2017-06-02 15.17.11.png

功能开发

1.引入页面使用的组件：

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TabBarIOS 
} from ‘react-native’;

2.创建moonMall的类class MoonMall extends Component
3.把创建的类绑定到APP。AppRegistry.registerComponent('MoonMall', () => MoonMall);
4.编写业务代码。

效果图

image.png

image.png