TabBar 内的导航 React Native

Question

我是 React Native 的新手，我有以下标签栏导航页面：

    const TabBar = () => {
  return (
    <BottomTab.Navigator
      screenOptions={{
        showIcon: true,
        tabBarShowLabel: false,
        tabBarStyle: {
          position: "absolute",
          bottom: 25,
          left: 20,
          right: 20,
          elevation: 0,
          backgroundColor: global.GUI.WHITE,
          borderRadius: 15,
          height: 90,
          ...styles.shadow,
        },
        header: ({ navigation, route, options }) => {
          return (
            <View
              style={{
                justifyContent: "space-between",
                height: 110,
                backgroundColor: global.GUI.WHITE,
                alignItems: "center",
                width: "100%",
                flexDirection: "row",
                ...styles.shadow,
              }}
            >
              <Image
                source={ctsLogo}
                style={{
                  resizeMode: "contain",
                  width: 100,
                  height: 70,
                  marginTop: 40,
                  marginLeft: 10,
                }}
              />
              <Button title="test" onPress={()=>{
                
              }}>
                <FontAwesomeIcon
                  icon={faCog}
                  style={{
                    color: global.GUI.ORANGE,
                    marginTop: 40,
                    marginRight: 20,
                  }}
                  size={30}
                />
              </Button>
            </View>
          );
        },
      }}
    >
      <BottomTab.Screen
        name="Home"
        component={Main}
        options={{
         ...
        }}
      />
      <BottomTab.Screen
        name="Flyers"
        component={Flyers}
        options={{
          ...
        }}
      />
      <BottomTab.Screen
        name="OnlineShop"
        component={OnlineShop}
        options={{
         ...
        }}
      />
      <BottomTab.Screen
        name="Cards"
        component={Cards}
        options={{...}}
      />
      <BottomTab.Screen
        name="Shops"
        component={Shops}
        options={{
          ....
        }}
      />
    </BottomTab.Navigator>
  );
};

我想通过触发测试按钮以编程方式添加到另一个页面的导航，同时保留在选项卡栏的上下文中（假设我想转到另一个名为“设置”的组件）：

<Button title="test" onPress={()=>{...}}>

在自定义 header 中，是否可以这样做？谢谢

编辑：

我已将 App.js 代码更改为：

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import TabBar from "./navigation/TabBar";
import Settings from "./page/Settings";

const Stack = createNativeStackNavigator();

export default function App() {
  function Tabs() {
    return <TabBar />;
  }
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Tabs" component={Tabs} 
         options={{ headerShown: false }}/>
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

现在我可以导航了，谢谢！

Answer 1

试试这个

props.navigation.navigate('Settings')

Answer 2

在您的 SCREEN 调用导航挂钩中

const navigation = useNavigation();

然后你可以在任何你想使用的地方使用 NAVIGATION 功能 :) 甚至在 Button

按钮

<Button title="test" onPress={()=>{
   navigation.navigate('Settings') // param here is "name" prop from your navigator
   // navigation.goBack()
}}>

TabBar 内的导航 React Native

Navigation inside TabBar React Native

javascript

tabbar

react-native