我正在開發一個反應原生專案，我想自定義反應堆疊導航器。堆疊導航器螢屏的默認“后退按鈕”給出了前一個螢屏的名稱和一個后退箭頭。我想更改名稱，更重要的是洗掉后退按鈕胡蘿卜。
我訪問了 React Native 檔案，答案似乎是使用“headerLeft”選項，但我不知道如何導航回上一個螢屏。如果我使用onPress={() => navigation.navigate({routeName: 'Home'})}
然后我得到一個錯誤說ReferenceError: Can't find variable: navigation
那么如何使用 headerLeft 和 headerRight 導航我的堆疊導航器？
給出錯誤的代碼是：
<Stack.Screen
name="ChoresOptionsPage"
component={ChoresOptionsPage}
options={{
headerBackTitle: "Cancel",
headerTitle: "Add Chores",
headerLeft: () => (
<Button
onPress={() => navigation.navigate({routeName: 'Home'})}
title="Cancel"
color="#fff"
/>
),
}}
/>
這是我的檔案代碼： -- App.js --
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#FFA06A"
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
}}
>
<Stack.Screen
name="Home"
component={Home}
options={{
headerTitle: (props) => <Title></Title>,
}}
/>
<Stack.Screen
name="ChoresOptionsPage"
component={ChoresOptionsPage}
options={{
headerBackTitle: "Cancel",
headerTitle: "Add Chores",
headerLeft: () => (
<Button
onPress={() => navigation.navigate({routeName: 'Home'})}
title="Cancel"
color="#fff"
/>
),
}}
/>
<Stack.Screen
name="ChoreLibrary"
component={ChoreLibrary}
options={{
headerTitle: "Chore Library",
headerBackTitle: "Cancel",
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Save"
color="#fff"
/>
),
}}
/>
<Stack.Screen
name="CustomChore"
component={CustomChore}
options={{
headerTitle: "Custom Chore",
headerBackTitle: "Cancel",
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Save"
color="#fff"
/>
),
}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
uj5u.com熱心網友回復：
我認為您可以將期望導航物件的函式傳遞給options道具，就像在檔案中的這個示例中所做的那樣。
因此，對于您的一段代碼，結果將類似于：
<Stack.Screen
name="ChoresOptionsPage"
component={ChoresOptionsPage}
options={({navigation}) => ({
headerBackTitle: "Cancel",
headerTitle: "Add Chores",
headerLeft: () => (
<Button
onPress={() => navigation.navigate({routeName: 'Home'})}
title="Cancel"
color="#fff"
/>
),
})}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/464901.html