我有以下组件

const InputLabel => (props: InputLabelProps) {
    return (
        <Animated.View
            style={[
                StyleSheet.absoluteFill,
                {
                    justifyContent: 'flex-start',
                    flexDirection: 'row',
                    backgroundColor: 'red',
                    alignItems: 'center',
                },
            ]}
        >
            <Animated.Text
                onLayout={onLayoutAnimatedText}
                numberOfLines={1}
                ellipsizeMode="tail"
                textBreakStrategy={'highQuality'}
                style={[
                    animatedLabelContainerStyle,
                    {
                        textAlign: 'right',
                        fontSize: fontSize,
                        color: labelColor,
                        backgroundColor: 'yellow',
                    },
                ]}
            >
                {label}
            </Animated.Text>
        </Animated.View>
    );
}

当我从另一个组件引用它，并将 Package 器组件的宽度设置为低于某个值时，文本被截断太多，留下了一个很大的间隙。

<View style={{ width: '40%', height: 50, borderWidth: 1, backgroundColor: 'yellow' }}>
                <InputLabel
                    fontSize={16}
                    hasOutline={false}
                    label={'label 12345678901234567890123456789012345678901234567890'}
                    // labelAnimatedValue={labelAnimation}
                    labelColor={'black'}
                    labelLayout={labelLayout}
                    OffsetY={2} //container borderWidth
                    placeholderColor={'red'}
                    showPlaceholder={false}
                    onLayoutAnimatedText={handleLayoutAnimatedText}
                />
</View>

上述宽度为40%的代码生成以下Width at 40%
当我将宽度设置为50%或更大时，文本将按照我的意愿截断Width at 50%
我想要的是：
黄色背景以所有宽度延伸到红色容器的末端
请注意，如果标签长度不足以截断，黄色应仅包裹文本，而不延伸至红色容器的末端
零食：https://snack.expo.dev/@danro/inputlabel
短标签

的预期结果
长标签

的预期结果