React Navigation 3个顶部标签

Question

我正在使用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
    }
  },
});

Answer 1

应该是这样的。

 defaultNavigationOptions:{
    headerMode:"none"
}

Answer 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