【发布时间】:2019-02-28 22:38:54
【问题描述】:
我们正在尝试将新的 React Native 应用程序集成到现有的原生 Android 应用程序中。遵循 RN 官方 docs 我们设法让它工作,但在导航方面存在一些问题。
我们有原生和非原生 (JS) 屏幕,我们需要一种在所有屏幕之间导航的好方法,无论屏幕是否为原生。
我们尝试采用native-navigation 和react-native-navigation 来看看是否有任何解决我们的问题,但它们都没有真正起作用。
目前,我们已经像这样注册了所有 RN 屏幕:
const provide = (store, Screen) => {
return props => (
<Provider store={store}>
<Screen {...props} />
</Provider>
);
};
const store = configureStore();
AppRegistry.registerComponent('Home', () => provide(store, HomeComponent));
我们还创建了一个名为“Navigator”的本机模块,该模块具有名为openComponent 的导航方法,该方法接受屏幕名称及其道具。以下是openComponent 的实现方式:
// our native module code ...
@ReactMethod
public void openComponent(String name, String extra) {
try {
Intent intent = new Intent(this.getReactApplicationContext(), MyReactActivity.class);
intent.putExtra("moduleName", name);
intent.putExtra("extra", extra);
getCurrentActivity().startActivityForResult(intent, 0);
}
catch (Exception e) {
e.printStackTrace();
Crashlytics.logException(e.getCause());
}
}
然后,每当我们想在 RN 端导航时,我们只需使用目标屏幕道具调用我们的自定义导航器。
当前方法的问题是,每当我们导航到基于 RN 的屏幕时,RN 部分都会重新启动,这会导致 Redux 存储为空。
下面是我们的 ReactActivity.java 类的“onCreate”方法的样子:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Bundle initialProperties = new Bundle();
initialProperties.putString("loginToken", HJSession.getSession().getSessionId());
initialProperties.putString("username", HJSession.getSession().getUserName());
initialProperties.putString("userId", HJSession.getSession().getUserId().toString());
String moduleName = "topics";
Bundle bundle = getIntent().getExtras();
if (bundle != null) {
moduleName = bundle.getString("moduleName");
try {
String extra = bundle.getString("extra");
initialProperties.putString("extra", extra);
}
catch (Exception e) {
e.printStackTrace();
Crashlytics.logException(e.getCause());
}
}
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setJSMainModulePath("index")
.addPackages(Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNFirebasePackage(),
new RNFirebaseMessagingPackage(),
new RNFirebaseNotificationsPackage(),
new RNI18nPackage(),
new VectorIconsPackage(),
new HJRNPackages(),
new NativeNavigationPackage()
))
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, moduleName, initialProperties);
setContentView(mReactRootView);
}
【问题讨论】:
-
当你从 Native 到 React 时,你正在经历 Redux 的变化,对吧?还是在 React Navigation 中?如果您要从 N 更改为 RN,那么您不应该在本地保留您的 Redux 状态吗?我只是要求澄清。
-
@AshwinMothilal 好吧,在我们的例子中,不适合在每次导航时都在本地(在硬盘上)保存我们的状态。但是RN部分无论如何都不应该重新启动,对吧?
-
你还没有回答这部分,当你从 Native 到 React 时,你正在经历 Redux 的变化,对吧?还是在 React Navigation 中?
-
是的,当我们从 Native 转到 React 以及从 React 到另一个 React 屏幕时,我们会遇到重新加载,因为我们使用的是上面原始问题中提到的相同“openComponent”函数,谢谢
-
我希望您在
gitlab或github上为您的问题上传一个复制存储库
标签: javascript android react-native react-native-android react-native-navigation