如何使用堆栈屏幕标头和headright导航本机页面？

Question

我正在研究一个React Native项目，我想自定义React stack Navigator。堆栈导航器屏幕的默认“返回按钮”给出了上一个屏幕和后箭头的名称。我想更改名称，更重要的是删除后背胡萝卜。

我访问了React Native文档，答案似乎正在使用“ HeaderLeft” 选项，但我不知道如何导航回到上一个屏幕。如果我使用onpress = {（）=＆gt; navigation.navigate（{routename：'home'}）}

然后我遇到一个错误，说reference> reference eRror：找不到变量：navigation

，我如何使用headerLefter导航我的堆栈导航器和Heartright？

给出错误的代码是：

      <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

我认为您可以将期望导航对象的函数传递到 options prop，

因此，对于您的代码，结果将是：

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