我无法触发模态组件从其他组件打开

Question

我在一个单独的 js 文件中声明了一个 Modal 组件，我试图让它在 onPress 事件发生时出现。我似乎无法切换它。

我在 Google 上搜索并找到了 React Native open modal from different component，但要么我没有得到任何东西，要么这对我不起作用。

我有以下modal.js：

import React, {Component} from 'react';
import {
  Modal,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  Alert
} from 'react-native';
import config from '../config/colors';

export default class ModalWindow extends Component {
  state = {
    modalVisible: false,
  };


  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={styles.container}>
        <Modal
          animationType="fade"
          transparent={false}
          visible={this.state.modalVisible}
          onDismiss={() => {
            console.log('Modal has been closed.');
          }}>
          <View style={styles.container}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal!</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    marginTop: 22
  }
});

在一个单独的文件中，我有：

import Modal from '../components/modal';

并在我的渲染中声明组件

... other stuff ...

<View style={styles.modalContainer}>
          <Modal isModalVisible={this.state.modalVisible}></Modal>
</View>

... other stuff ...

最后，我设置了一个按钮，这样就可以调用它：onPressAvatar={this.onPressAvatar}

那个方法是：

onPressAvatar = props => {
    console.log("press avatar");
    this.setState({modalVisible: true});
  }

我知道 onPress 有效，因为 console.log() 被触发但模式没有出现。我错过了什么？

Answer 1

您需要像这样使用道具来打开/关闭您的模式：

import React, {Component} from 'react';
import {
  Modal,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  Alert
} from 'react-native';
import config from '../config/colors';

export default class ModalWindow extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Modal
          animationType="fade"
          transparent={false}
          visible={this.props.isModalVisible}
          onDismiss={() => {
            console.log('Modal has been closed.');
          }}>
          <View style={styles.container}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.props.close();
                }}>
                <Text>Hide Modal!</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

请注意，我将 this.state.modalVisible 更改为 this.props.modalVisible 并删除了设置状态的方法

在这里你传递你的状态值

... other stuff ...

<View style={styles.modalContainer}>
          <Modal isModalVisible={this.state.modalVisible} close={this.setState({modalVisible: false})}></Modal>
</View>

... other stuff ...

现在你的组件由你的 Parent 组件控制，它改变自己的状态并传播到你的 Modal。

组件具有 props 和 states，props 是组件在您通过设置 <Modal isModalVisible={value} /> 之类的属性传递数据时接收到的不可变对象。它们通过 this.props 属性可供您的组件使用。另一方面，State 属性用于控制组件的内部状态，使用 this.setState 的每个状态更改都会导致新的渲染调用。因此，在您的代码中，我们需要设置父组件 State 以通知所有子组件有更改。然后你的 Modal 组件会调用自己的方法 render 来显示或隐藏模态框。