OStack程序员社区-中国程序员成长平台

标题: javascript - 如何在 React Native 中居中按钮 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 19:38
标题: javascript - 如何在 React Native 中居中按钮

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

---

Best Answer-推荐答案

在 buttonContainer 上方创建一个包装器 View 并赋予它 style={{flex: 1}}

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

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

关于javascript - 如何在 React Native 中居中按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48374711/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4