react-native - router-flux 导航栏按钮 this.function 不是一个函数

Question

我在我的 router-flux 导航栏中实现了一个像这样的右键:

  static renderRightButton = (props) => {
          return (
              <TouchableOpacity onPress={() => this.getCurrentPosition()} style={{bottom: 4, right: 8}}>
                  <Icon name='ios-locate-outline' style={{color: 'white'}} />
              </TouchableOpacity>
          );
    }

但是如果我单击按钮，则会收到此错误:this.5.getCurrentPosition 不是函数

我在构造函数中声明了我的函数 this.getCurrentPosition = this.getCurrentPosition.bind(this)

Answer 1

您使用的是static方法，这意味着您无权访问this，它仅适用于实例。

所以你可以

1) 删除静态

renderRightButton = () => {
          return (
              <TouchableOpacity onPress={() => this.getCurrentPosition()} style={{bottom: 4, right: 8}}>
                  <Icon name='ios-locate-outline' style={{color: 'white'}} />
              </TouchableOpacity>
          );
    }

2) 或将 getCurrentPosition 作为参数传递给 render 方法。

static renderRightButton = (props, getCurrentPosition) => {
          return (
              <TouchableOpacity onPress={getCurrentPosition} style={{bottom: 4, right: 8}}>
                  <Icon name='ios-locate-outline' style={{color: 'white'}} />
              </TouchableOpacity>
          );
    }