Question

我在Stack Overflow中看到的每个示例都使用App组件是功能组件的情况，但是我使用的是基于类的App组件，并且我在追赶打破React导航的变化。

这是我在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：未定义不是对象

Answer 1

像这样设置您的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"
  }
});

该导航器缺少导航道具

1 个答案: