React Native 学习笔记

最近一直在研究 Android App 的架构，但是考察了 MVP ， MVVM 等框架以后，对于已经非常喜欢 Ruby ， RoR 的简洁风格我来说， Java 世界的繁琐、累赘还是让人爱不起来。

这时发现了 React 和 React Native 。（为什么去年对这些新技术那么迟钝呢？先自责一下。）

通过对 React Native 的初步考察和学习，准备在实际项目中使用 React Native ，主要考虑以下几个好处：

• 代码量大大减少。（我是个懒人）
• Android 和 iOS 的代码复用程度可以大大增加，而性能上比起嵌入 H5 的那些方案来要好很多。
• 调试方便，只要晃晃手机，点下“ Reload JS ”就可以了，省略了 build 的过程，编程-运行-调试的节奏大大加快。

除了 React Native 外，目前准备在项目中使用的 js 库包括：

redux 和 react-redux

管理 App 的所有状态（ state ）

redux-thunk redux-thunk 使得

redux 可以 dispatch 一个 function ，在这个 function 中完成需要的操作（访问后台 服务什么的。）

这个 Demo演示了 redux 和 redux-thunk 在 RN 应用中的使用。

但是在这个 Demoaction函数中返回一个包含type字段的 Object ，然后在 reducer 中再用 switch 根据 type 去做散列，这是 redux 的本来用法。总感觉 这不太对。使用了 redux-thunk 以后能不能简化 reducer 的写法呢？

redux-form

redux-form 可以用 App state 存放 form 中的数据，还可以在表单提交时完成数据验证。

iz

数据验证功能。主要用来对表单数据进行校验。

iz 和 redux-form 集成的示例：

const login_rules = {
    'login_name': [{ 'rule': 'required',
                     'error': '请输入登录名。'} 
    ]
};

function createValidator(rules) {
    return (data) => {
        const r = are(rules);
        return r.validFor(data) ? {} :
        r.getInvalidFields();
    };
}

let LoginFormContainer = reduxForm({form: 'login',
                                    fields: ['login_name', 'password'],
                                    validate: createValidator(login_rules)} )(LoginForm);

react-native-extended-stylesheet

在样式中使用变量、百分比、算数表达式等等。

几个待研究的问题

TODO 如何配置不同环境（开发和发布）中的服务器地址

之前在原生的 Android App 中是在 build 阶段根据 build type 将服务器地址写入 string resource:

  buildTypes {
    debug {
      resValue "string", "server_host", "测试服务器地址"
    }

    release {
      resValue "string", "server_host", "正式服务器地址"
    }
  }

然后在应用初始化时从资源表中读取即可。

目前尚未找到在 RN 中读取 android 资源的方法，而且在 iOS App 中显然不能这么做。目前另 一种考虑是写一个 NativeModule 提供给 RN 部分，负责提供 App 运行所需要的许多环境信息， 不限于 build 模式、服务器地址这些。

比如，我们的 App 运行中需要用到一些设备品牌、型号等信息， react-native-device-info 可以提供这些，但是提供不了 IMEI 号（ iOS 不需要），这也需要自己写 Native Module 来提供。

TODO 考察reactive-native-camera

TODO 研究在 RN 中调用支付宝、微信支付等支付应用的方法。

我的博客中的原文地址