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 ...

现在您的组件由父组件控制，该组件更改其自身状态并传播到Modal。

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

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

1 个答案: