React Native - 根据标签栏文本宽度更改指示器宽度（react-native-tab-view）答案

【问题标题】：React Native - Changing the indicator width according to tab bar text width (react-native-tab-view)React Native - 根据标签栏文本宽度更改指示器宽度（react-native-tab-view）
【发布时间】：2021-06-09 08:05:37
【问题描述】：

我正在使用react-native-tab-view，并尝试更改指标宽度。我希望indicator width 与the tab text 相同。但我所做的只是默认设置。我尝试了很多方法，但总是给我错误的结果。标签栏也应该可以水平滚动。你能检查一下我应该改变哪一部分吗？

这是预期的结果：

ShowAllIndex 代码：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.dark,
  },
});

const ShowAllIndex = () => {
  const { seller } = useSelector((s) => s.auth, shallowEqual);
  const [routes] = useState([
    { key: 'best', title: 'BEST' },
    { key: 'jacket', title: '아우터' },
    { key: 'pants', title: '바지' },
    { key: 'skirts', title: '스커트' },
    { key: 'topClothe', title: '원피스' },
    { key: 'one', title: '바지' },
    { key: 'two', title: '스커트' },
    { key: 'three', title: '상의' },
  ]);

  const renderScene = SceneMap({
    best: ShowAllMainRoutes,
    jacket: JacketRoutes,
    pants: PantsRoutes,
    skirts: SkirtsRoutes,
    topClothe: TopClotheRoutes,
    one: ShowAllMainRoutes,
    two: JacketRoutes,
    three: PantsRoutes,
  });

  return (
    <ScrollView style={[styles.container, { marginTop: Global() }]}>
      <CustomTabView
        routes={routes}
        renderScene={renderScene}
        scrollEnabled={true}
        tabStyle={{ width: 'auto' }}
        showAll={true}
      />
    </ScrollView>
  );
};

export default ShowAllIndex;

CustomTabView 代码：


const initialLayout = { width: Dimensions.get('window').width };

const CustomTabView = ({
  routes,
  renderScene,
  numberOfTabs,
  indicatorWidth,
  scrollEnabled = false,
  tabStyle,
  showAll,
  indicatorStyle,
}) => {
  const [index, setIndex] = useState(0);

  const renderTabBar = (props) => (
    <TabBar
      {...props}
      scrollEnabled={scrollEnabled}
      indicatorStyle={[
        indicatorStyle,
        {
          backgroundColor: colors.barbie_pink,
          height: 2.5,
          bottom: -1,
        },
      ]}
      style={[styles.tabBar]}
      renderLabel={({ route, focused }) => {
        return (
          <Text
            style={[styles.label, focused ? styles.activeLabel : styles.label]}
          >
            {route.title}
          </Text>
        );
      }}
      tabStyle={tabStyle}
    />
  );

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      style={[styles.container]}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.dark,
  },
  scene: {
    flex: 1,
    marginTop: 5,
  },
  tabBar: {
    backgroundColor: 'transparent',
    shadowOpacity: 0,
    elevation: 0,
    borderBottomWidth: 0.5,
    borderColor: colors.very_light_pink_two,
    marginBottom: 5,
  },
  label: {
    color: colors.very_light_pink_four,
    fontSize: 14,
    lineHeight: 20.8,
    fontFamily: 'NotoSansCJKkr-Regular',
    letterSpacing: -0.35,
  },
  activeLabel: {
    color: colors.barbie_pink,
  },
});

感谢您的回答！

【问题讨论】：

标签： javascript reactjs react-native react-native-tab-view

【解决方案1】：

我认为 TabBar 中的 prop indicatorStyle 可以解决您的问题。

【讨论】：

我通过提供width 尝试使用indicatorStyle，但它无法正常工作..

【解决方案2】：

您可以执行以下操作：

<TabBar
  scrollEnabled                 //add this line to make it scrollable
  tabStyle={{width: 100}}      //and this one to change the tab width
/>

【讨论】：

【解决方案3】：

检查这个解决方案：

const TAB_MARGIN = 24;

<TabBar
...
scrollEnabled
renderIndicator={indicatorProps => {
          const width = indicatorProps.getTabWidth(this.state.index) - TAB_MARGIN
          return <TabBarIndicator {...indicatorProps} width={width} />
}}
indicatorStyle={{
      backgroundColor: '#333',
      height: 4,
      left: TAB_MARGIN / 2,
 }}
...
/>

【讨论】：