测试this.props.navigation

Question

import React from 'react';
import ListElements from '../Components/ListElements';
class HospitalsScreen extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      Hospitals: ['Hospital de Base','Hospital Regional de Taguatinga','Hospital da Ceilandia','Clínica']
    };
  }

  onPressItem() {
    this.props.navigation.navigate('sectors');
  }

  render() {
    return (
      <ListElements
      list = {this.state.Hospitals}
      title='Hospitais'
      onPress={this.onPressItem.bind(this)}
      />
    );
  }
}

export default HospitalsScreen;

我在_onPress函数中测试这个屏幕时遇到了一些问题。我没有找到任何解决问题的方法。

Answer 1

了解JavaScript here中this绑定的工作原理

有几种方法可以做到这一点。使用它们，看看是否在函数中将this定义为未定义。

一种是在构造函数中添加this.onPressItem = this.onPressItem.bind(this);。

另一种是箭头函数

onPressItem= (event) => {this.props.navigation.navigate('sectors'); }

然后是onPress={this.onPressItem.bind(this)}。

您可以在here找到更多详细信息

另外，请浏览这篇文章Don't Use Bind When Passing Props