反应本机模态始终可见 [英] react native modal always visible

问题描述

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

I have tried to display a modal on click a button in react native. Initially the modal state is hidden, on click button modal should show.

但是现在每次可见.

//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;

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

The above code is working fine. The only problem is modal always showing. Never hides. Please have a look on below screen.

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

Is there anything else to be done in the code. Realy stuck here.

推荐答案

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

I'm not sure if this will work but here is some things you should try.

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 .

setState in a better way

If you only want to set the state to true, you don't need to know the 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>
      );
    }
}

这篇关于反应本机模态始终可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！