javascript - 与本机应用程序集成时,React-native 应用程序在每次导航时都会重新启动
问题描述
我们正在尝试将新的 React Native 应用程序集成到现有的原生 Android 应用程序中。按照 RN 官方文档,我们设法让它工作,但在导航方面存在一些问题。
我们有原生和非原生 (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”的 Native Module,它具有称为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);
}
解决方案
实际上,对于您的问题案例,您应该在 Gitlab 或 Github 上上传一小部分有此问题的项目,并将其链接放在这里,因此我们可以提供更好的帮助。
确实,我是一名开发人员JavaScript
,我无法在本地帮助任何人,但绝对可以,我相信您和您的同事为您的应用程序选择了错误的方式。React
React Native
React Native
是一个不稳定的JavaScript
项目,其本地代码不稳定,并且会随着时间发生变化,因此您应该只使用JavaScript
. 就像Sophie Albert在这篇文章中所说的那样,他们想要做出重大的突破性改变React Native
,所以,最好所有代码都用JavaScript
非原生(Java、Objective C)编写。
起初,我认为您的选择react-native-navigation
是错误的。为什么你不使用react-navigation
?
因为 99.7% 的react-navigation
基于JavaScript
Facebook 团队改变原生端,不影响你的项目,开发和调试非常容易。绝对,您可以使用每个趋势库,例如Redux
,因为您的项目基于JavaScript
.
我和我的同事正在为Sheypoor开发一个大型React Native
应用程序,除了启动屏幕之外,所有应用程序都基于我们的输入测试,我们甚至没有遇到崩溃、错误或意外重启。JavaScript
如果可能,请将您的导航回滚到我们选择的完整JavaScript
导航库。react-navigation
如果您上传了一个复制存储库,我可以比这种情况更好地帮助您。但我放了一些我们的代码结构来帮助你回滚到react-navigation
:
我们的index.js
项目:
import { AppRegistry } from 'react-native';
import App from './app/App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
我们应用的根文件,App.js
文件:
import React from 'react';
import { Provider } from 'react-redux';
import RootNavigation from './RootNavigation';
import { onNavigationStateChange } from './utils/routes';
import configureStore from './redux/configureStore';
const store = configureStore();
const App = () => (
<Provider store={store}>
<RootNavigation onNavigationStateChange={onNavigationStateChange} />
</Provider>
);
export default App;
该RootNavigation.js
文件,但不是现在用于我们之前的提交。由于它的复杂性,我不放较新的版本:
import { createSwitchNavigator } from 'react-navigation';
import { Loading, Dashboard, SignInStack, ListingManagement } from './screens';
const RootNavigation = createSwitchNavigator(
{
Loading,
SignInStack,
Dashboard,
ListingManagement
},
{
initialRouteName: 'SignInStack'
}
);
export default RootNavigation;
最后,早期版本的package.json
:
{
"name": "sheypoor",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"android": "npx react-native run-android",
"ios": "npx react-native run-ios",
"physical-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"test": "jest",
"eslint": "eslint .",
"clean": "react-native-clean-project",
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.js": [
"eslint --fix ."
]
},
"dependencies": {
"formik": "^1.3.0",
"lint-staged": "^7.3.0",
"prop-types": "^15.6.2",
"react": "16.5.0",
"react-native": "0.57.1",
"react-native-confirmation-code-field": "^1.2.2",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^2.16.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"yup": "^0.26.6"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"babel-jest": "23.6.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-root-import": "^6.1.0",
"eslint": "^5.5.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^3.0.1",
"eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-react-native": "^3.3.0",
"eslint-plugin-sort-imports-es6-autofix": "^0.3.0",
"flow-bin": "^0.78.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.45.6",
"prettier": "^1.14.3",
"react-native-clean-project": "^3.0.0",
"react-native-config": "^0.11.5",
"react-test-renderer": "16.5.0",
"redux-devtools-extension": "^2.13.5"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./app/assets/fonts"
]
}
}
使用这些代码和配置,我们甚至没有给出任何错误。
推荐阅读
- java - java模板中允许的参数类型
- spring-boot - 当远程应用程序被杀死时,Spring Boot 应用程序被杀死
- spring - Spring Security:为什么Spring只查找访问令牌的最后一个权限?
- android - 我应该把检查互联网连接的私有布尔值放在哪里?
- python - 如何在python代码中对文件第二列进行排序
- java - 如何使用 Selenium 和 Java 在 https://www.goibibo.com/hotels 上单击 SELECT ROOM 按钮
- riak - riak 错误:[ERROR] [Node] (172.16.1.56:8087|0|0) createConnection 中的健康检查失败
- android - 如何使用(智能参考)代理设计模式实现缓存机制?
- algorithm - 如何求解递归 T(n) = 4T(sqrt(n)) + sqrt(n)?
- c# - 'System.Linq.Expressions.ParameterExpression' 必须返回相同类型的非空值 - 在 EF API 调用上