Question

我有一个带有3个标签/屏幕的createMaterialToPTabNavigator，我想自定义标签，所以我找到了解决方法here

我尝试实施该解决方案，但对我而言不起作用：

第一个问题是，它没有显示我的所有标签，仅显示了一个标签。其次-当我按下选项卡的标签时，它会显示一条错误消息：

this.props.onPress不是函数

我尝试在标签导航器上放置3个标签，它们的图标可以帮助您，这是我的代码：在我的路线上：

const TabBarNavig = createMaterialTopTabNavigator({
   Places  : {
   screen :tab1,
   navigationOptions: ({ navigation }) => ({
    title: 'Placements'
  }
  )
   },
   GetPlaces : tab2,
   New : tab3
},
{
  tabBarComponent: props => (
    <CustomTabBar {...props} />
  ),
  tabBarPosition: 'top',
swipeEnabled: true,
backBehavior: 'none',
lazy: true,
},
{
  tabBarOptions: {
    scrollEnabled: true,
    labelStyle: {
      fontSize: 10,
      paddingTop:10,
    },
    tabStyle: {
      width: Dimensions.get('window').width / 3,
    }
  }

和

导出默认类CustomTabBar扩展了组件{

render() {

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

  return (

      <View>
        {routes.map((route, index) => {
          return (
            <View>
              <CustomTabBarIcon
                key={route.key}
                routeName={route.routeName}
                onPress={() => this.navigationHandler(index)}
                focused={navigation.state.index === index}
                index={index}
              />
           </View>
          );
        }
        )};
      </View>

  );
}

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

}

===========

 export default class CustomTabBarIcon extends Component {

    render() {

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

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

        case 1:
          icon = 'home';
          break;

        case 2:
          icon = 'account';
          break;

        default: 
          icon = 'info';
      }

      return (
        <TouchableWithoutFeedback
          onPress={this.onSelect}
        >
          <View> 
            <View>
              <Icon name={icon} color='red' size={24}/>
            </View>
            <Text style={styles.textStyle}>{routeName}</Text>
          </View>
        </TouchableWithoutFeedback>
      );
    }

    onSelect = () => {    
  this.props.onPress(this.props.index);

    }
  }

my image

Answer 1

我写了您所指问题的答案，并且我发现另一个答案中提供的代码有误。我已解决此问题，但是在createMaterialTopTabNavigator中设置标签栏的方式也有问题。您为该函数提供了3个参数，但仅接受2个参数。tabBarOptions对象应该是config对象的一部分。另外：请记住，如果这些选项在CustomTabBar中被覆盖，则它们将无用。

const TabBarNavig = createMaterialTopTabNavigator({
  Places: {
    screen :tab1,
    navigationOptions: ({ navigation }) => ({
      title: 'Placements'
    })
  },
  GetPlaces : tab2,
  New : tab3
  },
  {
    tabBarComponent: CustomTabBar,
    tabBarPosition: 'top',
    swipeEnabled: true,
    backBehavior: 'none',
    lazy: true,
    tabBarOptions: {
      scrollEnabled: true,
      labelStyle: {
        fontSize: 10,
        paddingTop:10,
      },
      tabStyle: {
        width: Dimensions.get('window').width / 3,
      }
    }
  });

如何在本机反应中实现自定义tabBarComponent

1 个答案: