如何解决React Native Elements ButtonGroup - 无法将按钮分组到列中
我是 React Native 的新手,在设计 UI 元素时遇到了问题。我正在使用 react-native-elements ButtonGroup 并且很难弄清楚如何将按钮分成两列。
我目前有这样的: Current Button Layout
我想将它们按这样的列分组:
代码如下:
import {Text,StyleSheet,View} from 'react-native'
import {ButtonGroup} from 'react-native-elements';
export default function Form(props) {
const buttons = [ 'Apples','Bananas','Oranges','Pears','Peaches']
return (
<View style = {styles.container}>
<Text style = {styles.text}>Which fruit would you like? </Text>
<ButtonGroup
containerStyle={styles.buttonContainer}
buttonStyle ={styles.button}
buttons = {buttons}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
marginTop: 200,alignItems: 'center',justifyContent: 'center',},buttonContainer: {
flexWrap: 'wrap'
}
})
如您所见,我目前在按钮容器中将 flexWrap 设置为 'wrap',这并没有达到预期的效果。我尝试添加各种 css 样式,但似乎该组件根本不允许这种级别的自定义。有没有办法覆盖它,或者我必须手动实现一个类似的按钮组?
解决方法
为了显示 flex 命令,您的所有样式都不需要 display: 'flex'
吗?此外,尝试在您的 flexDirection: 'column'
样式中使用 direction: 'column'
或 container
。因此,您告诉容器在列中显示所有子项。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。