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');