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是'stretch'。有没有办法拉伸内容以使用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%'一起使用对我有用。