Modal不会在本机中打开。给出“未定义不是对象”错误

Question

我正在尝试使用来自https://github.com/maxs15/react-native-modalbox的Modal来打开FlatList中的项目。但是，我收到一个错误'undefined不是一个对象（评估'this.refs.modal.open'），并且无法弄清楚我做错了什么。有人可以帮帮我吗？

这是我的代码（FlatList和ModalBox）：

    export default class List extends React.PureComponent {
  constructor(props) {
    super(props);
    this.fetchMore = this._fetchMore.bind(this);
    this.fetchData = this._fetchData.bind(this);
    this.openModal =  this.openModal.bind(this);
    this.state = {
      isLoading: true,
      isLoadingMore: false,
      _data: null,
      _dataAfter: '',
      isOpen: false,
      isDisabled: false,
      swipeToClose: true,
    };
  }

  onClose() {
    console.log('Modal just closed');
  }

  onOpen() {
    console.log('Modal just openned');
  }

  onClosingState(state) {
    console.log('the open/close of the swipeToClose just changed');
  }
openModal(id) {
    this.modal.open();
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" />
        </View>
      );
    } else {
      return (

        <FlatList
        numColumns={3}
          data={this.state._data}
          renderItem={({item: rowData}) => {
            return (
                <View style={styles.container}>
                <View style={styles.imageWrapper}>
                <TouchableOpacity
                onPress={this.openModal}>
                  <Image
                    style={styles.image }
                    source={{
                      uri: rowData.data.icon_img === '' ||
                        rowData.data.icon_img === null
                        ? 'https://via.placeholder.com/70x70.jpg'
                        : rowData.data.icon_img,
                    }}
                  />
                </TouchableOpacity>
              </View>
 <Modal
          style={styles.modal}
           ref={(modal) => this.modalOpen = modal}
          swipeToClose={this.state.swipeToClose}
          onClosed={this.onClose}
          onOpened={this.onOpen}
          onClosingState={this.onClosingState}>
            <Text style={styles.text}>Basic modal</Text>
        </Modal>
           </View>
            );
          }}
          keyExtractor={(item, index) => index}
        />

      );
    }
  }
}

Answer 1

export default class List extends React.PureComponent {
  constructor(props) {
    super(props);
    this.fetchMore = this._fetchMore.bind(this);
    this.fetchData = this._fetchData.bind(this);
    this.openModal = this.openModal.bind(this);
    this.state = {
      isLoading: true,
      isLoadingMore: false,
      _data: null,
      _dataAfter: "",
      isOpen: false,
      isDisabled: false,
      swipeToClose: true
    };
  }

  onClose() {
    console.log("Modal just closed");
  }

  onOpen() {
    console.log("Modal just openned");
  }

  onClosingState(state) {
    console.log("the open/close of the swipeToClose just changed");
  }
  openModal(id) {
    this.modal.open();
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" />
        </View>
      );
    } else {
      return (
        <>
          <FlatList
            numColumns={3}
            data={this.state._data}
            renderItem={({ item: rowData }) => {
              return (
                <View style={styles.container}>
                  <View style={styles.imageWrapper}>
                    <TouchableOpacity onPress={this.openModal}>
                      <Image
                        style={styles.image}
                        source={{
                          uri:
                            rowData.data.icon_img === "" ||
                            rowData.data.icon_img === null
                              ? "https://via.placeholder.com/70x70.jpg"
                              : rowData.data.icon_img
                        }}
                      />
                    </TouchableOpacity>
                  </View>
                </View>
              );
            }}
            keyExtractor={(item, index) => index}
          />
          {/* Get the modal out from flatlist, and it will work */}
          <Modal
            style={styles.modal}
            ref={modal => (this.modalOpen = modal)}
            swipeToClose={this.state.swipeToClose}
            onClosed={this.onClose}
            onOpened={this.onOpen}
            onClosingState={this.onClosingState}>
            <Text style={styles.text}>Basic modal</Text>
          </Modal>
        </>
      );
    }
  }
}

只需将Modal从FlatList移出即可