Question

我有一个在单击按钮时显示的模态，并且该模态是使用prop从另一个组件中获取的。

模态中有一个关闭模态的按钮，如何关闭模态，请单击该按钮。我已经尝试过，但是没有用。

//InvalidUser

const InvalidUser = (props) => (
<Modal
    visible={props.display}
    animationType="slide"
    onRequestClose={() => console.log('closed')}
>
    <View style={styles.modalBox}>
        <View style={{width: 300}}>
            <Text style={styles.text}>
                {props.data}
            </Text>
            <TouchableOpacity
                onPress={() =>
                    this.closeModal()
                }>
                <Text style={styles.buttonOk}>Ok</Text>
            </TouchableOpacity>
        </View>
    </View>
</Modal>
);

//登录

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

    this.state = {
        email: '',
        modalVisible: false
    };
}

nextBtn = () => {
    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

    if (this.state.email !== '') {
        if (reg.test(this.state.email) === false) {

        }
        else {
            this.setState({modalVisible: true});
        }
    }
}

render() {
    let notRegistered = this.state.email+' is not recognized as a registered user. Please contact us for further assistance.';

    return (
        <View style={styles.container}>
            <ScrollView contentContainerStyle={styles.scroller}>
                <View
                    style={styles.inputSection}
                >
                    <Text style={styles.label}>Email Address:</Text>
                    <View style={styles.section}>
                        <Image
                            style={styles.icon}
                            source={require('../../../../assets/user.png')}
                        />
                        <TextInput
                            style={styles.input}
                            placeholder='johnsmith@gmail.com'
                            underlineColorAndroid='transparent'
                            onChangeText={(text) => this.setState({email:text})}
                        />
                    </View>
                    <TouchableOpacity 
                        style={styles.button}
                        onPress={() =>
                            this.nextBtn()
                        }
                    >
                            <Text style={styles.next}>Next</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
            <InvalidUserModal
                data={notRegistered}
                display={this.state.modalVisible}
            />
        </View>
    );
}
}

上面的代码完美地显示了模式，但是我无法关闭模式。有什么办法可以关闭的。

请查看下图。

Answer 1

从父组件中，创建closeModal函数并将其传递给InvalidUserModal

["b", "b", "b"][1]

并在InvalidUserModal中按下按钮调用它

function getCorrespondingIndexInFilteredArray(array, index, filterValue) {...}

getCorrespondingIndexInFilteredArray(["a", "c", "b", "c", "b"], 4, "b") // 1
getCorrespondingIndexInFilteredArray(["a", "c", "b", "c", "b", "b"], 4, "b") // 1
getCorrespondingIndexInFilteredArray(["b", "b"], 0, "b") // 0
getCorrespondingIndexInFilteredArray(["b", "b"], 1, "b") // 1
getCorrespondingIndexInFilteredArray(["a", "a"], 0, "b") // either 0 or -1 is alright here

Answer 2

对于家长，将closeModal方法作为道具传递给组件

  class LoginFirst extends Component {
      closeModal = () => {
        this.setState({modalVisible: false});
      }
      render() {
        return (
          <InvalidUserModal
            data={notRegistered}
            display={this.state.modalVisible}
            closeModal={this.closeModal}
          />
        )
      }
    }

用于模态分量

<Modal
  visible={props.display}
  animationType="slide"
  onRequestClose={() => console.log('closed')}
>
  <TouchableOpacity onPress={props.closeModal}>
    <Text style={styles.buttonOk}>Ok</Text>
  </TouchableOpacity>
</Modal>

单击按钮时关闭模式响应本机

2 个答案: