react-native - react 像跨度一样的 native 文本

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

React Native支持嵌套的Text组件，您必须使用它来获得所需的结果。例如，您应该将第二个文本组件嵌套在第二个文本组件中，如下所示:

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