React Native 学习笔记

2016-04-14 11:03:20 +08:00
 birdgu

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

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

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

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

reduxreact-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 中调用支付宝、微信支付等支付应用的方法。

我的博客中的原文地址

3890 次点击
所在节点    JavaScript
12 条回复
wakiki
2016-04-14 12:13:21 +08:00
社区去年已经在吹 redux-saga 了
myoula
2016-04-14 13:25:34 +08:00
mark 一下
poke707
2016-04-14 13:31:50 +08:00
zymmm3
2016-04-14 13:33:55 +08:00
建议了解下 relay ,它会导致 reactive 模式变化。 rn 中调用支付宝只能跳到原生啊。
winnie2012
2016-04-14 13:52:51 +08:00
为什么不考虑 RubyMotion
winnie2012
2016-04-14 13:53:09 +08:00
123s
2016-04-14 15:08:54 +08:00
RN 打包成 apk 之后,还是 JS 负责调用原生组件去渲染?
感觉它的唯一进步只是调原生而已,这个速度如何优化才好。如果应用大型了,怎么保证解析速度
zymmm3
2016-04-14 15:32:04 +08:00
@123s 浏览器在手机中是重头,解析技术上不会落后的。
birdgu
2016-04-14 15:35:19 +08:00
@zymmm3 是的,要封装 Native Module
birdgu
2016-04-14 16:06:34 +08:00
@winnie2012 目前看好像 RubyMotion 的社区不如 React 啊。另外懂 javascript 的程序员还是比懂 ruby 的多很多。
del1214
2016-04-15 15:57:46 +08:00
@winnie2012 没记错 RubyMotion 是收费的
winnie2012
2016-04-15 16:39:16 +08:00
@del1214 现在有免费版的(限制仅仅是加一个启动画面)用来学习。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/270959

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX