React Native Elements ButtonGroup - 无法将按钮分组到列中

问题描述

我是 React Native 的新手，在设计 UI 元素时遇到了问题。我正在使用 react-native-elements ButtonGroup 并且很难弄清楚如何将按钮分成两列。

我目前有这样的： Current Button Layout

我想将它们按这样的列分组：

Buttons Grouped as Desired

代码如下：

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。因此，您告诉容器在列中显示所有子项。