如何添加自定义组件来创建MaterialTopTabNavigator标签栏 [英] How to add a custom component to createMaterialTopTabNavigator tab bar

问题描述

我正在使用 react-navigation 中的 createMaterialTopTabNavigator 并尝试通过在标签栏上添加一些组件来自定义标签栏.

I am using createMaterialTopTabNavigator from react-navigation and trying to customize the tab bar by adding some components on top of it.

正如您在此处的指南中所见:

As you can see in its guide here:

https://reactnavigation.org/docs/en/material-top-tab-navigator.html#docsNav

有一个名为 tabBarComponent 的选项，可以通过它来创建您自己的标签栏.但是，它完全覆盖了标签栏，这不是我想要的.

there is an option called tabBarComponent that can be passed to create your own tab bar. However, it completely overrides the tab bar which is not what I want.

我想在标签栏顶部添加一个自定义组件，然后在默认标签下方添加标签.

I'd like to add a custom component at the top of the tab bar and then have the default tabs with their labels underneath.

谁能告诉我如何向标签栏添加组件的示例?

Can anyone show me an example of how to add a component to the tab bar please?

例如，下面的代码将标签替换为 My Custom Component 文本，但我如何才能同时拥有它们?(自定义组件和选项卡)

For example the code bellow replaces the tabs with My Custom Component text but how can I have both of them? (custom components and tabs)

const myNavigation = createMaterialTopTabNavigator({
  firstTab: FirstTabScreen,
  secondTab: SecondTabScreen,
  thirdTab: ThirdTabScreen,
},
{
  tabBarComponent: props => (
    <View><Text>My Custom Component</Text></View>
  )
});

推荐答案

创建自定义选项卡栏组件并不难，下面是我为正在处理的项目创建的自定义选项卡栏的简化示例.

It is not so difficult to create a custom tab bar component, below is a mimimised example of a custom tab bar I created for a project I am working on.

但实际上并没有那么多，您的标签栏组件接收一个导航道具，其中包含您在 createMaterialTopTabNavigator 中设置的不同路线.因此，您只需遍历这些路由并为每个路由显示一个选项卡栏项.

But in fact there is not so much to it, your tab bar component receives a navigation prop which holds the different routes you have set up in createMaterialTopTabNavigator. So you simply loop over those routes and display an tab bar item for each of them.

CustomTabBar.jsx

export default class CustomTabBar extends React.Component {

  render() {

    const {navigation} = this.props;    
    const routes = navigation.state.routes;

    return (
      <SafeAreaView style={{backgroundColor: 'blue'}}>
        <View style={styles.container}>
          {routes.map((route, index) => {
            return (
              <View style={styles.tabBarItem}>
                <CustomTabBarIcon
                  key={route.key}
                  routeName=route.routeName
                  onPress={() => this.navigationHandler(index)}
                  focused={navigation.state.index === index}
                  index={index}
                />
          </View>
            );
          }
        </View>
      </SafeAreaView>
    );
  }

  navigationHandler = (routeName) => {
    this.props.navigation.navigate(routeName);
  }
}

const styles = StyleSheet.create({

  container: {
    flexDirection: 'row',
    alignContent: 'center',
    height: 56,
    width: '100%',
    paddingHorizontal: 16,
    backgroundColor: 'blue',
  },
  tabBarItem: {
    flex: 1,
    alignItems: 'center'
  }
});

CustomTabBarItem.jsx

class CustomTabBarIcon extends React.PureComponent {

  render() {

    const {index, focused, routeName} = this.props;
    let icon = '';

    switch (index) {
      case 0: 
        icon = 'a';
        break;

      case 1:
        icon : 'b';
        break;

      case 2:
        icon = 'c';
        break;

      default: 
        iconName = 'a';
    }

    return (
      <TouchableWithoutFeedback
        onPress={() => this.onSelect(routeName)}
      >
        <View style={[styles.container, focused ? styles.active : styles.inactive]}> 
          <View style={styles.icon}>
            <Icon name={icon} color='white' size={24}/>
          </View>
          <Text style={styles.textStyle}>{routeName}</Text>
        </View>
      </TouchableWithoutFeedback>
    );
  }

  onSelect = (routeName) => {    
    this.props.onPress(routeName);
  }
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    alignItems: 'center'
  },
  active: {
    borderTopWidth: 3,
    borderColor: 'white'
  },
  inactive: {
    borderTopWidth: 3,
    borderColor: 'blue'  
  },
  textStyle: {
    color: 'white',
    fontSize: 13
  }
});

这篇关于如何添加自定义组件来创建MaterialTopTabNavigator标签栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！