React Native中实现currentProgressText跟随进度条的方法问询

问题核心：进度条宽度较小时，文本会被容器挤压消失，需要实现文本始终跟随进度条右端显示的效果。

修改思路 #

1. 将进度文本从进度条的内容容器中独立出来，通过绝对定位绑定到进度条的右端位置
2. 调整文本样式，确保在进度条宽度变化时始终保持在可视区域内
3. 优化进度条容器的布局逻辑，避免padding挤压有效宽度

修改后的完整代码 #

import { Text, View, StyleSheet } from 'react-native';
import React, { useState } from 'react';
import { responsiveWidth } from 'react-native-responsive-dimensions';
import { Feather } from '@expo/vector-icons';

type Props = { containerStyle?: object };

const CartStatusOverlay: React.FC<Props> = (): JSX.Element => {
    const minTotalOrderQuantity = 18;
    const maxTotalOrderQuantity = 20;

    const width = responsiveWidth(90);

    // Max would be 90
    const [progressWidth, setProgressWidth] = useState(10);

    const convertKgToPercentage = (kg: number) => {
        return kg / maxTotalOrderQuantity * 100;
    }

    return (
        <View
            style={[
                styles.overlay,
                { width: width },
            ]} >
            <View style={styles.currentProgress}>
                <View style={[styles.content, { width: `${progressWidth}%` }]} />
                {/* 将文本移到currentProgress容器下，绝对定位 */}
                <Text style={styles.currentProgressText}>6 Kg</Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    overlay: {
        flexDirection: 'row',
        height: 60,
        borderRadius: 24,
        backgroundColor: '#cfebf7',
        alignItems: 'center',
    },
    content: {
        // 移除padding，避免挤压进度条有效宽度
        height: '100%',
        borderRadius: 24,
        backgroundColor: 'skyblue',
    },
    currentProgress: {
        flexDirection: 'row',
        height: 60,
        width: '100%',
        position: 'relative', // 作为绝对定位的父容器
        alignItems: 'center',
    },
    currentProgressText: {
        color: "white",
        fontSize: 16,
        fontWeight: "bold",
        position: 'absolute',
        right: 12, // 调整右侧间距，避免贴边
        backgroundColor: "red",
        paddingHorizontal: 8, // 增加内边距，确保文本不被截断
    },
    line: {
        padding: 0,
        borderLeftWidth: 1,
        height: "100%",
        position: "absolute",
        borderLeftColor: "black",
    },
    lineText: {
        alignItems: "center"
    },
    rightContainer: {
        width: '30%',
        flex: 1,
        marginLeft: 4,
    },
});

export default CartStatusOverlay;

关键改动说明 #

• 布局结构调整：把进度文本从content容器中移出，放到currentProgress容器内，让文本脱离进度条宽度的限制
• 绝对定位设置：给currentProgress添加position: 'relative'，让文本的绝对定位基于进度条容器，通过right: 12控制文本与进度条右端的距离
• 样式优化：移除content的paddingHorizontal，避免占用进度条有效宽度；给文本添加paddingHorizontal，确保文本内容不会被截断
• 宽度控制：currentProgress设置width: '100%'，确保进度条容器占满父容器宽度

这样修改后，无论progressWidth设置为多少，文本都会始终显示在进度条的右端位置，不会因进度条宽度变小而消失。

内容的提问来源于stack exchange，提问作者user9132502