时间戳

首页 > 解决方案 > 如何解决 React-Native 中 Modal 中两个组件之间的边距问题？

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

问题描述

在我在模式内的 react-native 项目中，我在视图中使用了两个按钮。但问题是 - 它们之间没有任何利润。

这是代码

<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
    }
)}

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

在此处输入图像描述

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

标签： javascriptreact-native

解决方案

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

一个可能更脏的解决方案是将两者都包装Buttons在单独的单个父View组件中，并将您的margin属性应用于这些父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>

希望这会有所帮助！

推荐阅读