从v1迁移到react-native-navigation v2后的不变违例

问题描述 投票:2回答:1

在启动后从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

android typescript react-native react-native-navigation
1个回答
1
投票

我发现了错误。我使用了一种不推荐的方式来注册屏幕。我认为弃用意味着仍然有效。

Navigation.registerComponentWithRedux("app.Login", () => LoginController, store, provider); 应该是:

 Navigation.registerComponent("app.Login", () => (props) => (
        <Provider store={store}>
            <LoginController {...props} />
        </Provider>
    ), () => LoginController);

推荐问答