react-native android白屏优化
发布时间：2020-12-15 07:35:38 所属栏目：百科 来源：网络整理
导读：react native android集成优化（react 0.38） 一、概述 之前的文档介绍了怎么集成react native android基本集成，基本集成很简单，但是把它应用到项目中，并替代原生模块还是有不少坑的，这里主要介绍使用过程中需要解决的几个常见问题 相关API介绍 react和n
react native android集成优化（react 0.38）一、概述之前的文档介绍了怎么集成react native android基本集成，基本集成很简单，但是把它应用到项目中，并替代原生模块还是有不少坑的，这里主要介绍使用过程中需要解决的几个常见问题
二、API简单介绍
三、react和native交互不管是webview还是react，都经常需要JS与native模块进行交互。react和native交互使用NativeModule接口来实现，通常我们可以继承ReactContextBaseJavaModul类。在交互过程中难免涉及到JS传递参数给native，native返回结果给JS。JS属于弱类型语言 1.native主动向js传递事件，使用广播的形式public static void sendToJS(ReactContext reactContext,String eventName,@Nullable Object data) {
if (reactContext == null || TextUtils.isEmpty(eventName) || data == null)
return;
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName,data);
}
DeviceEventManagerModule继承自ReactContextBaseJavaModule，react native自己创建的一个module，名称是DeviceEventManager。它持有手机硬件相关的事件，如点击返回键，在JS中可以通过这个module监听这些事件。我们可以调用它来发送自己的事件，在JS中使用addListener方式监听事件。 2.Callback接口方式，写在方法最后一个参数里面首先创建一个类继承ReactContextBaseJavaModule，定义一个方法（和JS约定，随意取名）testCallback。 @ReactMethod
public void testCallback(String arg1,String arg2,Callback callback) {
WritableMap map = Arguments.createMap();
map.putBoolean("arg",true);
callback.invoke(map);
}
callback是react中定义的一个接口，接口中只有一个invoke方法，它接受一个可变参数，我们可以将结果通过invoke方式发送出去。这种方式是JS主动调用native方法。 3.Promise接口方式，写在方法最后一个参数里面@ReactMethod
public void testPromise(String arg1,Promise promise) {
try {
if (arg1.length() > arg2.length()) {
WritableMap map = Arguments.createMap();
map.putBoolean("arg",true);
promise.resolve(map);
} else {
promise.reject("1","false");
}
} catch (Exception e) {
promise.reject("1","false",e);
}
}
定义方式testPromise，方法最后一个参数是Promise接口，这个接口中定义了两类方法。如果执行成功调用resolve方法，接受一个参数，把成功结果返回；如果执行失败，调用reject方法返回，reject有多种重载，可以将返回码、返回消息和错误信息发送出去。这种方式也是JS主动调用native方法。 4.注册交互类使用ReactPackage接口来将我们的功能注册到ReactInstanceManager中，react和native交互也需要注册。
四、去除DeviceInfo依赖1.问题所在上篇文章说如果JS中要获取手机的一些配置信息还 需要添依赖： compile project(':react-native-device-info')
在setting.gradle中添加 include ':react-native-device-info'
project(':react-native-device-info').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-device-info/android')
这样的就生成了一个叫做react-native-device-info的module，我们项目的主module中就必须依赖这个新的library，这是个蛋疼事。 2.去除device info依赖其实这也属于react和native交互的一个功能，react需要读取设备相关信息。我们可以像处理BridgeReactPackage一样，创建一个RNDeviceInfo的ReactPackage，再注册到Manager中。
可以直接coyp它的源码。
四、白屏优化第一次进入react页面会加载JSBundle文件，加载过程比较缓慢，会造成白屏。造成白屏主要有两个原因：
1.优化加载JSBundle文件在ReactActivityDelegate的onCreate中会创建RootView并启动reactApplication，加载JSBundle文件，再把rooview中设置到activity中，我们可以将创建RootView中启动reactApplication提前，在进入ReactActivity时就不会加载JSBundle文件。
在prepareLoadApp方法中创建ReactRootView，并启动startReactApplication。
2.优化第一进入渲染UI完成以上步骤之后白屏时间明显减短，在没有杀掉进程的情况下基本可以达到和native一样的速度，但是第一次启动应用并进入ReactActivity还是会白屏，下面继续优化白屏。
将ReactRootView添加在上一个页面的ViewGroup中，必须保证RnCacheViewManager中已经完成预加载才行，完成这一步之后，基本可以达到秒启，当然，手速够快的情况下，在JSBundle文件还没加载完或者第一次UI还没渲染完进入ReactMainActivity还是可能出现白屏，这种也是可以控制的，方法很多，不多说。 五、热更新使用ReactNaitve一个很大的好处就是可以实现热更新，服务端下发JSBundle文件替换客户端的JSBundle文件实现热更新。发布release版本前我们将一份最新的JSBundle文件放在assets目录下，名称为index.android.bundle。如果服务端有更新，通过接口告诉我们，我们再拉取最新的JSBundle文件，把它放在内部存储中，在读取的时候，判断内部存储是否有JSBundle文件，如果有，就读取它，没有就读取assets中文件。 1.创建ReactFileUtils管理JSBunlde文件位置public class ReactFileUtils {
private static final String BUNDLE_FILE_NAME = "index.android.bundle";
private static final String BUNDLE_FILE_DIR = "RNHotUpdate";
private static final String BUNDLE_ASSETS_PREFIX = "assets://";
/**
* 获取存放ReactNative bundle文件夹存储路径，内部存储下的RNHotUpdate文件夹中，取不到返回""
* 路径为：/data/data/packagename/files/RNHotUpdate/，下载的JSBundle文件放在改文件夹中
*
* @param context
* @return
*/
public static String getRNHotUpdatePath(Context context) {
if (context == null)
return "";
File innerFileStorage = FileUtils.getFileDirectory(context);
if (innerFileStorage == null || TextUtils.isEmpty(innerFileStorage.getAbsolutePath()))
return "";
return innerFileStorage.getAbsolutePath() + File.separator + BUNDLE_FILE_DIR;
}
/**
* 获取存放ReactNative bundle文件的存储路径，/data/data/packagename/files/RNHotUpdate/index.android.bundle
* 由文件夹路径和文件名称组成，如果文件夹获取不到返回""
*
* @param context
* @return 下载的ReactNative bundle文件的存储路径
*/
public static String getExtraFileJSBundlePath(Context context) {
if (context == null)
return "";
String path = getRNHotUpdatePath(context);
if (TextUtils.isEmpty(path))
return "";
return path + File.separator + BUNDLE_FILE_NAME;
}
/**
* 获取默认ReactNative bundle文件存放路径，也就是assets下的文件
*
* @return assets://index.android.bundle
*/
public static final String getAssetsJSBundlePath() {
return BUNDLE_ASSETS_PREFIX + BUNDLE_FILE_NAME;
}
/**
* 获取JSBundleFile路径，先从内部存储中取，没有就从assets中取
*
* @param context
* @return JSBundleFile路径
*/
public static final String getJSBundlePath(Context context) {
if (context == null)
return getAssetsJSBundlePath();
String extraFilePath = getExtraFileJSBundlePath(context);
if (TextUtils.isEmpty(extraFilePath) || !FileUtils.isFileExists(extraFilePath))
return getAssetsJSBundlePath();
return extraFilePath;
}
}
2.重写ReactNativeHost的getJSBundleFile方法，配置JSBundle文件位置private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new RNDeviceInfo(),new BridgeReactPackage()
);
}
@Nullable
@Override
protected String getJSBundleFile() {
return ReactFileUtils.getJSBundlePath(CuliuApplication.this);
}
};
3.创建下载更新管理类RnUpdateManagerpublic class RnUpdateManager {
private static final String TAG = "RnUpdateManager";
/**
* 服务端文件地址（index.android.bundle和一些图片文件）
*/
private static final String JSBUNDLE_URL = "http://***.**.**.**:8081/index.android.bundle";
private Activity mContext;
public RnUpdateManager(Activity mContext) {
this.mContext = mContext;
}
public void downloadJSBundle(boolean onlyWifi,final String md5) {
final String downloadFile = ReactFileUtils.getExtraFileJSBundlePath(mContext);
APP.getInstance().getAppCache().setJSBundleLock(true);
Http.getInstance().asyncDownload(JSBUNDLE_URL,downloadFile,new DownLoadBroadcastReceiver.DownloadListener() {
@Override
public void onResopnse(final Context context,long downloadId) {
deleteJSBundle(context);
APP.getInstance().getAppCache().setJSBundleLock(false);
DebugLog.e(TAG,"onSuccessResopnse");
}
@Override
public void onErrorResponse(Context context,int reason,long downloadId) {
DebugLog.e(TAG,"onErrorResponse,reason-->" + reason);
APP.getInstance().getAppCache().setJSBundleLock(false);
}
});
}
private boolean checkFileMd5(String fileName,String md5) {
return true;
}
private boolean verifyPackage() {
return true;
}
public boolean isNewBundle() {
return true;
}
private void deleteJSBundle(Context context) {
try {
FileUtils.deleteDirectory(ReactFileUtils.getRNHotUpdatePath(context));
} catch (IOException e) {
e.printStackTrace();
}
}
}
这里只是简单的下载和删除操作，实际应用中还需考虑到文件的安全性、完整性和正确性，等多种问题 六、混淆配置
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |