Question

我在createMaterialTopTabNavigator上遇到问题，我已经在Route.js文件中声明了一个AppContainer，

如果要在屏幕中为TobTab创建单独的AppContainer，则错误消失了，我想在其中添加这些Tob标签像这样

 const Root = createAppContainer(NavTabs);

所以我制作了一个包含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;

，然后在文件导航“ Route.js” 中，将其像这样放在StackNavigator中这里是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
});

，以及当我将其导入到屏幕中时“ profile” 像这样

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

结果应如下所示：“如您所见，我有一个名字“ Loy”，我想在“关于选项卡”中使用它”

将自定义createMaterialTopTabNavigator添加到组件？

0 个答案: