React-Native 真的是移动开发的未来吗

thursday 发布于2019-08-22 18:20 / 1455人阅读

摘要：在版本上，安卓系统上的渲染就有锯齿，后来我们不分效果是使用图片实现的，汗啊第三方组件不全。摇一摇问题的解决在我们使用了等状态管理时，热更新不会更新这些代码，而频繁摇一摇实在是太累了。此时可以使用此时相当于虚拟了一个摇一摇事件。

公司本年度有App任务，陆陆续续用RN开发了两个应用。一款是涉及仪器控制的平板项目，另一款是客户端的App。下文谈谈使用RN开发的部分认知(其实只是随便扯一扯，没有什么深度)

我们适合使用RN吗？

其实能问出这个问题的我猜只有小公司了(比如我们)，因为大公司早已入坑，甚至已有公司出坑了(Airbnb)。

RN的优势

满足需求变更的快速发版。原生代码审核时间长，Hybird运行速度又不够快。

很多小公司想不招移动开发而开发App，节约成本。

跨平台，一份代码，稍微改动部分就可以运行在两个平台上。

业务类代码开发很快。

RN的弊端

坑多，这个坑在方方面面。RN在0.5x版本上，安卓系统上的border渲染就有锯齿，后来我们不分border效果是使用图片实现的，汗啊~

第三方组件不全。RN作为一个有影响力开源项目，有很多第三方组件，但是可以毫不客气的说，都不完美~ 无论是相机调用、音频播放还是消息处理，甚至路由组件。很多组件需要修改源码。因为这个组件依赖于RN0.4x，而另一个依赖于RN0.5x，这就特别尴尬。所以还是自己原生开发工程师提供接口，通过JS bridge调用比较好。

对前端来说，开发完整的App还是需要懂原生开发知识，对一般程序员来说Android开发用的Java还好，但是ios的开发语言OC简直是魔咒。当然我们可以面向百度和Google编程，不过这会浪费大量的时间且做出来并不完美。所以，公司想做App的话还是至少需要一个懂Android开发和懂IOS开发的工程师。

屏幕适配，虽然RN的尺寸是相对尺寸，且提供了获取屏幕密度等方法，但是具体到设备上，还是各有不同。不过相对轻松的是，我开发的平板项目只有一个尺寸，所以甚至可以使用定位来处理布局。

开发中的经验 配置完RN环境，以安卓为例

在使用react-native run-android之后，本质是将Java等初始化代码打成了一个包，后续开发和动态更新都是通过读取在通过命令启动的8081端口服务下的js bundle实现的，所以初次出现如下提示

Unable to load script from assets "index.android.bundle" ...

只需要摇一摇真机，在出现的dialog中设置Dev setting中的host、port再reload后就正常了

因Android版本问题导致的无法安装

我是首次是通过Android 6.0开发，后来打算使用Android 5.1进行测试。错误信息如下

com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to install all

出现这种情况，网上很多说是通过修改gradle来进行修改，但是通常开发android程序时，需要测试不同的设备。可以直接使用adb命令进行安装

adb install android/app/build/outputs/apk/app-debug.apk

缓存问题

特别是在使用了babel-resolver之后---，错误信息如下

unable to resolve module ***

解决方式：
react-native start --reset-cache

JSX注释语法

在使用command + /添加注释后，经常出现错误：

Cannot add a child node that doesn"t have a YogaNode to a parent without measure function

解决方式当然是检查自己的JSX代码是否注释写的不对。

摇一摇问题的解决(Android)

在我们使用了Mobx Redux等状态管理时，热更新不会更新这些代码，而频繁摇一摇实在是太累了。此时可以使用

adb shell input keyevent 82

此时相当于虚拟了一个摇一摇事件。

远程调试(root设备)

当我们的开发环境可能有多种设备且不方便插USB得话，可以进行Adb远程调试。方法如下：

1. 安卓端：首先安装安卓终端模拟器
su
setprop service.adb.tcp.port 5555
stop adbd
start adbd
2. 开发端：
adb connect ANDROID_HOST
adb install ***.apk
需要唤出设置页面的话，用上面的摇一摇问题的解决方案

