React Native 中心按钮彼此对齐

Question

我开始使用 React native 和 React native Elements。我试图让按钮一个接一个地排列，按钮与左右两侧之间有一些 space。

<View style={styles.container}>
    <ThemeProvider>
        <Button
            buttonStyle={styles.btnStyle}
            icon={
                <Icon
                name="arrow-right"
                size={15}
                color="white"
                />
            }
            title="My BTN 1"
        />
        <Button
            buttonStyle={styles.btnStyle}
            icon={
                <Icon
                name="arrow-right"
                size={15}
                color="white"
                />
            }
            title="My BTN 2"
        />
        <Button
            buttonStyle={styles.btnStyle}
            icon={
                <Icon
                name="arrow-right"
                size={15}
                color="white"
                />
            }
            title="My BTN 3"
        />
    </ThemeProvider>
</View>

以及样式：

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btnStyle: {
        marginBottom: 5,
        width: '90%'
    }
});

一个并排显示，不符合移动设备的大小。

谢谢

Answer 1

您需要从样式表中删除这个

flexDirection: 'row'

或者，只需将其更改为

flexDirection: 'column'

React Native 中心按钮彼此对齐

React Native center buttons align one under another

react-native

react-native-elements