此导航器缺少导航道具

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

我在Stack Overflow中看到的每个例子都使用了App组件是一个功能组件的情况,但我使用的是基于类的App组件,我正在追赶React Navigation的重大变化。

这是我在App.js文件中的代码:

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

import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";

export default class App extends React.Component {
  render() {
    const MainNavigator = createBottomTabNavigator({
      welcome: WelcomeScreen,
      auth: AuthScreen,
      main: {
        screen: createBottomTabNavigator({
          map: MapScreen,
          deck: DeckScreen,
          review: {
            screen: createStackNavigator({
              review: ReviewScreen,
              settings: SettingsScreen
            })
          }
        })
      }
    });
    return (
      <View style={styles.container}>
        <MainNavigator />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    justifyContent: "center"
  }
});

我正在很好地重构它然后它打破了这个我无法弄清楚的消息:

不变违规:此导航器缺少导航道具。在react-navigation 3中,您必须直接设置应用容器。

是的,我查看了有关AppContainer的React Native文档,我看到了这行代码

const AppContainer = createAppContainer(AppNavigator);

但我不确定如何重构地雷或不重构太多以使这一点正确。

当我尝试在我的文件底部添加这行代码export default createAppContainer(App);并且显然从export default前面移除class App...并从createAppContainer中取出react-navigation时,我收到一条错误消息:

TypeError:undefined不是对象

reactjs react-native
1个回答
0
投票

像这样设置createAppContainer

import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";
import { createBottomTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

const MainNavigator = createAppContainer(createBottomTabNavigator({  // set createAppContainer here
    welcome: WelcomeScreen,
    auth: AuthScreen,
    main: {
    screen: createBottomTabNavigator({
        map: MapScreen,
        deck: DeckScreen,
        review: {
        screen: createStackNavigator({
            review: ReviewScreen,
            settings: SettingsScreen
        })
        }
    })
    }
}));

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MainNavigator />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    justifyContent: "center"
  }
});
© www.soinside.com 2019 - 2024. All rights reserved.