【问题标题】:Multiline text with different widths?不同宽度的多行文本?
【发布时间】:2018-08-08 08:32:05
【问题描述】:

是否可以在 React Native 中制作多行文本,其中行的长度不同?

我的情况有一个示例地址(可以是任何字符串),其中相同长度的行:

const address = 'Circular Quay, Alfred St, Sydney 2021 NSW Alexandria';
return ( 
    <View style={{width: 80}}>
        <Text>{address}</Text>
    </View>
)

想要的结果:



谢谢!

【问题讨论】:

    标签: react-native react-native-text


    【解决方案1】:

    您可以通过在文本样式中应用不同的宽度来达到此目的

    <Text style={{width='200'}}>Text 1</Text>
    <Text style={{width='100'}}>Text 2</Text>
    

    【讨论】:

    • 不幸的是,这不起作用,因为它不是等宽字体,不知道在哪里将字符串分成两个不同的字符串。
    • 重要的是我只有一个字符串,而不是你的例子中的两个。更新了问题!
    • 您可以使用 address.split(',') 并将前两项放在 中,将第三项放在另一个
    【解决方案2】:

    您的问题的解决方案可以是 Text Component 中的 textAlign prop。

    <View style={{width: 80}}>
        <Text style={{ textAlign:'center'}}>{address}</Text>
    </View> 
    

    【讨论】:

      猜你喜欢
      • 2011-03-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-07-12
      • 1970-01-01
      相关资源
      最近更新 更多