反应始终可见的本机模态

Question

我试图在react native中单击按钮时显示模式。最初，模态状态是隐藏的，在单击按钮时应显示模态。

但是现在每次可见。

//Login.tsx

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, Button, TouchableOpacity, ScrollView } from 'react-native';
import axios from 'axios';
import InvalidUserModal from '../Modal/InvalidUser';

export default class LoginFirst extends Component {
constructor(props) {
    super(props);

    this.state = {
        modalVisible: false
    };
}

triggerModal() {
    this.setState(prevState => {
      return {
        modalVisible: true
      }
    });
 }

render() {
    return (
        <View style={styles.container}>
            <Button 
                onPress = {() => this.triggerModal()}
                title = "Open Modal"
                color = "orange">
            </Button>
            <InvalidUserModal 
                image = '../../../../assets/user.png'
                data = 'Krunal'
                display = { this.state.modalVisible }
            />
         </View>
      );
    }
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#0d2c4f',
    justifyContent: 'center'
}
});

模式内容

import React, { Component } from 'react';
import { Modal, View, Image, Text, StyleSheet } from 'react-native';

const InvalidUser = (props) => (
<View>
    <Modal
        visible={props.display}
        animationType={'slide'}
        onRequestClose={() => console.log('closed')}
    >
        <View>
            <Image
                source={props.image} 
                style={styles.image}
            />
            <Text style={ styles.text}>
                {props.data}
            </Text>
        </View>
    </Modal>
</View>
);

const styles = StyleSheet.create({
image: {
    marginTop: 20,
    marginLeft: 90,
    height: 200,
    width: 200
},
text: {
    fontSize: 20,
    marginLeft: 150
}
});

export default InvalidUser;

上面的代码工作正常。唯一的问题是模态总是显示。永不隐藏。请在下面的屏幕上看看。

代码中还有其他要做的事情吗？真的卡在这里了。

Answer 1

您没有任何触发点来关闭模态，这就是为什么一旦打开模态您就无法将其关闭。

在您的login.tsx

toggleModal = () => this.setState({modalVisible: !this.state.modalVisible})

并将此功能也传递给您的模态

<InvalidUserModal
    display = {this.state.modalVisible}
    toggleModal = {this.toggleModal}
/>

然后，您的模态内容应设置为：

const InvalidUser = (props) => (
    <Modal
        visible={props.display}
        animationType="slide"
        onRequestClose={props.toggleModal} //for android hardware back
    >
        <View>
            <Image
                source={props.image} 
                style={styles.image}
            />
            <Text style={ styles.text}>
                {props.data}
            </Text>
            <Button 
                title="Close"
                onPress={props.toggleModal}
            />
        </View>
    </Modal>
);

Answer 2

您需要一种关闭模型的方法，triggerModal方法仅将模型设置为true，而不会切换模型。如果您希望通过同一按钮可切换模型，则可以改为更改方法：

triggerModal() {
    this.setState({modalVisible: !this.state.modalVisible});
 }

编辑：

您还需要绑定功能

<Button 
  onPress = {() => this.triggerModal.bind(this)}
  title = "Open Modal"
  color = "orange">
 </Button>

如果您的模式仍然没有隐藏，那不是状态问题，则您的模式可能会无意间覆盖了切换按钮。

Answer 3

控制模式是否可见的属性是

import regex as re
txt = '+92 42 111-865-865'
rest = re.match("^(?:(?:\(\+92\)|\+92) (?:42|332)|0332) ?\d+(?:([ -])\d+(?:\1\d+)*)?$", txt)
print rest.groups()

因为函数triggerModal（）控制该值是什么，所以您必须对其进行编辑以使模式可见性发生变化。在您的情况下，triggerModal（）无法返回“ false”。因此，一旦启动，模态将永远无法被隐藏。 更好的解决方案可能是：

 this.props.display

Answer 4

如果您希望通过函数而不是像通过对象那样更新状态，则应按以下方式更新处理程序。 如果您将状态更新为对象，以上两种解决方案也是正确的。

triggerModal() {
    this.setState(prevState => {
      return {
        modalVisible: !prevState.modalVisible
      }
    });
 }

Answer 5

我不确定这是否行得通，但是您应该尝试以下一些操作。

从View删除Modal

const InvalidUser = (props) => (
{// <View> removed }
    <Modal
        visible={props.display}
        animationType="slide" {// you don't need {} if it's a string}
        onRequestClose={() => console.log('closed')}
    >
        <View>
            <Image
                source={props.image} 
                style={styles.image}
            />
            <Text style={ styles.text}>
                {props.data}
            </Text>
        </View>
    </Modal>
{// </View> removed }
);

setState以更好的方式

如果您只想将状态设置为true，则不需要知道prevState。

// inside triggerModal 
this.setState({modalVisible: true});

将箭头函数用于类属性，并避免多次渲染箭头函数。

// arrow function
triggerModal = () => {
    this.setState({modalVisible: true});
}

render() {
    return (
        <View style={styles.container}>
            <Button 
                {// avoid creating a new function on every render }
                onPress = {this.triggerModal}
                title = "Open Modal"
                color = "orange">
            </Button>
            <InvalidUserModal 
                image = '../../../../assets/user.png'
                data = 'Krunal'
                display = { this.state.modalVisible }
            />
         </View>
      );
    }
}

Answer 6

在我的情况下，我正在传递未设置为false的状态属性。由于某些原因，将undefined传递给visible参数将使模式出现。 我通过将状态的默认值设置为false或使用visible={this.state.visible || false}来修复它。