React Native 初接触

发表于 | 分类于 | 阅读次数

最近公司在研究跨平台开发，期间接触了wex5，DCloud，还有React Native（以下简称RN）

三种工具的体会（以下谨为个人观点）

DCloud

需要懂得html，css,可以将做出来的h5打包到iOS模拟器和android模拟器，之前也写过一篇关于将项目跑到三端的文章（HBuilder初试，在iOS和android上安装我们的demo），使用简单，有提供了一套UI框架，不强制使用，想学h5跨平台开发还是比较推荐这个

wex5

开发工具是用eclipse改造而来，提供了android和iOS类似的可视化开发界面，支持拖拉控件布局，能够方便的设置属性，给我的感觉就是一个框架，一个别人封装好的框架，你可以使用可视化布局帮你完成div+css的转化，但是，对于我原本不是做网页前端的开发人员来说，我还是有点抵触的，毕竟你这个学完了，要是哪天出了个别的 xxxx 什么跨平台框架，又得重新学，还不如使用DCloud，从最基础的自己写起，也算学多一门技能

RN

给我的感觉是要写一套代码，然后复制两份，因为分为iOS和android，init工程之后，项目下也有index.ios.js和index.android.js两份，打开看，两份代码是一样的，但是iOS和android有一些控件还是不一样的，RN这样做的好处是为了当使用一些原生组件的时候更好的区分，当然我们也可以将代码写在同一份js文件里面，然后判断运行的平台执行不同的代码，不过这样可能会增加阅读难度

RN环境搭建

  1. Homebrew

    Homebrew 是 Mac 中的一个包管理器，没有安装的话，点击这里安装 我的版本如下:

    crw-2:HelloRN crw$ brew -v
    Home-brew 0.9.5

    版本过低将会导致无法安装后续几个组件。可用 brew update 升级。

  2. Node.js 和 npm

    Node.js 需要 4.0 及其以上版本。安装好之后， npm 也有了。

    • 通过 nvm 安装Node.js

      nvm 是Node.js 的版本管理器，可以轻松安装各个版本的 Node.js 版本。安装 nvm 可以通过 Homebrew 安装:

      brew install nvm

      或者 按照这里的方法 安装。

      然后安装 Node.js

      nvm install node && nvm alias default node

    • 也可以直接下载安装 Node.js： https://nodejs.org/en/download/

    安装好之后，如下：

    crw-2:HelloRN crw$ node -v
    v4.4.5
    crw-2:HelloRN crw$ npm -v
    2.15.5
    crw-2:HelloRN crw$

  3. 安装 watchman 和 flow

    这两个包分别是监控文件变化和类型检查的。安装如下:

    brew install watchman –HEAD
    brew install flow

    安装完成后，如果watchman版本号是4.0以上就可以了

    crw-2:HelloRN crw$ watchman -v
    4.6.0

RN安装

通过 npm 安装即可：

npm install -g react-native-cli

如果你看到EACCES: permission denied这样的权限报错

sudo npm install -g react-native-cli

APP 开发环境的设置

iOS

XCode 6.3 及其以上即可。

Android

这个比较麻烦。

  • 设置环境变量：ANDROID_HOME

    export ANDROID_HOME=/usr/local/opt/android-sdk

  • SDK Manager 安装以下包：

    Android SDK Build-tools version 23.0.1

    Android 6.0 (API 23)

    Android Support Repository

HelloRN

新建项目

react-native init HelloRN

创建新项目，react-native init HelloRN命令长时间无响应，或报错shasum check failed，由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：

npm config set registry https://registry.npm.taobao.org –global
npm config set disturl https://npm.taobao.org/dist –global

运行项目

  • iOS

    XCode 打开项目，点击运行就好。修改 index.ios.js, 在模拟器中 ⌘ + R重新载入 js 即可看到相应的变化，或者:

    react-native run-iso

    iOS 真机调试也简单，修改HTTP地址即可

    jsCodeLocation = [NSURL URLWithString:@”http://localhost:8081/index.ios.bundle“];

  • android

    • 模拟器
      按照官方文档，需要一个模拟器（Genymotion模拟器也可以）。但是不像 iOS，Android 开发平时更多是直接用真机进行开发和调试，如何运行部署到真机，下面会提到。
      运行命令

      react-native run-android

      然后就会部署到模拟器，修改index.android.js，调出模拟器菜单键，选择重新载入 js 即可看到变化。

    • 真机
      示例 APP 直接部署到真机，红色界面报错，无法连接到 Debug Server。
      如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。

      adb reverse tcp:8081 tcp:8081
      如果 5.0 以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting > Debug Server host for device，然后填入 Mac 的 IP 地址（ifconfig命令可查看本机 IP）

    • 在 Android Studio 中调试开发
      我们可能希望在 Android Studio 打开项目，然后编译部署到真机。
      这个时候，在命令行启动 Debug Server 即可：

      react-native start

支持Web

RN只支持iOS和android，他的口号是“Learn Once，Write AnyWhere”，而并不是我们所谓的”Write Once,Run AnyWhere”，不过我们可以使用react-web，让我们的RN支持Web

安装 React web

安装React web

npm install react-web-cli -g

配置 React web 等：

react-web init HelloRN

执行完成之后，会在你项目目录下面npm install 相关库，并自动创建web/webpack.config.js文件，里面有一份写好的配置。此时目录结构为：

├── README.md
├── android/
├── index.android.js
├── index.ios.js
├── ios/
├── package.json
└── web/
—└── webpack.config.js

React web 相关配置

每个项目都需要有一个入口文件，通常用来引入调用其他组件并初始化项目，比如index.ios.js 表示 iOS 平台上的该项目的入口文件。为了符合 React Native 的文件命名规范，我们创建一个 index.web.js 作为入口文件，并且需要在 webpack 中指定该文件为入口文件。打开 web/webpack.config.js 文件，修改 config 变量：

var config = {
  paths: {
    src: path.join(ROOT_PATH, '.'),
    index: path.join(ROOT_PATH, 'index.web'),
  },
};

然后我们创建 index.web.js 文件。这个文件其实跟index.ios.js 非常像，只是略有不同。主要区别在于：iOS 只需要 AppRegistry.registerComponent('HelloRN', () => HelloRN); 即可让 Xcode 的 Native 代码接收处理你的 JS 代码，而 Web 端是需要插入到 DOM 节点中才可以用。因此我们需要在index.web.js最下面添加如下代码：

AppRegistry.registerComponent('HelloRN', () => HelloRN);
if (Platform.OS == 'web') {
  var app = document.createElement('div');
  document.body.appendChild(app);
  AppRegistry.runApplication('HelloRN', {
    rootTag: app
  });
}

然后在最上面 require部分需要引入 Platform 组件。这样配置部分就已经处理完成了，执行 react-web start 命令即可启动调试服务器啦！

enter image description here