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

Question

Как дать пользовательскую навигацию к стрелке назад заголовка в ReactNavigation? Я хочу, чтобы стрелка назад в заголовке переместилась на определяемый мной экран, а не на предыдущий экран.

Спасибо.

Answer 1

Вы можете попробовать 2 вещи:

a) используйте headerMode: 'none' в вашем sub-StackRouters вместо корневого маршрутизатора (с именем RouterComponent). В идеале вам не нужно больше ничего делать, и заголовки sub-StackRouters будут отображаться в заголовке вашего корневого маршрутизатора. Я думаю, что помню, что нечто подобное сработало некоторое время назад для меня, но я не проверял это некоторое время назад, и я думаю, что вряд ли это все еще будет работать, но вы все равно можете проверить.

б) и это то, что я сейчас использую в другой ситуации. Чтобы вручную включить кнопку возврата:

import { HeaderBackButton } from 'react-navigation';

const navigationOptions = ({ navigation }) => ({
    headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />,
})

const RouterComponent = StackNavigator({
    Tabs: {
        screen: Tabs
    },
    Profile: {
        screen: ProfileStack,
        navigationOptions
    }
},{
    mode: 'modal',
    headerMode: 'none',
});

Если вышеуказанное решение не работает,

Попробуйте добавить навигационные опции непосредственно в определение ProfileStack.

const ProfileStack = StackNavigator({
    ProfileHome: { 
      screen: ProfileHome, 
      navigationOptions: ({navigation}) => ({ //don't forget parentheses around the object notation
        title: 'Profile',
        headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />
      })
    },
    ProfileEdit: { screen: ProfileEdit }
  }