【问题标题】: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: {
    
    }, 
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-03-08
      • 1970-01-01
      • 2020-12-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-04-17
      相关资源
      最近更新 更多