React Native - 文本被截斷太多

Question

我有以下組件

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

當我從另一個組件引用它並將包裝器組件的寬度設置為低於某個值時，文本被截斷太多，留下很大的差距。

<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% 的代碼會生成下面的寬度為 40%的代碼

當我將寬度設置為 50% 或更大時，文本會按我想要的方式截斷Width at 50%

我想要的是：

黃色背景以所有寬度延伸到紅色容器的末端

請注意，如果 label 的長度不夠長而無法截斷，則黃色應僅包裹文本，而不會拉伸到紅色容器的末尾

零食： https://snack.expo.dev/@danro/inputlabel

短 label 的預期結果

長 label 的預期結果

Answer 1

您是否嘗試將它與flex一起使用？ 我會嘗試給flex:1 。

Answer 2

您可以在文本中添加 flex: 1 或 width:"100%" ..

---

編輯：

在InputLabel.tsx中刪除 flexDirection: row 和 alignItems: center 從動畫視圖

Answer 3

嘗試：

<Text
     {...props}
     numberOfLines={1}
     ellipsizeMode={'head' | 'middle' | 'tail' | 'clip'}
     onPress={props.onPress}
     style={style.textStyle}>
     Some long long long text
  </Text>