在React Native Android中,首次加载界面时总是会经历一段较长的白屏等待时间.这种用户体验是很不好的,但官方尚未给出解决方案.
在网上看到解决该问题的方案,详情查看该文章地址.
讲的无非就是预加载,把JsBundle文件先加载到内存中.
只是在现在看来,该文章升级到0.29后,React Native结构稍微改变了一点,所以该段白屏优化的代码也得小改一下.
最后实现效果图:
React Native 版本: 0.30
本人所做的React Native项目是原生Android项目的一部分,所以需要从原生界面无感觉跳转到React Native页面
放出源码:
Step 1
新建RNCacheViewManager.java
public class RNCacheViewManager {
private static ReactRootView mRootView = null;
private static ReactInstanceManager mManager = null;
public static ReactRootView getmRootView() {
return mRootView;
}
protected static ReactNativeHost getReactNativeHost(Activity activity) {
return ((ReactApplication) activity.getApplication()).getReactNativeHost();
}
public static void init(Activity act){
if (mManager==null){
mManager=getReactNativeHost(act).getReactInstanceManager();
}
mRootView=new ReactRootView(act);
mRootView.startReactApplication(mManager, "LongZhuApp", null);
}
public static void onDestroy() {
try {
ViewParent parent = getmRootView().getParent();
if (parent != null)
((android.view.ViewGroup) parent).removeView(getmRootView());
} catch (Throwable e) {
e.printStackTrace();
}
}
}
Step 2
新建LReactActivity
public abstract class LReactActivity extends Activity implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {
private static final String REDBOX_PERMISSION_MESSAGE =
"Overlay permissions needs to be granted in order for react native apps to run in dev mode";
private @Nullable
PermissionListener mPermissionListener;
private @Nullable
ReactRootView mReactRootView;
private DoubleTapReloadRecognizer mDoubleTapReloadRecognizer;
private boolean mDoRefresh = false;
/**
* Returns the launchOptions which will be passed to the {@link ReactInstanceManager}
* when the application is started. By default, this will return null and an empty
* object will be passed to your top level component as its initial props.
* If your React Native application requires props set outside of JS, override
* this method to return the Android.os.Bundle of your desired initial props.
*/
protected @Nullable
Bundle getLaunchOptions() {
return null;
}
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
* e.g. "MoviesApp"
*/
protected abstract String getMainComponentName();
/**
* A subclass may override this method if it needs to use a custom {@link ReactRootView}.
*/
protected ReactRootView createRootView() {
return new ReactRootView(this);
}
/**
* Get the {@link ReactNativeHost} used by this app. By default, assumes {@link #getApplication()}
* is an instance of {@link ReactApplication} and calls
* {@link ReactApplication#getReactNativeHost()}. Override this method if your application class
* does not implement {@code ReactApplication} or you simply have a different mechanism for
* storing a {@code ReactNativeHost}, e.g. as a static field somewhere.
*/
protected ReactNativeHost getReactNativeHost() {
return ((ReactApplication) getApplication()).getReactNativeHost();
}
/**
* Get whether developer support should be enabled or not. By default this delegates to
* {@link ReactNativeHost#getUseDeveloperSupport()}. Override this method if your application
* class does not implement {@code ReactApplication} or you simply have a different logic for
* determining this (default just checks {@code BuildConfig}).
*/
protected boolean getUseDeveloperSupport() {
return false;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getUseDeveloperSupport() && Build.VERSION.SDK_INT >= 23) {
// Get permission to show redbox in dev builds.
if (!Settings.canDrawOverlays(this)) {
Intent serviceIntent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
startActivity(serviceIntent);
FLog.w(ReactConstants.TAG, REDBOX_PERMISSION_MESSAGE);
Toast.makeText(this, REDBOX_PERMISSION_MESSAGE, Toast.LENGTH_LONG).show();
}
}
mReactRootView=RNCacheViewManager.getmRootView();
ViewParent viewParent= mReactRootView.getParent();
if (viewParent!=null){
ViewGroup vp= (ViewGroup)viewParent;
vp.removeView(mReactRootView);
}
setContentView(mReactRootView);
mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
}
@Override
protected void onPause() {
super.onPause();
if (getReactNativeHost().hasInstance()) {
getReactNativeHost().getReactInstanceManager().onHostPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (getReactNativeHost().hasInstance()) {
getReactNativeHost().getReactInstanceManager().onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
mReactRootView = null;
RNCacheViewManager.onDestroy();
}
getReactNativeHost().clear();
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
if (getReactNativeHost().hasInstance()) {
getReactNativeHost().getReactInstanceManager()
.onActivityResult(requestCode, resultCode, data);
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (getReactNativeHost().hasInstance() && getUseDeveloperSupport()) {
if (keyCode == KeyEvent.KEYCODE_MENU) {
getReactNativeHost().getReactInstanceManager().showDevOptionsDialog();
return true;
}
if (mDoubleTapReloadRecognizer.didDoubleTapR(keyCode, getCurrentFocus())) {
getReactNativeHost().getReactInstanceManager().getDevSupportManager().handleReloadJS();
}
}
return super.onKeyUp(keyCode, event);
}
@Override
public void onBackPressed() {
if (getReactNativeHost().hasInstance()) {
getReactNativeHost().getReactInstanceManager().onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
public void onNewIntent(Intent intent) {
if (getReactNativeHost().hasInstance()) {
getReactNativeHost().getReactInstanceManager().onNewIntent(intent);
} else {
super.onNewIntent(intent);
}
}
@Override
public void requestPermissions(
String[] permissions,
int requestCode,
PermissionListener listener) {
mPermissionListener = listener;
// this.requestPermissions(permissions, requestCode);
}
@Override
public void onRequestPermissionsResult(
int requestCode,
String[] permissions,
int[] grantResults) {
if (mPermissionListener != null &&
mPermissionListener.onRequestPermissionsResult(requestCode, permissions, grantResults)) {
mPermissionListener = null;
}
}
}
Step 3
修改MainActivity的继承对象为LReactActivity
public class MainActivity extends LReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "LongZhuApp";
}
}
Step 4
在需要预加载的地方执行初始化操作
例如: 将要进入React Native Page的前一个页面
public class OneActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_one);
RNCacheViewManager.init(this);
}
public void onTest(View view){
Intent intent=new Intent(this,MainActivity.class);
intent.putExtra(Constants.CURRENT_PAGE,1);
startActivity(intent);
}
}
希望能帮助到一些小伙伴.....
参考文章
https://github.com/cnsnake11/blog/blob/master/ReactNative%E5%BC%80%E5%8F%91%E6%8C%87%E5%AF%BC/ReactNative%E5%AE%89%E5%8D%93%E9%A6%96%E5%B1%8F%E7%99%BD%E5%B1%8F%E4%BC%98%E5%8C%96.md