React Native：模态问题，未定义的功能

Question

我有一个组件（Favorites2），我想通过按下标题导航栏中的按钮来调用模态弹出窗口...问题是当我单击它时出现以下错误消息：

this.refs.categoriModal.showCategorieModal 不是函数。 （在 'this.refs.categorieModal.showCategorieModal()','this.refs.categorieModal.showCategorieModal' 未定义）

在我添加第二个减速器（chosedCategorie）之前，此模式运行良好。我的减速器工作正常，所以我不确定它们是否与我遇到的问题有关联。

这是我的代码：

Favorites2.js

import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity, FlatList } from 'react-native'
import QuoteList2 from './QuoteList2'
import { connect } from 'react-redux'
import CategorieModal from './CategorieModal'
import data from '../Helpers/quotesData'

class Favorites2 extends React.Component {

  static navigationOptions = ({ navigation }) => {
      const { params } = navigation.state
      // On accède à la fonction shareQuote et à la citation via les paramètres qu'on a ajouté à la navigation
        return {
            headerRight: <View style = { styles.header_container }>
                          <TouchableOpacity
                              style={styles.categorie_touchable_headerrightbutton}
                              onPress={ () => params.addModal() }>
                              <Text style={styles.header_text}>Categorie</Text>
                          </TouchableOpacity>
                        </View>
        }
  }

  constructor(props) {
    super(props)
    this.state = {
      fullQuotes: data
    }
    this._addModal = this._addModal.bind(this)
  }

  componentDidMount() {
    this.props.navigation.setParams({
      addModal: this._addModal
    })
  }

  _addModal() {
    this.refs.categorieModal.showCategorieModal()
  }

  _newQuotes() {
    const nom = this.props.chosedCategorie
    const newQuotes = this.state.fullQuotes.filter( quote => (
      nom == quote.categ1 || nom == quote.categ2 || nom == quote.categ3 || nom == quote.categ4 || nom == quote.categ5 || nom == "Toutes catégories") && (this.props.favoriteQuotes.findIndex(item => item.id === quote.id)!== -1) )
    return (newQuotes)
  }

  render() {
    return (
      <View style={styles.main_container}>
        <QuoteList2
          quotes={this._newQuotes()}
          navigation={this.props.navigation}
          favoriteList={true} // Ici on est bien dans le cas de la liste des citations favorites. Ce booléen à true permettra d'empêcher de lancer la recherche de plus de citations après un scroll lorsqu'on est sur la vue Favoris.
        />
        <CategorieModal
          ref={'categorieModal'}
          parentFlatList={this}>
        </CategorieModal>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    marginVertical: 20
  },
  header_container: {

  },
  categorie_touchable_headerrightbutton: {

  },
  header_text: {

  }
})

const mapStateToProps = state => {
  return {
    favoriteQuotes: state.fav.favoriteQuotes,
    chosedCategorie: state.cat.chosedCategorie
  }
}

export default connect(mapStateToProps)(Favorites2)

CategorieModal.js

import React from 'react';
import { StyleSheet, Dimensions, Platform, FlatList, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modalbox'
import categories from '../Helpers/quotesCategories'
import { connect } from 'react-redux'

categories.unshift({
  id: categories.length + 1,
  nom: "Toutes catégories",
  source_image: ""
})

var screen = Dimensions.get('window')

class CategorieModal extends React.Component {

  constructor(props) {
    super(props)

  }

  showCategorieModal() {
    this.refs.myModal.open()
  }

  _choseCategorie(nom) {
    const action = { type: "CHOSE_CATEGORIE", value: nom }
    this.props.dispatch(action)
  }

  render() {
    return (
      <Modal
        ref={'myModal'}
        style={styles.modal}
        position='center'
        backdrop={true}>
        <FlatList
          data={categories}
          style={styles.flatlist}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) => (
            <TouchableOpacity
              style={styles.touchableOpacity}
              onPress={() => {
                this._choseCategorie(item.nom)
                this.refs.myModal.close()
              }}>
              <Text style={styles.text}>{item.nom}</Text>
            </TouchableOpacity>
          )}>
        </FlatList>
      </Modal>
    )
  }
}

