Fatal编程技术网
  • react-native/
  • React native maxWidth如何分配可用空间？

React native maxWidth如何分配可用空间？

react-native

React native maxWidth如何分配可用空间？,react-native,React Native,我有100%宽度的视图，其中包含三种不同的视图 <View> <View style={{maxWidth: '40%'}}> </View> <View style={{maxWidth: '40%'}}> </View> <View style={{maxWidth: '30%'}}> </View> </View>

我有100%宽度的视图，其中包含三种不同的视图

  <View>
     <View style={{maxWidth: '40%'}}>
     </View>
     
     <View style={{maxWidth: '40%'}}>
     </View>

     <View style={{maxWidth: '30%'}}>
     </View>
  </View>
结果如下:

尽管如此，第一个和第三个项目有足够的空间，在项目后面还有很多空间。如果我使用
宽度
则无论
文本
长度如何，都将分配固定宽度

我们如何根据
Text
length使用
maxWidth
来有效利用可用空间？
谢谢。

我建议您使用
flex
和
alignSelf
来有效利用空间

<View style={{ flex: 1 }}>
 <View style={{ alignSelf: 'flex-start' }}>
   <Text>..</Text>
 </View>
 
 <View style={{ alignSelf: 'flex-start' }}>
   <Text>..</Text>
 </View>

 <View style={{ alignSelf: 'flex-start' }}>
   <Text>..</Text>
 </View>
</View>


..
..
..
通过此实现，您可以使用所有宽度空间，并为每个文本提供足够的空间。

我建议您使用
flex
和
alignSelf
，以便有效地使用空间

<View style={{ flex: 1 }}>
 <View style={{ alignSelf: 'flex-start' }}>
   <Text>..</Text>
 </View>
 
 <View style={{ alignSelf: 'flex-start' }}>
   <Text>..</Text>
 </View>

 <View style={{ alignSelf: 'flex-start' }}>
   <Text>..</Text>
 </View>
</View>


..
..
..
通过此实现，您可以使用所有的宽度空间，并为每个文本提供足够的空间。

justifyContent:“间隔空间”
将以同样占用空间的方式排列项目，但是我希望项目根据
Text
长度占据空间。
flex start
将使内容从开始位置出现。这与根据
Text
length
占据
宽度无关。
justify content:'space-between'
将以同样占用空间的方式排列项目，但是我希望项目根据
文本
长度占据空间。
弹性开始
将使内容从开始位置出现。这与根据
文本
长度占据
宽度
无关