react-native-tab-view 宽度没有得到 100% 有两个标签栏答案

【问题标题】：react-native-tab-view width not getting 100% with two tab barsreact-native-tab-view 宽度没有得到 100% 有两个标签栏
【发布时间】：2021-03-23 03:13:34
【问题描述】：

在react-native-tab-view中使用两个自定义标签栏时，宽度不是100%，即；在显示的图像中，在第二个选项卡（骑乘）之后有一个额外的空间。当有超过 2 个选项卡时，它工作正常。我期望的是两个标签栏的宽度都为 50%，没有任何红色空间。 Screenshot of tab view

--------- 选项卡视图

<TabView
          navigationState={{index, routes}}
          renderScene={renderScene}
          onIndexChange={setIndex}
          initialLayout={{width: layout.width}}
          renderTabBar={(props) => (
            <TabBar
              {...props}
              scrollEnabled
              style={{
                borderRadius: 20,
                elevation: 0,
                backgroundColor: 'red',
              }}
              renderIndicator={() => null}
              onTabLongPress={(scene) => {
                const {route} = scene;
                props.jumpTo(route.key);
              }}
              renderTabBarItem={({route, focused, color, scene}) => {
                return (
                  <Pressable
                    onPress={() => {
                      props.jumpTo(route.key);
                    }}
                    style={[
                      route.key === props.navigationState.routes[index].key
                        ? Styles.tabBarActive
                        : Styles.tabBarInActive,
                      Styles.tabBar,
                    ]}>
                    <Text
                      style={[
                        route.key === props.navigationState.routes[index].key
                          ? Styles.activeTabText
                          : Styles.inActiveTabText,
                      ]}>
                      {route.title}
                    </Text>
                  </Pressable>
                );
              }}
            />

--------- Styles.js

tabBar: {
    paddingHorizontal: '5%',
    paddingVertical: '2%',
    alignItems: 'center',
    flex: 1,
  },
  tabBarActive: {
    borderRadius: RFValue(25),
    backgroundColor: Colors.AppPrimaryThemeColor,
    justifyContent: 'center',
  },
  tabBarInActive: {
    backgroundColor: 'green',
    justifyContent: 'center',
  },
  activeTabText: {
    color: Colors.AppMainColor,
    fontFamily: Fonts.FONT_BOLD,
    fontSize: RFPercentage(1.8),
  },
  inActiveTabText: {
    color: Colors.AppPrimaryThemeColor,
    fontFamily: Fonts.FONT_MEDIUM,
    fontSize: RFPercentage(1.6),
  },

【问题讨论】：

标签： react-native

【解决方案1】：

你真的需要在标签之间滚动吗？

如果没有，请尝试删除“ScrollEnabled”。

         renderTabBar={(props) => (
            <TabBar
              {...props}
              style={{
                borderRadius: 20,
                elevation: 0,
                backgroundColor: 'red',
              }}

【讨论】：

这对我有用。感谢您的回答。