我對 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={()=>{...}}>
在自定義標頭中,是否可以這樣做?謝謝
uj5u.com熱心網友回復:
嘗試使用這個
props.navigation.navigate('Settings')
uj5u.com熱心網友回復:
在您的 SCREEN 呼叫導航掛鉤內
const navigation = useNavigation();
然后你可以在任何你想要的地方使用 NAVIGATION 功能:) 甚至在 Button
按鈕
<Button title="test" onPress={()=>{
navigation.navigate('Settings') // param here is "name" prop from your navigator
// navigation.goBack()
}}>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/418961.html
標籤:
