美文网首页
初探React Native

初探React Native

作者: 五谷观精分道长 | 来源:发表于2017-03-24 23:21 被阅读143次

    前言

    作为移动开发爱好者,大部分时间我都在学习移动的原生 开发。对于最近(火了一年多,也不算最近)的兴起的混合开发稍作了解。

    开发环境搭建

    具体搭建过程详见[React Native 中文网]

    搭建过程中遇到的坑:

    1.关于安装react-native-cli过程的问题

    如果遇上翻墙问题,可以设置淘宝代理下载,网速非常稳定。

    2.真机测试白屏

    需要在权限中设置 该app的悬浮窗权限。

    3.无法链接测试

    需要在局域网内,开启

    react-native run-android
    

    然后先在浏览器里输入 局域网:8081 是否显示 已开启服务

    最后摇一摇手机进入设置界面,设置该局域网和端口号

    4.重载代码

    修改代码后,摇一摇手机即可进入选择。选择reload 即可加载修改的代码。

    5.用AS运行该项目

    将Android和js文件夹拷贝到新建的项目中,修改项目中app下的build.gradle的配置,统一为React-Native环境配置。将Application里的路径修改为自己的路径。
    使用Android studio中Terminal运行:react-native run-android。

    React Native 混合开发的思想

    参考文章
    RN最大的优势和吸引人的地方就是跨平台,也就是所谓的 learn once, run everywhere(这句话哪里听过了)。

    整体架构如下:

    04602301662556708a669ff6685f8978ce668b3d.jpg

    对于 Android 开发者来说, RN是一个普通的安卓程序加上一堆事件响应, 事件来源主要是JS的命令。主要有二个线程,UI main thread, JS thread。 UI thread创建一个APP的事件循环后,就挂在looper等待事件 , 事件驱动各自的对象执行命令。 JS thread 运行的脚本相当于底层数据采集器, 不断上传数据,转化成UI 事件, 通过bridge转发到UI thread, 从而改变真实的View。 后面再深一层发现, UI main thread 跟 JS thread更像是CS 模型,JS thread更像服务端, UI main thread是客户端, UI main thread 不断询问JS thread并且请求数据,如果数据有变,则更新UI界面。

    ReactNavite的开发流程

    1. 编写index.android.js即可开发android应用。同理index.ios.js就是开发ios的。两者代码有所不同但大部分代码可以复用。

    2. 一个简单的hello world

    import React, { Component } from 'react';
    import { AppRegistry, Text } from 'react-native';
    
    class HelloWorldApp extends Component {
      render() {
        return (
          <Text>Hello world!</Text>
        );
      }
    }
    // 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
    AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
    

    启动app
    摇一摇,reload 即可看见helloworld。

    结束语

    ReactNative 对于原生app开发者来说是一种全新的开发体验。无论是代码编写还是UI布局方式,这需要专门学习一种新的语言形式。
    跨平台看起来是一个很好的东西,但其实是一个大坑。对于前端来说,RN好像确实能够做到无敌。但至于他们吹的杀死原生应用,还需要冷静的考虑一下。


    我顺便搜索一下关于RN以及混合开发的职位,并不多。而且都是那种初创型的企业,为了节约成本。我居然看见一个招聘要求里需要一个人负责ios+网站+android+微信开发。
    RN虽好,且行且珍惜。



    接下来准备顺手撸一个RN的程序,作为和原生的比较体验。

    相关文章

      网友评论

          本文标题:初探React Native

          本文链接:https://www.haomeiwen.com/subject/nphqottx.html