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

问题描述

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

这是预期的结果：

显示所有索引代码：

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',{ key: 'two',{ 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;

自定义标签视图代码：

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

感谢您的回答！

解决方法

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