JS调用Android代码

以通过js获取原生Android序列号为例，此处代码会比官方文档全。其他的可以参考官方文档

在与android的MainActivity同级目录下新建一个SerialNumberModule.java文件，内容如下：

public class SerialNumberModule extends ReactContextBaseJavaModule{

    @Override
    public String getName() {
        return "SerialNumber";
    }

    public SerialNumberModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @ReactMethod
    public void getSerialNumber (Callback successCallback, Callback errorCallback) {
        String SerialNumber = android.os.Build.SERIAL;
        try {
            successCallback.invoke(SerialNumber);
        } catch (IllegalViewOperationException e) {
            errorCallback.invoke(e.getMessage());
        }
    }
}

在新建一个SerialNumberPackage.java文件，用来添加模块，代码如下：

public class SerialNumberPackage implements ReactPackage {
    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List createNativeModules(
            ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();

        modules.add(new SerialNumberModule(reactContext));

        return modules;
    }
}

在本目录的MainApplication.java中重写的getPackages中new此模块，代码：

@Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
                new SerialNumberPackage()
      );
    }

js端调用，以rn的入口App.js为例

import { NativeModules } from "react-native"
*******
在组件内：
componentWillMount () {
    NativeModules.SerialNumber.getSerialNumber(success => {
      console.log("success", success)
    }, err => {
      console.log("err", err)
    })
}

发行IOS包

可以在项目根目录下执行

1. react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
2. 修改AppDelegate.m文件，将
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
注释掉，并添加
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];
3. 将打好的文件在ios目录下的bundle目录里的两个文件和一个文件夹拖拽到Xcode的项目相应名字的目录下
4. 插上真机，在Xcode的目标上选择真机，点击Xcode标题栏的product --> archive即可

先上结论，个人认为这种开发模式迟早会结束，第三方强行兼容设备总是不行的。类比黑莓兼容Android。个人还是信WEB, 信W3C。踩坑还在进行，上述只是一点开发经验。大神轻喷，同行人欢迎一起讨论。

GPU云服务器云服务器广告联盟是真的吗中国物联网是真的吗 uu492是真的吗大数据云定位是真的吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95759.html

写给想做前端的你

摘要：不过细想想，我邮只有前端的选修课啥的，课程也不是那么就业导向。至少目前，很少有大公司完全把作为前后端通用的技术栈。不能把简单看做是在服务端的延展。编译这个思想在前端领域很重要不改变现有的语言环境同时进行最佳的工程实践。 P.S. 喷神请绕道，大神勿喷，不引战，不攻击，不钻牛角尖。大二时第一次接触前端。许多同学估计都想过要做一个网站，大部分又是从PHP开始的（谁让它是世界上最好的语言呢...

JerryWangSAP 2019-08-21 13:49 评论0 收藏0
论一个前端工程师如何快速学习，成长。准备自己的35岁【-原创精读】

showImg(https://segmentfault.com/img/bVbw3tK?w=1240&h=827); 前端工程师这个岗位，真的是反人性的我们来思考一个问题：一个6年左右经验的前端工程师：前面两年在用jQuery 期间一直在用React-native（一步一步踩坑过来的那种）最近两年还在写微信小程序下面一个2年经验的前端工程师：并不会跨平台技术，他的两年工作都是Reac...

RdouTyping 2019-08-30 15:44 评论0 收藏0
Flutter 会不会被苹果限制其发展_，移动智能终端开发报告

摘要：到如今都没有官方支持热更新，这大概也是为了应用不受苹果审核条款的忌惮，一旦支持了热更新，那在过审核的时候可能就会没那么容易了，所以热更新对于在平台的存亡是一个重要因素。再说风险1、和 react-native 、weex 、uni-app 、taro 等平台不同，flutter framework 的大部分控...

不知名网友 2021-11-25 09:43 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

kun_jian 2019-08-02 15:28 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

J4ck_Chan 2019-08-23 18:32 评论0 收藏0