像跨度一样反应原生文本 [英] React native text like span

问题描述

我尝试遵循

<Text style={styles.username}>{s_username}</Text><Text style={styles.content}>{s_content}</Text></查看>内容视图:{填充左:10，弹性:1，flexDirection:'行',flexWrap:'包裹'},用户名: {fontWeight: '粗体'},内容: {},

解决方案

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

<文字><文本样式={styles.username}onPress={() =>{/*一些功能*/} >{s_username}</文本><Text style={styles.content}>{s_content}</Text></文本></查看>

I tried to follow the solution in Simulate display: inline in React Native but it's not work.

I would like to do the same thing just like in HTML

First line is short so seems like no problem, but second line content is too long and it's expected to fill all the space before go to next line.

But my output is look like...

<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 supports nested Text components, and you must use this to get your desired result. For example, you should have your second text component nested within your second, like so:

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

这篇关于像跨度一样反应原生文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！