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组件。或者，您可以按原样在父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>

希望有帮助！

Answer 2

在按钮查看代码中添加justifyContent:"space-between"为

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

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

参考链接https://css-tricks.com/almanac/properties/j/justify-content/

如何在React-Native中解决模态内两个组件之间的边距问题？

2 个答案: