将自定义 createMaterialTopTabNavigator 添加到组件？

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

如果在我想添加这些 Tob 选项卡的屏幕中为 TobTab 创建单独的 AppContainer，错误就会消失 像这样

 const Root = createAppContainer(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;

并在文件导航中“路线.js”我像这样把它放在 StackNavigator 中 这里是完整文件 https://gist.github.com/anastely/b1d7dec7d8926cbdabc2af2d17562552

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
});

当我将其导入屏幕时" profile https://gist.github.com/anastely/5c4f2f6a7226f77d89e51f41c4c20a61"像这样

<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>

我收到了与上面类似的错误，那么如何在不创建其他应用程序容器的情况下处理这个问题？ 因为当我从地图屏幕导航到个人资料屏幕时，我传递了一些参数，并且我想在选项卡中使用这些参数

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"