React Native alignSelf center i rozciągnij do maxWidth?

Question

I mają następujące

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

który działa jako czego można oczekiwać w dużym urządzeniu (czarne linie są pionowe krawędzie ekranu emulatora).

chciałbym zrobić, to centrum to na ekranie.

Gdy próbuję to zrobić dodając alignSelf: 'centrum' do rodzica

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

szerokość jest stracone.

Zakładam, to dlatego, że domyślnie alignSelf to 'odcinek'. Czy istnieje sposób, aby rozciągnąć zawartość tak, aby wykorzystała maxWidth i wyśrodkować ją na ekranie?

Answer 1

Spróbuj użyć flex:1 wraz z maxWidth zarówno uczynić go rozciągnąć, ale ograniczają szerokość do 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>