Как добавить кнопку возврата в createMaterialTopTabNavigator (React Navigator)?

Question

Так что я не слишком знаком с React Navigation, но я делаю некоторые успехи.Одна проблема, с которой я не могу разобраться, это добавление кнопки «Назад» в навигатор по вкладкам.

Итак, на моем главном экране у меня есть навигатор с верхней вкладкой, который позволяет пользователю переключаться между экраном «Подробности» иЭкран чата.Kinda выглядит так:

[----- [Chat] [Details] -----]

Я могу включить режим заголовка, но он добавляет заголовок в началоНавигация по вкладкам выглядит следующим образом:

[<-----------------------------] </p>

[----- [Chat] [Details] -----]

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

Вот код, который я пробую.Спасибо за помощь!

const chatStack = createMaterialTopTabNavigator(
  {
    Details: {
      screen: connect(
        mapStateToProps,
        mapDispatchToProps,
      )(ChatDetails),
    },
    Chat: {
      screen: connect(
        mapStateToProps,
        mapDispatchToProps,
      )(ChatWindow),
    },
  },
  {
    tabBarOptions: {
      style: styles.chatTabBar,
    },
  },
)

export default createStackNavigator(
  {
    ShowMessages: {
      screen: connect(
        mapStateToProps,
        mapDispatchToProps,
      )(MessageScreen),
    },
    ChatWindow: chatStack,
  },
  {
    headerMode: 'none',
  },
)

Answer 1

Вы можете настроить tarBarComponent.

import {
    createMaterialTopTabNavigator,
    MaterialTopTabBar,
    HeaderBackButton
} from 'react-navigation';

createMaterialTopTabNavigator({
    Archive: {
        screen: ArchiveScreen,
    },
    Report: {
        screen: ReportScreen,
    }
}, {
    tabBarComponent: props => {
        return ( <
            View style = {
                {
                    flexDirection: 'row'
                }
            } >
            <
            HeaderBackButton { ...props
            }
            onPress = {
                () => {
                    props.navigation.navigate('Home');
                }
            }
            /> <
            MaterialTopTabBar { ...props
            }
            style = {
                {
                    flex: 1,
                    backgroundColor: 'transparent'
                }
            }
            /> <
            /View>
        );
    },
});