React Native alignSelf center並拉伸到maxWidth？

我有以下React Native alignSelf center並拉伸到maxWidth？

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

其工作作爲我期望大的裝置上（垂直黑線是模擬器的屏幕的邊緣）。

所有我想要做的就是在屏幕上中心這一點。

當我試圖通過增加alignSelf這樣做：「中心」於母公司

 <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並將其居中在屏幕上？

來源

2016-09-16 Steven

嘗試使用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>

來源

2016-09-16 19:02:30 FuzzyTree

不是非常重要，但alignItem：「中心」是沒有必要的，因爲在這裏，因爲我只在乎水平居中。我很感興趣的是在父視圖上設置{{flexDirection：'row'，justifyContent：'center'}}，但只設置{{alignItems：'center'}}不起作用。我會假定兩者都會在水平對齊方面做同樣的事情。 – Steven

React Native alignSelf center並拉伸到maxWidth？

回答

相關問題