Reactjs 将自身居中并拉伸到最大宽度？

我有以下几点

<View style={{maxWidth: 700}}>
  <View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}>
    <Text>Left Item</Text>
    <Text>Right Item</Text>
  </View>
</View>

左项
正确的项目

正如我在大型设备上预期的那样（垂直黑线是模拟器屏幕的边缘）

我想做的就是把它放在屏幕中央

当我尝试通过向父对象添加alignSelf:“center”来执行此操作时

<View style={{maxWidth: 700, alignSelf: 'center'}}>
  <View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}>
    <Text>Left Item</Text>
    <Text>Right Item</Text>
  </View>
</View>

左项
正确的项目

宽度丢失了

---

我认为这是因为默认情况下它是“拉伸”的。是否有一种方法既可以拉伸内容以使用maxWidth，又可以使其在屏幕上居中

尝试使用

flex:1

和

maxWidth

使其拉伸，但将宽度限制为700

<View style={{flexDirection:'row', alignItems: 'center', justifyContent: 'center'}}>
    <View style={{flex:1, maxWidth: 700, backgroundColor:'red', flexDirection:'row', justifyContent:'space-between'}}>
        <Text>Left Item</Text>
        <Text>Right Item</Text>
    </View>
</View>

左项
正确的项目

使用

maxWidth

和

width:“100%”

对我来说很有用。

不是很重要，但是alignItem:“center”在这里是不必要的，因为我只关心水平居中。我感兴趣的是，在父视图上设置{{flexDirection:'row'，justifyContent:'center'}}是有效的，但仅设置{{alignItems:'center'}是无效的。我认为两者在水平对齐方面的作用是相同的。感谢

flex:1

这不是非此即彼-你是说两者一起使用吗？是的

flex:1

在我的例子中不起作用，所以我使用了

width:'100%”

以及所需值的

maxWidth

。这会将容器拉伸到窗口宽度的100%，直到达到

maxWidth

。