像span一样反应原生文本

Question

我试图在模拟显示中遵循解决方案:在React Native中内联,但它不起作用.

我想像HTML一样做同样的事情

第一行很短,所以似乎没有问题,但第二行内容太长,预计在进入下一行之前填满所有空间.

但我的输出看起来像......

<View style={styles.contentView}>
    <Text style={styles.username}>{s_username}</Text>
    <Text style={styles.content}>{s_content}</Text>
</View>

contentView: {
    paddingLeft: 10,
    flex: 1,
    flexDirection:'row',
    flexWrap:'wrap'
},
username: {
    fontWeight: 'bold'
},
content: {

}, 

Answer 1

Reacted native支持嵌套 Text 组件,您必须使用它来获得所需的结果.EG你应该让第二个文本组件嵌套在你的第二个文本组件中,就像这样

<View style={styles.contentView}>
    <Text>
        <Text style={styles.username}
              onPress={() => {/*SOME FUNCTION*/} >
           {s_username}
        </Text>
        <Text style={styles.content}>{s_content}</Text>
    </Text>
</View>

Answer 2

你可以做嵌套文本，因为里面的文本会被认为是像 html 一样的跨度

<View style={styles.contentView}>
  <Text style={styles.content}><Text style={styles.username}>{s_username}</Text> {s_content}</Text>
</View>

contentView: {
  paddingLeft: 10,
  flex: 1,
},
username: {
  fontWeight: 'bold'
},
content: {

},