javascript - 如何解决 React-Native 中 Modal 中两个组件之间的边距问题？

Question

在模态内的我的 react-native 项目中，我在 View 中使用了两个按钮。但问题是 - 它们之间没有余量。

这是代码

<View style={styles.container}>
    <Modal 
        animationType={"slide"} 
        transparent={false}
        visible={this.state.ModalVisibleStatus}
        onRequestClose={() => { console.log("Modal has been closed.") }}
    >
        {/*All views of Modal*/}
        {/*Animation can be slide, slide, none*/}
        <View style={styles.modal}>
            <Text style={styles.text}>Modal is open!</Text>

            <View style={styles.inputContainerEmail}>
                <Image style={styles.inputIcon} source={{ uri: this.state.catImage }} />
                <TextInput style={styles.inputs}
                    placeholder="Email Address"
                    keyboardType="email-address"
                    underlineColorAndroid='transparent'
                    onChangeText={(text) => this.updateValue(text, 'email')} />
            </View>

            <View style={{ flexDirection: 'row' }}>
                <Button style={{ marginRight: 10 }} title="Save" onPress={() => {
                    this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
                }} />

                <Button style={{ marginLeft: 10 }} title="Close" onPress={() => {
                    this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
                }} />
            </View>
        </View>
    </Modal>
</View>


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#DCDCDC',
    },
    modal: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#aaaa',
        padding: 100
    },
    text: {
        color: '#3f2949',
        marginTop: 10
    }
)}

运行这些代码后得到以下输出-

那么如何在这两个按钮之间添加边距呢？

Answer 1

React-Native Button 的功能非常有限，据我所知，不支持样式属性。我建议考虑使用 TouchableOpacity或 TouchableNativeFeedback定制您的需求。

一个可能更脏的解决方案是将两个 Buttons 包装在一个单独的单独的父 View 组件中，并将 margin 属性应用于这些父 View 组件。或者，您可以按原样在父级 View 组件上指定 justifyContent:'space-between' 并查看是否也能提供所需的结果。例如，多 View 方法可能如下所示:

<View style={{flexDirection: 'row'}}>
    <View style={{flex:1 , marginRight:10}} >
         <Button title="Save" onPress={() => {
                this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
         }} />
    </View>
    <View style={{flex:1}} >
        <Button title="Close" onPress={() => {
                this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
        }} />
    </View>
</View>

希望对您有所帮助!