我刚刚开始掌握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时,它似乎都会给路线部分带来其他问题。
1条答案
按热度按时间xriantvc1#
虽然可以将函数传递给
screenOptions
,但该函数仍然返回相同的对象,其中headerShown
可以定义为:对于其他带有类似对象的导航器: