React Native - 根据标签栏文本宽度更改指示器宽度 (react-native-tab-view)

Question

我正在使用 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,
  },
});

感谢您的解答！

Answer 1

我觉得TabBar中的道具indicatorStyle 可以解决你的问题

Answer 2

您可以执行以下操作：

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

Answer 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,
 }}
...
/>

React Native - 根据标签栏文本宽度更改指示器宽度 (react-native-tab-view)

React Native - Changing the indicator width according to tab bar text width (react-native-tab-view)

javascript

reactjs

react-native

react-native-tab-view