react原生标签导航中的多个标题

fykwrbwg  于 2023-03-13  发布在  React
关注(0)|答案(1)|浏览(169)

我刚刚开始掌握react navigation,我学习了一个关于集成不同导航类型的很棒的medium教程。除了我得到了多个标题之外,一切都很好。我正在尝试编写headerShown:false,但我不确定写在哪里,因为我的screenOption正在走一条路线。
发送一些照片我的博览会和我的代码。
真的会很感激一些帮助!

import React from "react";
import { Button, View, Text } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Ionicons } from "@expo/vector-icons";

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === "TabA") {
            iconName = focused
              ? "ios-information-circle"
              : "ios-information-circle-outline";
          } else if (route.name === "TabB") {
            iconName = focused ? "ios-list-box" : "ios-list";
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: "tomato",
        inactiveTintColor: "gray",
      }}
    >
      <Tab.Screen name="TabA" component={TabAScreen} />
      <Tab.Screen name="TabB" component={TabBScreen} />
    </Tab.Navigator>
  );
}

const Stack = createNativeStackNavigator();

function TabAScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="TabA Home" component={TabADetailsScreen} />
      <Stack.Screen name="TabA Details" component={Details} />
    </Stack.Navigator>
  );
}

function TabADetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Welcome to TabA page!</Text>

      <Button
        onPress={() => navigation.navigate("TabA Details")}
        title="Go to TabA Details"
      />
    </View>
  );
}

function Details() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>TabA Details here!</Text>
    </View>
  );
}

function TabBScreen() {
  return (
    <View>
      <Text style={{ textAlign: "center", marginTop: 300 }}>
        Welcome to TabB page!
      </Text>
    </View>
  );
}

function NotificationScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

我试过在homeScreen函数中写入headerShown false,但我不确定该放在哪里,因为它正在走一条路线,每次我写入headerShown false时,它似乎都会给路线部分带来其他问题。

xriantvc

xriantvc1#

虽然可以将函数传递给screenOptions,但该函数仍然返回相同的对象,其中headerShown可以定义为:

<Tab.Navigator
  screenOptions={({ route }) => ({
    headerShown: false,
    tabBarIcon: ({ focused, color, size }) => {
...
    },
  })}
...
>
  <Tab.Screen name="TabA" component={TabAScreen} />
  <Tab.Screen name="TabB" component={TabBScreen} />
</Tab.Navigator>

对于其他带有类似对象的导航器:

<X.Navigator screenOptions={{headerShown: false}}>
...
</X.Navigator>

相关问题