像span一样反应原生文本

Question

我尝试按照Simulate display: inline in 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: {

},