如何将自定义组件添加到 createMaterialTopTabNavigator 选项卡栏答案

【问题标题】：How to add a custom component to createMaterialTopTabNavigator tab bar如何将自定义组件添加到 createMaterialTopTabNavigator 选项卡栏
【发布时间】：2019-01-28 19:50:36
【问题描述】：

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

您可以在此处的指南中看到：

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

有一个名为tabBarComponent 的选项可用于创建您自己的标签栏。但是，它完全覆盖了我不想要的标签栏。

我想在标签栏的顶部添加一个自定义组件，然后在下面添加带有标签的默认标签。

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

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

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

【问题讨论】：

在这种情况下，您需要创建一个自定义标签栏组件。但实际上它比听起来容易得多，所以不用担心
@dentemm 那是我的问题！我一直在尝试创建一个自定义标签栏。我可以将它分配给 tabBarComponent。但它会删除原始标签。你介意给我举个例子吗？在过去的几天里，我一直在努力解决它，但没有运气
我将展示我创建的标签栏的示例！

标签： javascript react-native react-navigation

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

一个非常简单的方法是使用来自 react 的 Fragment。它解决了问题。

import React, {Fragment} from 'react';

你的组件返回可能看起来像这样

return (
        <Fragment>
            <MyCustomHeader/>
            <MaterialTopTabBar/>
        </Fragment>

    )

【讨论】：

【解决方案3】：

您可以像这样将自己的自定义组件添加到现有的顶部标签栏：

import { createMaterialTopTabNavigator, MaterialTopTabBar } from "react-navigation";

tabBarComponent: props => <SafeAreaView>
  <MyCustomHeader title='test' />
  <MaterialTopTabBar {...props} />
</SafeAreaView>

【讨论】：