如何在 React Native 中设置文本换行样式

Question

我有如下文字，

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx（xxxxxxxx）

我有这样的代码：

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

文字太长时的当前结果，

xxxxxxxxxxxxxx
xxxx
(xxxxxxx)

但我想要这样

xxxxxxxxxxxxxx
xxxx (xxxxxxx)

我不想要

xxxxxxxxxxx
xxxx (xxxxx
xx)

Answer 1

使用嵌套的

Text

组件，如下所示：

const addressName = ['xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'xxxxxxxx']

return (
  <View
      style={{
          width: '70%',
      }}>
      <Text>
        {addressName[0]}
        {addressName[1] &&
          <Text>
              {' (' + addressName[1] + ')'}
          </Text>
        }
      </Text>
  </View>
)