React Native中如何实现文本与括号内容同行的换行排版

问题分析 #

当前把地址主体和括号内内容拆成两个独立Text组件，父容器开启flexWrap: 'wrap'时，第二个Text会被当作单独flex项，导致括号内容单独换行。同时需要确保括号内内容不会被拆分换行。

解决方案 #

将两部分文本合并到同一个Text组件中，用嵌套Text包裹括号内容并设置whiteSpace: 'nowrap'，让括号内容作为整体不拆分，同时和前序文本保持关联：

<View
    style={{
        width: '77%',
        justifyContent: 'flex-end',
        flexDirection: 'row',
        flexWrap: 'wrap',
    }}>
    <Text
        style={[
            styles.address,
            {
                textAlign: 'right',
                flexWrap: 'wrap',
            },
        ]}
        selectable={true}>
        {addressName[0]}
        {addressName[1] && (
            <Text style={{whiteSpace: 'nowrap'}}>
                {' (' + addressName[1] + ')'}
            </Text>
        )}
    </Text>
</View>

效果说明 #

• 地址主体末尾文本加括号内容能容纳在当前行时，会显示为同一行（即你期望的xxxxxxxxxxxxxx\nxxxx (xxxxxxx)）
• 当整体无法容纳时，括号内容会和地址主体末尾部分一起换行到下一行，不会出现括号单独换行或括号内内容拆分的情况

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