Question

我正在尝试使用react-navigation导航到另一个屏幕。但是，使用此代码，我收到错误：undefined is not an object (evaluation 'this.props.navigation')

直接调用navigate时（参见底部示例）可行。

我做错了什么？

这不起作用：

  _renderRow (rowData) {
    return (
      <View >
        <TouchableHighlight onPress={this._handlePress} underlayColor='white'>
            <Image
              style={{width: 50, height: 50}}
              source={{uri: 'http://openweathermap.org/img/w/' + rowData.iconName + '.png'}}
            />
        </TouchableHighlight>
      </View>
    )
  }

  _handlePress () {
    this.props.navigation.navigate('Details')
  }

这确实有效：

  _renderRow (rowData) {
    return (
      <View >
        <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')} underlayColor='white'>
            <Image
              style={{width: 50, height: 50}}
              source={{uri: 'http://openweathermap.org/img/w/' + rowData.iconName + '.png'}}
            />
        </TouchableHighlight>
      </View>
    )
  }

Answer 1

您需要绑定上下文。 onPress={this._handlePress.bind(this)}将完成这项工作。

您必须小心JSX回调中this的含义。在 JavaScript，类方法默认不受约束。如果你忘记了绑定this.handleClick并将其传递给onClick，这将是undefined 当实际调用该函数时。

这是文档：

Handling events

无法在另一个方法

1 个答案: