如何在React Native中将按钮居中

Question

我是React Native的新手，目前正在学习该技术。
我开始创建一个带有按钮的简单布局。
但是我的按钮向左对齐，如何使其居中？
我试过alignItems: 'center和justifyContent: 'center
但这不起作用。
我希望有人可以帮助我，让我可以继续进行其他工作

我的按钮如下所示：

这是我的一些代码：

 <Container> <View style={styles.tabContent}> <Text style={styles.title}>Engineering</Text> <Text style={styles.subtitle}>Inquiries Need Action</Text> </View> <View style={styles.buttonsContainer}> <Button bordered dark style={styles.buttonTop}> <View style={styles.buttonText}> <Text>10</Text> <Text>Dark</Text> </View> <View style={styles.buttonIcon}> <Icon name='ios-construct-outline' style={styles.icons}/> </View> </Button> <Button bordered dark style={styles.button}> <View style={styles.buttonText}> <Text>10</Text> <Text>Dark</Text> </View> <View style={styles.buttonIcon}> <Icon name='ios-construct-outline' style={styles.icons}/> </View> </Button> <Button bordered dark style={styles.button}> <View style={styles.buttonText}> <Text>10</Text> <Text>Dark</Text> </View> <View style={styles.buttonIcon}> <Icon name='ios-construct-outline' style={styles.icons}/> </View> </Button> <Button bordered dark style={styles.buttonView}> <View> <Text style={styles.text}>VIEW ALL</Text> </View> </Button> </View> </Container> 

这是样式：

 buttonsContainer:{ backgroundColor: '#7f8c8d', alignItems: 'center', justifyContent: 'center' }, buttonTop:{ marginTop: 20, width: 250, justifyContent: 'center' }, button:{ marginTop: 5, width: 250, justifyContent: 'center' }, buttonView:{ marginTop: 15, width: 250, justifyContent: 'center', backgroundColor: '#000' }, buttonIcon:{ backgroundColor: '#000' }, tabContent:{ backgroundColor:'#fff' }, buttonText:{ flexDirection: 'row', backgroundColor: '#fff', width: 100 }, text:{ color: '#fff', fontWeight: 'bold' }, title:{ marginTop: 20, marginLeft: 20, fontSize: 20, fontWeight: 'bold' }, subtitle:{ color: '#7f8c8d', marginLeft: 20, fontSize: 15, } 

Answer 1

在buttonContainer上方进行包装视图，并为其指定样式= {{flex：1}}

 <View style={{flex:1}}>
  <View style={styles.buttonsContainer}>
  ....
 </View>
</View>

alignItems和justifyContent是在父容器中定义flex时适用的flex属性