reactjs - React Native Navigation 覆盖 Stack Navigator 中标题后退按钮的 goBack()

Question

我想在本地将堆栈导航器中的默认后退按钮的行为自定义到一个屏幕。

在假设堆栈上有 screen1|screen2 的细节中，一旦按下按钮，我想将一些 Prop 从 screen2 传递到 screen1。

我花了很多时间阅读 React 导航文档、在互联网上搜索和编码，但我无法做到这一点。

来自文档

在某些情况下，您可能希望通过上述选项自定义后退按钮，而在这种情况下，您可以将 headerLeft 选项设置为将呈现的 React 元素
我知道这个问题与 headerRight 组件的 goBack() 函数有关。

我想用类似 navigation.navigate("previousScreen",{{..props}}) 的东西覆盖与 headerLeft 后退按钮相关的默认函数 goBack()。

并且(这非常重要!!)我想在特定屏幕本地使用此行为，而不是全局使用。

我试过这样的东西，但不起作用。

 export default function App(){
 return(
 <NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="FirstScreen" component={FirstScreen}/>
    <Stack.Screen name="SecondScreen" component={SecondScreen} options={{headerLeft: () => (
        <HeaderBackButton
          onPress={() =>navigation.navigate("FirstScreen",{//stuff//})}
          title="Info"
          color="#fff"
        />
      ),}}/>
  </Stack.Navigator>
</NavigationContainer>
 )}

Answer 1

如果您使用的是 react navigation v5，您可以使用以下命令为特定屏幕设置行为:

import { HeaderBackButton } from '@react-navigation/stack';

...
options={{
          headerLeft: (props) => (
            <HeaderBackButton
              {...props}
              onPress={() => {
                navigation.navigate('screenName');
              }}
            />
          ),
        }}
...

您也可以使用 screenOptions={{}} 设置为堆栈级别。
屏幕 Prop 上也有“导航”和“路线”。 options={({ navigation, route }) => ({headerLeft: ...})