Question

我试图内嵌显示Text组件中包裹的View组件。使用内联，我的意思是该文本应始终彼此相邻显示。这是我拥有atm的最佳“解决方案”：

<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>

但这并不总是有效！这就是它呈现出来的：

当所有字符串都只有一行时，它确实起作用。
现在，我知道发生了什么，View始终是矩形，因此在我的示例中，包含第一个字符串的视图与字母a的第一行一样宽，而与两行一样高字母a。
我正在寻找一种解决方法，同时仍使用View。像这样：

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

不幸的是，

不是答案。在我的用例中，它将不起作用，因为我需要能够显示上标，这似乎只能通过更改行高来实现，而且我希望能够添加一些内联图标（使用react-native-向量图标）。

我一直在为这个看似简单的问题而苦苦挣扎，时间太久了，所以终于哭了寻求帮助。有人有主意吗？（如果有一种方法可以显示内联上标，那也可以，那么我可以嵌套Text组件，但是我想没有）

Answer 1

尝试在样式部分使用display: inline-block;

Answer 2

您需要将文本相互放入

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

Answer 3

您的代码缺少flex激活器。这将达到目的：

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

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

Answer 4

很遗憾，您的问题不清楚。但这就是我从您的问题中所了解的

<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>

Answer 5

我找到了定义多行的解决方案。

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'
     }
});

内联显示文本组件并将其包装在视图中

5 个答案: