React Native alignSelf中心并拉伸到maxWidth？

Question

我有以下内容

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

宽度丢失了.

我认为这是因为默认情况下alignSelf是'拉伸'.有没有办法拉伸内容以使用maxWidth并将其居中在屏幕上？

Answer 1

尝试使用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>

Answer 2

使用maxWidth沿width: '100%'的伎俩我。