行僧

参与开源,努力提升。 我的GitHub地址:https://github.com/playingjoker

React-Native

React Native Getting Started

本文背景:

公司领导建议统一前端技术栈, 经前端技术团队商议, 综合评定之后暂定首先尝试 React-Native(后简称 RN

). 官方文档 https://facebook.github.io/react-native
本文将介绍 RN, 一款由 Facebook

公司出品的用来构建移动应用的 JavaScript

框架. 在 RN

中利用现有 JavaScript

和 React

知识, 就可以开发和部署功能齐全的原生移动 APP

, 并且同时支持 iOS

和 Android

两个平台. 现有公司情况, 目前三个平台分为三部分独立开发, APP使用 native

方式开发, Web 为 node

环境开发, 目前 大象理财

的 Web 端站点有部分界面使用 React

开发, 外汇通和神州大象项目分别作出了不同尝试, 分别有 Vue.js

和 avalon2.js

, 开发人员也都熟悉组件开发方式, 切换 React

只需熟悉对应的语法即可.
React-Native 的思想是 Learn once, write anywhere, 总的来说并非我们写一套代码可以运行在各种终端, 而是说我们可以使用统一的语法来开发不同终端的程序, 但一些简单的基础组件还是可以做到通用, Native 端的组件也可以尽量保持 iOS 和 Android 终端统一, 具体设计细节会持续优化, 大家有好的建议可以随时联系各平台相关负责人.
Web: 刘朝宁 邮件 qq

开发人员接入流程

如遇到GFW请翻墙后再进行以下操作,否则可能无法保证操作成功。 开发人员需要在本地使用npm 私服

(注: 推荐使用最新地址)

老仓库有可能会在未来停止使用, 已经配置好的人员需最好修改至新的地址

预装环境

  • node.js or io.js
  • [npm] 镜像到开发仓库从公用仓库内下载需要的模块,maven, npm镜像在此地址http://nexus.td.internal/nexus
  • Mac 需安装 watchman 需安装 watchman 用于RN
  • Windows 需单独安装 Python2, Mac 默认已安装
  • jdk8+, (RN推荐Android 环境使用 jdk8, 服务端开发人员有统一 jdk8版本, 可同服务端一致)

修改并保存 .npmrc 文件至个人用户目录下 Mac 用户以及 Linux 用户 ~/.npmrc Windows 用户为 C:/Users/用户名/.npmrc

编辑本地.npmrc 配置文件```
vim ~/.npmrc


下文中的_auth 为 deployment:deployment 的 base64结果, 详情请参阅 [npm Security](http://books.sonatype.com/nexus-book/3.4/reference/npm.html#npm-security)```
registry=http://nexus.td.internal/nexus/repository/npm-public/
email=1119@forex.com.cn
always-auth=true
_auth=ZGVwbG95bWVudDpkZXBsb3ltZW50

Android 开发环境

Windows 环境下安装依赖, 需要安装 node, Python, jdk

推荐使用Chocolatey```
choco install nodejs.install
choco install python2
choco install jdk8


1.安装 Android Studio下载地址

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

2.安装 Android sdk

  • Google APIs
  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

3.配置ANDROID_HOME 到环境变量```
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools


export ANDROID_HOME=$HOME/Library/Android/sdk  
export PATH=$PATH:$ANDROID_HOME/tools  
export PATH=$PATH:$ANDROID_HOME/platform-tools

### iOS 开发环境

