React-native项目开发心得

React-Native的好丑就不多说了，有人说很好，有人说很多坑，自己去体会，不过向京东，微软，阿里等大公司都是在用RN的，至少目前Flutter不够成熟之前在我看来RN是比较不错的，

我就只说这一点相信有理由去学习RN了 RN可以实现三端互通，IOS，android，web，具体可以参考 JDReact SDK。互通的好处就不用多说了吧，三端的人开发一套代码，如果原来一个项目组的人员配备是android3个，ios3个，web2个，那有RN后相当于8个人一起开发维护一套代码，轻松加愉快！

那么重点来了，怎么快速开发RN项目

其实官网文档说的很清楚了，不过我这里总结一下自己的一些体验。

不论是在已有项目基础上开发RN项目还是全新开发一个RN项目，这个命令都是要用到的，在写这篇文章的时候RN0.56版本在window10系统和android上支持不太友好，建议用0.56之前的版本

react-native init MyApp --version 0.55.4

初始化一个项目之后就可以直接run了，那怎样算是run成功，自己看文档或者别的博客吧，这里说说怎么提升gradle版本和sdk支持，因为RN创建出来的项目gradle是2.2.3,compile sdk是23的，但是现在很多的开源框架或者第三方SDK都不适配这么低的版本

那怎么改到更高版本，并且编译不出错？如下图所示

其实改起来很简单，就直接在androidstudio里面找到对应的gradle文件修改就行，但是编译运行之后MainApplication和MainActivity继承的react native类会报红，虽然不影响运行，但是挺难看的，解决办法是打开RN项目下的android目录，删除.gradle和.idea缓存文件，再重新编译，那么一般不会报红了

然后说说RN项目集成第三方SDK，如果想友盟这些有react native集成文档的最好不过，直接按照文档集成就行，如果没有文档的，那按照android或者ios的集成文档去集成，然后代码中只需要增加两个类，RN和原生通信的办法就是写一个交互类，并且继承ReactContextBaseJavaModule，其中getName返回的字符串是给RN调用的原生类名称，用@ReactMethod注解的方法是给RN调用的原生方法。且看代码（例子是集成智齿智能客服平台SDK）

public class CustomerService extends ReactContextBaseJavaModule {

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

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

    @ReactMethod
    public void pushToCustomerService(String uid, String uname, String phone, String realname) {
        //智齿客服第三方接入
        Information info = new Information();
        info.setAppkey(BuildConfig.ZHICHI_APPKEY);
        info.setUid(uid);
        info.setUname(uname);
        info.setTel(phone);
        info.setRealname(realname);
        //返回时是否弹出满意度评价
        info.setShowSatisfaction(true);
        SobotApi.startSobotChat(MainApplication.getMyApplication(), info);
    }
}

public class CustomerReactPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

        List<NativeModule> modules = new ArrayList<>();
        modules.add(new CustomerService(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

最后在MainApplication中如下操作即可

然后在RN代码中怎么调用?且看代码

随便新建一个你喜欢的类，增加如下代码，（配合前面的代码理解），这代码的作用是RN和原生的连接器的作用，通过导出这个类，就可以调用之前写的原生方法和类

'use strict';
import {NativeModules} from 'react-native';

export default NativeModules.CustomerService;

调用方法，（随便写个点击事件，然后触发这个方法就可以测试一下，请结合前面原生代码理解）

CustomerUtil.pushToCustomerService('a', 'a', 'a', 'a');

React-native项目开发心得

猜你喜欢