Add Custom createMaterialTopTabNavigator to component?

问题

I have an issue with createMaterialTopTabNavigator, I'm already declaring an AppContainer in my Route.js File,

the error goes away if create a separate AppContainer for a TobTab in a screen I want to add these Tob Tabs in like this

 const Root = createAppContainer(NavTabs);

so I made a specific file contained a Tabs "NavTabs.js"

import { createMaterialTopTabNavigator } from "react-navigation";
import AboutScreen from "./About";
import GalaryScreen from "./Galary";
import ReviewsScreen from "./Reviews";

const NavTabs = createMaterialTopTabNavigator(
  {
    About: { screen: AboutScreen },
    Galaty: { screen: GalaryScreen },
    Reviews: { screen: ReviewsScreen }
  },
  {
    tabBarOptions: {
      activeTintColor: "#fff",
      inactiveTintColor: "#ddd",
      tabStyle: {
        justifyContent: "center"
      },
      indicatorStyle: {
        backgroundColor: "#fcc11e"
      },
      style: {
        backgroundColor: "#347ed8"
      }
    }
  }
);

export default NavTabs;

and in the File navigations "Route.js" I put it in the StackNavigator like this and here the full File

const HomeStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: ({ navigation }) => ({
      title: "Home",
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerRight: (
        <TouchableOpacity
          onPress={() => navigation.navigate("Notifications")}
          style={{ margin: 10 }}
        >
          <Icon name="ios-notifications" size={28} color="#1DA1F2" />
        </TouchableOpacity>
      ),
      headerStyle: {
        backgroundColor: "#fff",
        shadowOpacity: 0,
        elevation: 1,
        marginBottom: 20
      },
      headerTintColor: "#14171a",
      headerTitleStyle: {
        flex: 1,
        fontSize: 25,
        justifyContent: "center"
      }
    })
  },
  MapScreen: {
    screen: MapScreen,
    navigationOptions: {
      title: "Map",
      headerRight: <View />,
      // headerLeft: <View />,
      headerStyle: {
        backgroundColor: "#fff",
        shadowOpacity: 0,
        elevation: 1,
        marginBottom: 0
      },
      headerTintColor: "#14171a",
      headerTitleStyle: {
        flex: 1,
        fontSize: 25,
        justifyContent: "center"
      }
    }
  },
  ProviderProfile: {
    screen: ProviderProfile,
    navigationOptions: {
      headerRight: <View />,
      // headerLeft: <View />,
      headerStyle: {
        backgroundColor: "#fff",
        shadowOpacity: 0,
        elevation: 1
      },
      headerTintColor: "#14171a",
      headerTitleStyle: {
        flex: 1,
        fontSize: 25,
        justifyContent: "center"
      }
    }
  },
  Order: {
    screen: Order,
    navigationOptions: {
      title: "Order",
      headerRight: <View />,
      // headerLeft: <View />,
      headerTintColor: "#fff",
      headerStyle: {
        backgroundColor: "#fff",
        shadowOpacity: 0,
        elevation: 1
      },
      headerTintColor: "#14171a",
      headerTitleStyle: {
        flex: 1,
        fontSize: 25,
        justifyContent: "center"
      }
    }
  },
  Tabs: NavTabs
});

and when I Import it in my screen " profile" like this

<View>
 <View style={{ flexDirection: "row", marginTop: 10 }}>
            <TouchableOpacity
              style={{
                backgroundColor: "#1567d3",
                width: 130,
                borderRadius: 100,
                justifyContent: "center",
                marginRight: 50,
                height: 40
              }}
              onPress={() => alert("Message")}
            >
              <Text
                style={{
                  textAlign: "center",
                  color: "#fff",
                  fontSize: 18,
                  fontWeight: "300"
                }}
              >
                Message
              </Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={{
                backgroundColor: "#1567d3",
                width: 130,
                borderRadius: 100,
                justifyContent: "center",
                height: 40
              }}
              onPress={() =>
                this.props.navigation.navigate("Order", {
                  providerName,
                  providerId,
                  providerService,
                  gKey,
                  token,
                  region
                })
              }
            >
              <Text
                style={{
                  textAlign: "center",
                  color: "#fff",
                  fontSize: 18,
                  fontWeight: "300"
                }}
              >
                Send Order
              </Text>
            </TouchableOpacity>
          </View>
        <NavTabs />
</View>

I got the error like above, so how to handle this without making the other app container? cuz when i navigate from Map screen to Profile screen i pass some Params and i want to use these params in the Tabs

this.props.navigation.navigate('ProviderProfile', {
  providerId: marker.id,
  providerName: marker.name,
  providerService: marker.service,
  gKey: marker.gKey,
  token: marker.token._55,
  region: region
})

the result should be like this " as you see i have a name "Loy" i wanna use it in About Tab"

来源：https://stackoverflow.com/questions/57065752/add-custom-creatematerialtoptabnavigator-to-component