> Mac 环境下安装依赖, 需要安装 node, watchman
>
> 推荐使用[Homebrew](https://brew.sh/), 安装完成之后执行以下命令```
brew install node
brew install watchman

安装 React-Native

至此, 本地开发环境已完成, 可开始基于 node 开发环境开发RN应用了. 后面需要安装全局命令行react-native-cli, ```
npm install -g react-native-cli
react-native init AwesomeProject


注: 本例只是创建一个空的`RN`项目, 并非集成至现有项目

需集成至已有项目中, [详情参阅](https://facebook.github.io/react-native/docs/integration-with-existing-apps.html)

package.json 文件需增加以下配置```
    {
        ...
        "private": false,
        "publishConfig": {
            "registry": "http://nexus.td.internal/nexus/repository/npm-hosted/"
        },
        "scripts": {
            "start": "node node_modules/react-native/local-cli/cli.js start"
        }
        ...
    }

注: start 命令可根据实际情况修改

预备知识及约定

本文总体上不是介绍 React, 需开发人员自行了解 React 相关知识, 尤其应该熟悉 React 的状态(state)和属性(props)、如何基于 React 创建Component 以及 Cmp 的LifeCycle等相关知识.

同时, 建议使用 es6和 jsx 作为开发语言, 建议 Web 端开发人员使用 es6语法作为开发标准, 根据现有项目设计, *.js 作为支持普通 js 代码的开发逻辑, *.fjs(即 Forex JavaScript)作为 es6的开发逻辑, 如果需要使用 es6的语法, 则将文件后缀名修改为 fjs, 如需开发RN组件, 则需使用 jsx 作为后缀名.

关键概念

见表2

表2:

| | iOS | Swift | Android |
| - | —————— | —————— | ———————————– |
| 1 | 项目中设置RN依赖 | 项目中设置RN依赖 | 项目中设置RN依赖 |
| 2 | 配置 package.json 依赖 | 配置 package.json 依赖 | 配置 package.json 依赖 |
| 3 | 配置CocoaPods | 配置CocoaPods | 配置gradle及 maven 依赖, 配置 Android 所需权限 |
| 4 | 开始开发组件 | 开始开发组件 | 开始开发组件 |

RN渲染流程图

项目计划如下分布组织代码, 将前端项目从构建终端分为两大部分, web 端和 native 端, native 端再细分为 iOS 和 Android 两端, 开发源代码统一为 jsx 或者JavaScript 文件.

开发人员开发各个页面所需组件 Cmp1, Cmp2, Cmp3…n, 经过RN编译阶段输出为内存中的 virtualDom, native 端代码单独引入 react-native 模块, web 端则不需要. 此为基础设计, 也许有不完善的地方, 后续会和对应技术人员继续后续讨论.

{{plantuml}}
:JSX or JavaScript;
:render;
split
:Cmp1;
split again
:Cmp2;
split
:SubCmp1;
split again
:SubCmp2;
end split
split again
:Cmp3;
split again
:Cmpn…;
end split
:Virtual DOM;

split
:编译 RN 组件为 Native View
需单独引入 react-native;
split
:index.ios.js(x)?;
:iOS View\n 如 对应 UIImage;
split again
:index.android.js(x)?;
:Android View\n 如 对应 ImageView;
end split
:native UI;

split again
:index.{page}.js(x)?;

:Web Browser;
:Real DOM;

end split
:渲染界面;
{{/plantuml}}

ES6语法推荐

推荐使用 ES6语法进行开发, 如果对 ES6语法不熟悉, 需开发人员自行学习, RN 使用 Babel 编译器来负责转换我们的 JavaScript 和 jsx 代码.

常用语法简介

1.解构

es5规范代码:```
var obj = {a: 2, b: 3};
var a = obj.a,
b = obj.b;


我们可以使用 es6的简介解构赋值:```
var {a, b} = {a: 2, b: 3};

此用法可经常在 require 或 import 中见到. 如下:```
var ReactNative = require(‘react-native’);
var View = ReactNative.View;


使用解构语法会更加简介, 如下:```
var {View} = require('react-native');

或更推荐如下写法:```
import {View} from ‘react-native’;


#### 2.导入模块

一般情况下, 开发人员应使用 CommonJS 模块的语法导出组件以及导入其他组件模块, 如下:```
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class RNHighScores extends Component {
    render() {
        return (
            <View>
                <Text>Hello World!</Text>
            </View>
        );
    }
}

3.函数简写

es6的函数简写也很实用.在 es5中,我们一般编写 render 方法如下:```
render: function() {
return (Hello world!);
}


使用函数简写如下:```
render() {
    return (<Text>Hello world!</Text>);
}

4.箭头函数

在 es5中, 为了确保函数的Context( 即 this 指向), 我们通常需要使用 function 的 bind 函数, 如下:```
var callbackFund = function(val) {
    console.log(this.name);
}.bind(this);


否则, this 可能指向调用回调的对象.es6则更加简便, 如下:```
var callback = (val) => {
    console.log(this.name);
}

5.字符串插值表达式

过去实现字符串拼接```
var name = ‘张三’;
console.log(‘我的名字是:’+name);


在 es6中如下:```
var name = '张三';
console.log('我的名字是: ${name}');

总结

前期需要开发人员熟悉基础环境, 需各组调派人员合力开发基础 UI 组件, 或选取一个 UI 库, 但本公司内部需要使用的一些基础组件还是可以先开发出来并制定相应的开发规范

评论
validate