V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
birdgu
V2EX  ›  JavaScript

React Native 学习笔记

  •  1
     
  •   birdgu · 2016-04-14 11:03:20 +08:00 · 3882 次点击
    这是一个创建于 3145 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    我的博客中的原文地址

    12 条回复    2016-04-15 16:39:16 +08:00
    wakiki
        1
    wakiki  
       2016-04-14 12:13:21 +08:00
    社区去年已经在吹 redux-saga 了
    myoula
        2
    myoula  
       2016-04-14 13:25:34 +08:00
    mark 一下
    poke707
        3
    poke707  
       2016-04-14 13:31:50 +08:00
    zymmm3
        4
    zymmm3  
       2016-04-14 13:33:55 +08:00
    建议了解下 relay ,它会导致 reactive 模式变化。 rn 中调用支付宝只能跳到原生啊。
    winnie2012
        5
    winnie2012  
       2016-04-14 13:52:51 +08:00
    为什么不考虑 RubyMotion
    winnie2012
        6
    winnie2012  
       2016-04-14 13:53:09 +08:00
    123s
        7
    123s  
       2016-04-14 15:08:54 +08:00
    RN 打包成 apk 之后,还是 JS 负责调用原生组件去渲染?
    感觉它的唯一进步只是调原生而已,这个速度如何优化才好。如果应用大型了,怎么保证解析速度
    zymmm3
        8
    zymmm3  
       2016-04-14 15:32:04 +08:00
    @123s 浏览器在手机中是重头,解析技术上不会落后的。
    birdgu
        9
    birdgu  
    OP
       2016-04-14 15:35:19 +08:00
    @zymmm3 是的,要封装 Native Module
    birdgu
        10
    birdgu  
    OP
       2016-04-14 16:06:34 +08:00
    @winnie2012 目前看好像 RubyMotion 的社区不如 React 啊。另外懂 javascript 的程序员还是比懂 ruby 的多很多。
    del1214
        11
    del1214  
       2016-04-15 15:57:46 +08:00
    @winnie2012 没记错 RubyMotion 是收费的
    winnie2012
        12
    winnie2012  
       2016-04-15 16:39:16 +08:00
    @del1214 现在有免费版的(限制仅仅是加一个启动画面)用来学习。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2948 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 03:50 · PVG 11:50 · LAX 19:50 · JFK 22:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.