【问题标题】: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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2023-02-04
      • 2020-06-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-04
      • 2022-01-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多