时间戳

首页 > 解决方案 > React Navigation version 3 falied to load page

react-native - React Navigation version 3 falied to load page

问题描述

I am using React Navigation 3.x and it failed to start the application. The error is below:-

This error is located at:
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:96)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:202)
    in Transitioner (at StackView.js:22)
    in StackView (at createNavigator.js:62)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
    in NavigationContainer (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

This error is located at:
    in NavigationContainer (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

My code goes here:-

Ap.js

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
});

    export default createAppContainer(AppNavigator);

Package.json file is here:-

{
  "name": "reactCrud",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.0-alpha.0",
    "react-native": "0.55.0",
    "react-native-gesture-handler": "^1.0.9",
    "react-navigation": "^3.0.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "4.0.1",
    "jest": "23.6.0",
    "react-test-renderer": "16.3.0-alpha.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

To install react navigation I used these steps:-

How to solve this kind of error? Thanks in advance.

标签： react-nativereact-navigation

解决方案

我对 React Navigation V3 有同样的问题，我使用 Babel 7 的问题@babel/plugin-proposal-class-properties所以我只是删除了所有不需要的插件我的 (.babelrc, babel.config.js) 如下所示：

{
  "presets": [
    "@babel/preset-flow",
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime"],
    ["@babel/plugin-transform-flow-strip-types"],
    ['@babel/plugin-proposal-decorators', { legacy: true }]
  ]


}

它工作正常。但是你只需要安装上面的 babel 插件并配置你的 babel 配置文件，希望它能解决你的问题

推荐阅读