反应导航容器

Question

我对本机作出反应还很陌生，我正在尝试将react-navigation与react-navigation-material-bottom-tabs结合使用以构建底部导航栏。但是在其中一个页面中，我有一个可触摸的不透明性，应该会导致另一个页面，因此我需要react-navigation createStackNavigator函数，但是我一直收到此错误。

Error: This navigator has both navigation and container props, so it is unclear if it should own its own state. Remove props: "rootTag" if the navigator should get its state from the navigation prop. If the navigator should maintain its own state, do not pass a navigation prop.

    This error is located at:
    in NavigationContainer (at createAppContainer.js:388)
    in NavigationContainer (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

这是我的App.js

import React, { Component } from "react";
import { AppRegistry, Text, View, StatusBar } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import { createStackNavigator, createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";

import Home from "./app/components/home.js";
import Announcements from "./app/components/announcements.js";
import Contact from "./app/components/contact.js";

import BackgroundImage from "./app/components/BackgroundImage.js";

class HomeScreen extends Component {
  render() {
    return (
      <BackgroundImage>
        <StatusBar hidden={true} />
        <Home />
      </BackgroundImage>
    );
  }
}

class AnnouncementScreen extends Component {
  render() {
    return (
      <Announcements>
        <StatusBar hidden={true} />
      </Announcements>
    );
  }
}

class MaterialScreen extends Component {
  render() {
    return (
      <View>
        <Text style={{ textAlign: "center", top: 200 }}>
          This is going to be the Materials Screen
        </Text>
      </View>
    );
  }
}

class ContactScreen extends Component {
  render() {
    return <Contact />;
  }
}

class AdminPage extends Component {
  render() {
    return <Text>Hi</Text>;
  }
}

const Admins = {
  Admin: {
    screen: AdminPage
  }
};

const ContactStack = createStackNavigator({
  Contact: {
    screen: ContactScreen
  },
  ...Admins
});

const AppNavigator = createMaterialBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        title: "Home",
        tabBarLabel: <Text style={{ color: "white" }}>Home</Text>,
        barStyle: { backgroundColor: "#281b39" },
        tabBarIcon: <Icon size={24} name="home" style={{ color: "white" }} />
      }
    },
    Announcement: {
      screen: AnnouncementScreen,
      navigationOptions: {
        title: "Announcement",
        tabBarLabel: <Text style={{ color: "white" }}>Announcements</Text>,
        barStyle: { backgroundColor: "#0e141d" },
        tabBarIcon: (
          <Icon size={24} name="bullhorn" style={{ color: "white" }} />
        )
      }
    },
    Material: {
      screen: MaterialScreen,
      navigationOptions: {
        title: "Materials",
        tabBarLabel: <Text style={{ color: "white" }}>Materials</Text>,
        barStyle: { backgroundColor: "#E64A19" },
        tabBarIcon: (
          <Icon size={24} name="calendar" style={{ color: "white" }} />
        )
      }
    },
    Contact: {
      screen: ContactStack,
      navigationOptions: {
        title: "Contact",
        tabBarLabel: <Text style={{ color: "white" }}>Contact</Text>,
        barStyle: { backgroundColor: "#524365" },
        tabBarIcon: (
          <Icon size={24} name="comments" style={{ color: "white" }} />
        )
      }
    }
  },

  {
    shifting: true,
    labeled: true
  }
);
export default createAppContainer(AppNavigator);