const styles = StyleSheet.create({
  modal: {
    justifyContent: 'center',
    borderRadius: Platform.OS === 'ios' ? 15 : 15,
    shadowRadius: 10,
    width: screen.width - 160,
    height: 350
  },
  flatlist: {
    flex: 1,
    marginVertical: 5
  },
  touchableOpacity: {
    height: 40,
    justifyContent: 'center'
  },
  text: {
    fontSize: 15,
    textAlign: 'center'
  }
})

const mapStateToProps = (state) => {
  return {
    chosedCategorie: state.cat.chosedCategorie
  }
}

export default connect(mapStateToProps)(CategorieModal)

你有什么想法吗？？

Answer 1

为什么要使用 refs 来处理模态框的可见性？ 一个不带 refs 的简单方法是让 modalVisible 处于 Favorite2 的状态，并在调用 addModal 时将其更改为 true

class Favorites2 extends React.Component {

  static navigationOptions = ({ navigation }) => {
      const { params } = navigation.state
      // On accède à la fonction shareQuote et à la citation via les paramètres qu'on a ajouté à la navigation
        return {
            headerRight: <View style = { styles.header_container }>
                          <TouchableOpacity
                              style={styles.categorie_touchable_headerrightbutton}
                              onPress={ () => params.addModal() }>
                              <Text style={styles.header_text}>Categorie</Text>
                          </TouchableOpacity>
                        </View>
        }
  }

  constructor(props) {
    super(props)
    this.state = {
      fullQuotes: data,
      modalVisible: false
    }
    this._addModal = this._addModal.bind(this)
  }

  componentDidMount() {
    this.props.navigation.setParams({
      addModal: this._addModal
    })
  }

  _addModal() {
      this.setState({modalVisible: true})
  }

  _newQuotes() {
    const nom = this.props.chosedCategorie
    const newQuotes = this.state.fullQuotes.filter( quote => (
      nom == quote.categ1 || nom == quote.categ2 || nom == quote.categ3 || nom == quote.categ4 || nom == quote.categ5 || nom == "Toutes catégories") && (this.props.favoriteQuotes.findIndex(item => item.id === quote.id)!== -1) )
    return (newQuotes)
  }

  render() {
    return (
      <View style={styles.main_container}>
        <QuoteList2
          quotes={this._newQuotes()}
          navigation={this.props.navigation}
          favoriteList={true} // Ici on est bien dans le cas de la liste des citations favorites. Ce booléen à true permettra d'empêcher de lancer la recherche de plus de citations après un scroll lorsqu'on est sur la vue Favoris.
        />
        <CategorieModal
          modalVisible={this.state.modalVIsible} 
          parentFlatList={this}>
        </CategorieModal>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    marginVertical: 20
  },
  header_container: {

  },
  categorie_touchable_headerrightbutton: {

  },
  header_text: {

  }
})

const mapStateToProps = state => {
  return {
    favoriteQuotes: state.fav.favoriteQuotes,
    chosedCategorie: state.cat.chosedCategorie
  }
}

export default connect(mapStateToProps)(Favorites2)

并在 CategorieModal.js 的 Modal 中拥有 isVisible 道具

render() {
    return (
      <Modal
        isVisible={ this.props.modalVisible }
        style={styles.modal}
        position='center'
        backdrop={true}>
        <FlatList
          data={categories}
          style={styles.flatlist}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) => (
            <TouchableOpacity
              style={styles.touchableOpacity}
              onPress={() => {
                this._choseCategorie(item.nom)
                this.refs.myModal.close()
              }}>
              <Text style={styles.text}>{item.nom}</Text>
            </TouchableOpacity>
          )}>
        </FlatList>
      </Modal>
    )
  }
}

更多详情可以看How to make Modal to show up as a different Component in react-native

Answer 2

“showCategorieModal”未找到，因为它链接到“Connect”而不是“CategorieModal”。有人知道怎么解决吗？