React Navigation 3 顶部选项卡答案

【问题标题】：React Navigation 3 Top TabsReact Navigation 3 顶部选项卡
【发布时间】：2018-12-27 09:34:12
【问题描述】：

我正在使用 React Navigation 3，我想要隐藏标题并显示包含选项卡的自定义标题，如下图所示。

const HomeTab = createMaterialTopTabNavigator({
  Tab1: InviHistory,
  Tab2: Shop
},{
  tabBarOptions: {
    scrollEnabled: true,
    labelStyle: {
      fontSize: 12,
    },
    style: {
      backgroundColor: 'red',
    },
    indicatorStyle: {
      backgroundColor: '#fff'
    },
    defaultNavigationOptions:{
      header:null
    }
  },
});

【问题讨论】：

标签： react-native tabs react-navigation

【解决方案1】：

应该是这样的。

 defaultNavigationOptions:{
    headerMode:"none"
}

【讨论】：

它不起作用，是我用括号弄错了吗？
啊我误会了。我猜 TabNav 没有defaultNavigationOptions。所以你想隐藏标签导航标准标题？或上面写着“优惠”的意见？
我可以将我的自定义标题添加为上图吗？
你想实现这样的目标吗？ snack.expo.io/@nazrdogan/frowning-chips
是的，但是如何在标题中添加标签？

【解决方案2】：

回答您的问题在 react-navigation 文档中。

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./spiro.png')}
        style={{ width: 30, height: 30 }}
      />
    );
  }
}

class HomeScreen extends React.Component {
    static navigationOptions = {
        // headerTitle instead of title
        headerTitle: <LogoTitle />,
    };

  /* render function, etc */
}

使用参数header，您可以完全传递组件来替换标题。

导航选项 API：https://reactnavigation.org/docs/en/stack-navigator.html#navigationoptions-used-by-stacknavigator

配置标头 API：https://reactnavigation.org/docs/en/headers.html

【讨论】：