как обработать пользовательский заголовок реакции-навигации назад Кнопка

Question

Я использую реагирующую навигацию:

"@react-navigation/native": "5.2.3",
"@react-navigation/stack": "5.2.18",

, и у меня есть пользовательский заголовок с указанным c экраном, но мне нужно обработать кнопку возврата до go, чтобы вернуться к предыдущему экрану, но я не У меня нет доступа к опоре навигации, чтобы сделать это

    function MainStackScreen() {
        return (
            <Stack.Navigator initialRouteName={'Splash'}>
                <Stack.Screen name="Splash" component={Splash} options={{headerShown: false}}/>
                <Stack.Screen options={{ style:{  borderTopWidth: 0, elevation: 0, shadowOpacity: 0 }, 
                              headerStyle:{height: hp('7%') }, header:()=><CustomHeader 
                              title={i18n.t('myAds:header')} back bgColor={colors.white} 
                              onPressHeader={()=>navigation.pop()} />  }} name="MyAdsTabs" component={MyAdsTabs} />
            </Stack.Navigator>
        );
    }


<Provider store={store}>
    <PersistGate persistor={persistor} loading={this.renderLoading()}>
        <Root>
            <NavigationContainer>
                <MainStackScreen />
            </NavigationContainer>
        </Root>
    </PersistGate>
</Provider>

. Это выдает ошибку с: ReferenceError: навигация не определена как мне получить доступ к навигации или что-то, что можно обработать кнопкой назад

Answer 1

Вы должны определить navigation в заголовке, как показано ниже:

function MainStackScreen() {
  return (
    <Stack.Navigator initialRouteName={'Splash'}>
      <Stack.Screen name="Splash" component={Splash} options={{ headerShown: false }} />
      <Stack.Screen 
        options={{
          style: { borderTopWidth: 0, elevation: 0, shadowOpacity: 0 },
          headerStyle: { height: hp('7%') }, 
          header: ({ navigation }) => ( // defing navigation here
              <CustomHeader
                title={i18n.t('myAds:header')} back bgColor={colors.white}
                onPressHeader={() => navigation.pop()} 
              />
            )
          }}
          name="MyAdsTabs" 
          component={MyAdsTabs} 
        />
    </Stack.Navigator>
  );
}

Answer 2

Я прошел навигацию, как это сказано в документации Реакция-навигация

<Stack.Screen options={({navigation})=>({ style:{  borderTopWidth: 0, elevation: 0, shadowOpacity: 0 }, 
                headerStyle:{height: hp('7%') }, header:({goBack})=>
                <CustomHeader title={i18n.t('myAds:header')} back bgColor={colors.white} onPressHeader={()=>navigation.pop()} />  })} 
                name="MyAdsTabs" component={MyAdsTabs} />