如何使用堆栈屏幕 headerLeft 和 headerRight 导航反应本机页面？

Question

我正在做一个 React Native 项目，我想自定义 React 堆栈导航器。堆栈导航器屏幕的默认“后退按钮”提供前一个屏幕的名称和后退箭头。我想更改名称，更重要的是删除后退按钮胡萝卜。

我访问了 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>
  )
    
}

Answer 1

我认为你可以将需要 navigation 对象的函数传递给 options 属性，类似于 this example 来自文档。

因此，对于您的代码片段，结果将类似于：

<Stack.Screen
  name="ChoresOptionsPage"
  component={ChoresOptionsPage}
  options={({navigation}) => ({
    headerBackTitle: "Cancel",
    headerTitle: "Add Chores",
    headerLeft: () => (
      <Button
        onPress={() => navigation.navigate({routeName: 'Home'})}
        title="Cancel"
        color="#fff"
      />
    ),
    })}
/>

如何使用堆栈屏幕 headerLeft 和 headerRight 导航反应本机页面？

How can I navigate react native pages using stack screen headerLeft and headerRight?

react-native

react-navigation

react-navigation-stack