如何让文字跟随进度条

Question

如何让我的

currentProgresstext

跟随进度条，目前看来将progressWidth设置为100会使文本出现在左侧（跟随进度条）。当

progressWidth

很小时，进度条的文本就会消失。我的问题是如何让文字跟随进度条？

这是我的代码

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}%`}]}>
                    {/*<Feather name="shopping-cart" size={24} color="white" />*/}
                    <Text style={styles.currentProgressText}>6 Kg</Text>
                </View>
            </View>
            {/*<View style={styles.line}>*/}
            {/*    <Text style={styles.lineText}>18 Kg</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.separator}><Text></Text></View>*/}
            {/*<View style={styles.rightContainer}>*/}
            {/*</View>*/}
        </View>
    );
};

const styles = StyleSheet.create({
    overlay: {
        flexDirection: 'row',
        height: 60,
        borderRadius: 24,
        backgroundColor: '#cfebf7',
        // justifyContent: 'space-between',
        alignItems: 'center',
    },
    content: {
        paddingHorizontal: 20
    },
    currentProgress: {
        flexDirection: 'row',
        height: 60,
        borderRadius: 24,
        backgroundColor: 'skyblue',
        // justifyContent: 'space-between',
        alignItems: 'center',
    },
    currentProgressText: {
      width: "100%",
      backgroundColor: "red",
      color: "white",
      fontSize: 16,
      // flex: 1,
      fontWeight: "bold",
      textAlign: "right",
      alignSelf: "flex-end"
    },
    line: {
        padding: 0,
        borderLeftWidth: 1,
        height: "100%",
        position: "absolute",
        borderLeftColor: "black",
    },
    lineText: {
        alignItems: "center"
    },
    rightContainer: {
        width: '30%',
        flex: 1,
        marginLeft: 4,
    },
});

export default CartStatusOverlay;
 

这是当前

progressWidth

为 50

的样子

这就是我想要实现的目标：

Jsfiddle：https://jsfiddle.net/psahmad/fxpmnh15/

Answer 1

我在你的

fiddle

项目中进行了尝试，并通过调整以下类获得了结果

        .content {
            padding: 0 20px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-end
        }

        .currentProgressText {
            width: 100%;
            color: white;
            font-size: 16px;
            font-weight: bold;
            text-align: right;
        }