像 span 一样反应原生文本答案

【问题标题】：React native text like span像 span 一样反应原生文本
【发布时间】：2018-03-14 06:36:31
【问题描述】：

我尝试按照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: {

},

【问题讨论】：

标签： react-native

【解决方案1】：

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

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

【讨论】：

我如何在用户名中添加“TouchableOpacity”？
您可以通过使用onPress 属性以类似的方式使用Text 组件。请注意，您现在将拥有一个单独的 Text 组件。我已经编辑了我的答案以显示这一点
使用作为父级或
使用包装其他组件会导致子元素被视为内联 - 这些子元素中会忽略诸如边距之类的内容，并且与包装相比，定位将被丢弃中的文本元素，将其子元素视为块组件。

【解决方案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: {

},

【讨论】：