Мы пытаемся интегрировать новое приложение React Native в существующее собственное приложение для Android. Следуя официальным документам RN, нам удалось заставить их работать, но с некоторыми проблемами, касающимися навигации.
У нас есть собственные и не-родные (JS) экраны, и нам нужен хороший способ навигации между всеми экранами, независимо от того, является ли экран родным или нет.
Мы попытались адаптировать собственную навигационную и интерактивную навигацию, чтобы узнать, действительно ли работает какой-либо адрес нашей проблемы, но никто из них не работал.
В настоящее время мы зарегистрировали все наши экраны RN следующим образом:
const provide = (store, Screen) => {
return props => (
<Provider store={store}>
<Screen {...props} />
</Provider>
);
};
const store = configureStore();
AppRegistry.registerComponent('Home', () => provide(store, HomeComponent));
Мы также создали собственный модуль, который мы называем "Навигатор", который имеет метод навигации под названием 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 быть пустым.
Вот как выглядит наш метод onCreate для нашего класса ReactActivity.java:
@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);
}