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

Question

我是 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 样式，但该组件似乎根本不允许那种级别的自定义。有什么方法可以覆盖它，还是我必须手动实现类似的按钮组？

Answer 1

为了显示 flex 命令，您不需要在所有样式中都使用 display: 'flex' 吗？另外，尝试在 container 样式中使用 flexDirection: 'column' 或 direction: 'column'。因此，您告诉容器在一列中显示所有子项。

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

React Native Elements ButtonGroup - Can't group buttons into columns

javascript

css

buttongroup

react-native

react-native-elements