代码之家 › 专栏 › 技术社区 › Bram Vanbilsen

在视图中显示内嵌和换行的文本组件

react-native

Bram Vanbilsen · 技术社区 · 6 年前

我想展示 Text View 组件内联。对于inline,我的意思是文本应该一直显示在彼此旁边。这是我所拥有的最好的“解决方案”:

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
    <View>
        <Text>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text>
    </View>
    <View>
        <Text style={{ fontWeight: 'bold' }}>b</Text>
    </View>
    <View>
        <Text>cccccccccccccccccccccccccccccc</Text>
    </View>
    {/* Possibly an icon, or text with a different lineheight...*/}
</View>

但它不是一直有效的!这是它呈现出来的:

现在,我知道怎么回事了,a 视图 总是一个矩形,因此在我的示例中,包含第一个字符串的视图与字母a的第一行一样宽,与字母a的两行一样高。
视图 s、所以像这样:

<Text>
    <Text>...</Text>
    <Text>...</Text>
</Text>

文本 组件,但我想没有)

5 回复 | 直到 6 年前

Nima 6 年前

你需要把文字放在彼此里面

 <View style={{ flexDirection: 'row' }}>
   <Text>aaaaaaaaaaaaaaaaaaaaaaaaaasdadasdadaaaaaaaaaaaaaaaaaaaaaaaa
    <Text style={{ fontWeight: 'bold' }}>asdadasdab
     <Text>cccccccccccccccccccccccccccccc</Text>
    </Text>
   </Text>
 </View>

Debabrata 6 年前

display: inline-block; 在“样式”部分

Andriy Klitsuk 6 年前

<View style={{ flex: 1, flexDirection: 'row'}}>  
  <Text>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text>
  <Text style={{ fontWeight: 'bold' }}>b</Text>
  <Text>cccccccccccccccccccccccccccccc</Text>
</View>

您必须指定何时使用FlexBox布局。

Mahdi Bashirpour 6 年前

不幸的是,你的问题不清楚。但这就是我从你的问题中理解的

<View style={{ flex: 1}}>  
   <Text>aaaaaaaaaaaa</Text>
   <View style={{ flexDirection: 'row', justifyContent: "flex-start"}}>
       <Text style={{ fontWeight: 'bold' }}>b</Text>
       <Text>ccccccccccccccccccc</Text>
   </View>
</View>

Mahdi khodabandelu 6 年前

export default class App extends React.Component {
    render() {
        return <View style={styles.container}>
            <View ><Text >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text></View>
            <View ><Text style={{fontWeight: 'bold'}}>bbbbb</Text></View>
            <View ><Text >ccccc</Text></View>
        </View>;
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column'
    }
});

你可以用下面的代码隐藏溢出文本

export default class App extends React.Component {
constructor(){
    super()
    this.state = {
        mytextvar :'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
        maxlimit:50
    };
}

render() {
    return <View style={styles.container}>
        <View ><Text >{((this.state.mytextvar).length > this.state.maxlimit) ?
            (((this.state.mytextvar).substring(0,this.state.maxlimit-3)) + '...') :
            this.state.mytextvar}</Text></View>
        <View ><Text style={{fontWeight: 'bold'}}>bbbbb</Text></View>
        <View ><Text >ccccc</Text></View>
    </View>;
   }
}
const styles = StyleSheet.create({
    container: {
       flex: 1,
       flexDirection: 'column'
     }
});