React Native：实现文本省略且不破坏父容器布局比例的非像素方案

问题核心是Text组件未被父容器的宽度约束住——React Native的Text默认会优先根据内容计算宽度，哪怕父容器设了百分比宽度，也可能撑破布局。不用固定像素宽度的话，只需让Text继承父容器的可用宽度，配合numberOfLines和ellipsizeMode就能实现自动省略，同时维持盒子比例。

修改后的代码如下：

export default function DayMetadataCard({ metadata, id }) {
    return (
        <Row
            bg="offBlack.400"
            borderBottomLeftRadius={16}
            borderBottomRightRadius={16}
            borderWidth={1}
            borderColor="offBlack.600"
            flex={1}
        >
            <Box width="33%" borderRightWidth={1} borderColor="offBlack.600">
                <Box flex={1} borderColor="offBlack.600" borderBottomWidth={1} p={2}>
                    {/* 用width: '100%'让Text占满父容器宽度，受父Box的33%宽度约束 */}
                    <Text numberOfLines={1} ellipsizeMode="tail" width="100%">
                        这里放超长文本测试，比如Lorem ipsum dolor sit amet consectetur adipiscing elit
                    </Text>
                </Box>
                <Box flex={1} p={2}>
                    <Text numberOfLines={1} ellipsizeMode="tail" width="100%">
                        这里放超长文本测试，比如Lorem ipsum dolor sit amet consectetur adipiscing elit
                    </Text>
                </Box>
            </Box>
            <Box width="67%">
                <Box flex={1} borderColor="offBlack.600" borderBottomWidth={1} p={2}>
                    <Text numberOfLines={2} ellipsizeMode="tail" width="100%">
                        这里放超长文本测试，比如Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </Text>
                </Box>
                <Box flex={1} p={2}>
                    <Text numberOfLines={2} ellipsizeMode="tail" width="100%">
                        这里放超长文本测试，比如Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </Text>
                </Box>
            </Box>
        </Row>
    )
}

关键改动说明： #

• 移除Text组件的固定像素宽度，替换为width: '100%'，让Text完全填充父Box的宽度，而父Box的宽度由上层的33%/67%比例约束，以此维持整体布局比例。
• 给承载Text的Box添加p={2}（内边距），避免文本贴边，可根据需求调整数值，不影响核心布局逻辑。
• 保留各级容器的flex={1}设置，让上下两个盒子均分垂直空间，维持高度比例。

如果用原生React Native的View和Text组件，逻辑完全一致——把Native Base的Row换成View并设置flexDirection: 'row'，Box换成View，width="100%"保留即可。

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