Question

所以我对React Navigation不太熟悉，但是我正在取得一些进展。我想弄清楚的一件事是在标签导航器中添加了后退按钮。

因此，在主屏幕上，我有一个顶部的标签导航器，允许用户在“详细信息”屏幕和“聊天”屏幕之间切换。有点像：

[----- [聊天] [详细信息] -----]

我可以打开标题模式，但是它将标题添加到导航栏的顶部，因此它看起来像：

[<-----------------------------]

[----- [聊天] [详细信息] -----]

标题中有很多空白。我想我可以轻松地将后退按钮添加到导航栏，但是很难弄清楚该如何做。

这是我正在尝试的代码。感谢您的帮助！

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>
        );
    },
});

如何添加后退按钮以创建createMaterialTopTabNavigator（React Navigator）？

1 个答案: