在启动后从v1迁移到v2后，我在Android上遇到了不可侵犯的违规行为。我该如何解决？
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `ReduxWrapper`.
This error is located at:
in ReduxWrapper (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)
createFiberFromTypeAndProps
createFiberFromElement
reconcileSingleElement
TouchableNativeFeedback.android.js:257:31
reconcileChildFibers
reconcileChildren
VirtualizedList.js:911:10
finishClassComponent
VirtualizedList.js:439:28
updateClassComponent
VirtualizedList.js:1404:41
performUnitOfWork
workLoop
NativeModules.js:32:36
renderRoot
NativeModules.js:98:6
performWorkOnRoot
MessageQueue.js:312:11
performWork
performSyncWork
requestWork
scheduleWork
defineLazyObjectProperty.js:35:19
scheduleRootUpdate
deepFreezeAndThrowOnMutationInDev.js:59:4
render
renderApplication
run
runApplication
__callFunction
SharedElement.js:20:28
<unknown>
LayoutTreeCrawler.js:4:21
__guard
callFunctionReturnFlushedQueue
callFunctionReturnFlushedQueue
[native code]
我已经尝试隔离问题并检查我是否采取了正确的迁移步骤，但我无法弄清楚问题。
import {Provider} from "react-redux";
import {Navigation} from "react-native-navigation";
import {registerScreens} from "./screens";
import configureStore from "./store/configureStore";
export const store = configureStore();
registerScreens(store, Provider);
Navigation.events().registerAppLaunchedListener(() => {
initApp().then(() => {
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: "app.Login"
}
}],
options: {
topBar: {
title: {
text: ""
}
}
}
}
}
}).catch(function (reason) {
console.error("Screen creation failed", reason);
}); }
);
});
async function initApp() {
...
}
这是index.android.ts文件。
import {Navigation} from "react-native-navigation";
import LoginController from "./modules/controller/LoginController";
export function registerScreens(store: any, provider: any) {
Navigation.registerComponentWithRedux("app.Login", () => LoginController, store, provider);
}
这是screens.ts文件。
...
"dependencies": {
"@react-native-community/async-storage": "^1.2.4",
"@react-native-community/netinfo": "^2.0.0",
"abortcontroller-polyfill": "^1.1.9",
"babel-plugin-transform-remove-console": "^6.9.4",
"crypto-js": "^3.1.9-1",
"dateformat": "latest",
"immutable": "latest",
"moment-timezone": "^0.5.21",
"node-fetch": "^2.1.2",
"react": "16.8.3",
"react-native": "0.59.1",
"react-native-android-location-services-dialog-box": "^2.8.0",
"react-native-background-timer": "^2.1.1",
"react-native-check-box": "^2.1.0",
"react-native-cli": "^2.0.1",
"react-native-device-info": "^0.25.1",
"react-native-elements": "^0.19.1",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native-mail": "^3.0.6",
"react-native-material-textfield": "^0.12.0",
"react-native-navigation": "^2.18.3",
"react-native-permissions": "^1.1.1",
"react-native-settings-list": "^1.8.0",
"react-native-swipe-list-view": "^1.5.1",
"react-native-swipeable": "^0.6.0",
"react-native-textinput-effects": "^0.5.1",
"react-native-vector-icons": "^6.2.0",
"react-native-version-check": "^3.0.3",
"react-redux": "^5.1.1",
"redux": "^4.0.1",
"redux-immutable-state-invariant": "^2.1.0",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",
"remote-redux-devtools": "^0.5.16",
"rn-placeholder": "^1.3.3"
},
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/plugin-proposal-decorators": "^7.4.0",
"@babel/plugin-transform-object-assign": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@babel/runtime": "7.4.3",
"@types/chai": "^4.1.7",
"@types/enzyme": "^3.1.12",
"@types/enzyme-adapter-react-16": "^1.0.2",
"@types/enzyme-redux": "^0.2.2",
"@types/jest": "^23.3.0",
"@types/json-schema": "^7.0.1",
"@types/moment-timezone": "^0.5.12",
"@types/react": "^16.4.6",
"@types/react-native": "^0.57.29",
"@types/react-native-background-timer": "^2.0.0",
"@types/react-native-material-textfield": "^0.12.3",
"@types/react-native-navigation": "^1.1.12",
"@types/react-native-settings-list": "^1.8.1",
"@types/react-native-vector-icons": "^6.4.0",
"@types/react-redux": "^7.0.0",
"@types/react-test-renderer": "^16.0.1",
"@types/redux-test-utils": "^0.2.0",
"babel-jest": "^24.7.1",
"babel-preset-react-native-stage-0": "^2.0.0-alpha.1",
"babel-runtime": "^7.0.0-beta",
"chai": "^4.1.2",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"enzyme-redux": "^0.2.1",
"jest": "24.7.1",
"jest-spec-reporter": "^1.0.5",
"jsdom": "^14.0.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-dom": "^16.8.5",
"react-native-mock": "^0.3.1",
"react-native-typescript-transformer": "^1.2.12",
"react-test-renderer": "^16.8.3",
"redux-test-utils": "^0.3.0",
"ts-jest": "^24.0.1",
"tslint": "^5.10.0",
"typescript": "^3.4.1",
"typescript-babel-jest": "^1.0.6"
},
...
来自package.json的依赖项。
我按照迁移指南进行操作，并期望它能够正常工作
https://wix.github.io/react-native-navigation/#/docs/top-level-api-migration
我发现了错误。我使用了一种不推荐的方式来注册屏幕。我认为弃用意味着仍然有效。
Navigation.registerComponentWithRedux("app.Login", () => LoginController, store, provider);
应该是：
Navigation.registerComponent("app.Login", () => (props) => (
<Provider store={store}>
<LoginController {...props} />
</Provider>
), () => LoginController);