时间戳

首页 > 解决方案 > 如何设置视图组件的样式以在两个按钮之间添加空间？

react-native - 如何设置视图组件的样式以在两个按钮之间添加空间？

问题描述

我是 React Native 前端开发的新手。只是想掌握样式表的窍门。我在具有以下样式的视图中放置了两个按钮。

buttonscontainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
    }

在此处输入图像描述

这是完整的 jsx 和样式

<Modal transparent={true} visible={true}>
            <View style={styles.dimmedBackground}>
                <View style={styles.modalContainer}>
                    <Text>type something</Text>
                    <TextInput style={styles.input} />
                    <View style={styles.buttonsContainer}>
                        <Button title="Cancel" color="coral" />
                        <Button title="Add" color="coral" />
                    </View>
                </View>
            </View>
        </Modal>

const styles = StyleSheet.create({
    dimmedBackground: {
        backgroundColor: '#000000aa',
        flex: 1,
        justifyContent: 'center',
    },
    modalContainer: {
        backgroundColor: '#ffffff',
        margin: 35,
        padding: 30,
        borderRadius: 10,
    },
    input: {
        marginBottom: 10,
        paddingVertical: 6,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
    },
    buttonsContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
});

一段时间以来，我一直在尝试在两个按钮之间创建空间，对于如何实现这一点非常迷茫。

我应该如何设置包装两个按钮的视图组件的样式，以便它们之间有一点水平空间？谢谢

标签： react-native

解决方案

您可以使用 'space-between' 作为理由，提供宽度

 buttonscontainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginHorizontal: 5,
        width:'40%',
        alignSelf:'flex-end'
    },

推荐阅读