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 is not a function

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

Answer 1

假设您正在使用 jsx 文件，return 可以采用 html 之类的格式，但您不能那样构建它。您的转译器没有通过 this.getCurrentPosition() 表达式。查看您的缩小文件并搜索它。

这就是你 embed 在 jsx

中的表达方式

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'test',
  lastName: 'tesjgg'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root">
  <!-- This div's content will be managed by React. -->
</div>

Answer 2

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

所以你可以

1) 删除 static

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>
          );
    }

Answer 3

所以我们在使用 RNRF 时遇到了同样的问题，我们的解决方案是利用 Actions.refresh API.

对于你的情况，你可以这样做：

class AddEventPage extends Component {
  constructor(props) {
    this.getCurrentPosition = this.getCurrentPosition.bind(this);
    this.renderRightButton = this.renderRightButton.bind(this);
  }
  componentDidMount() {
    Actions.refresh({ renderRightButton: this.renderRightButton });
  }

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

  getCurrentPosition() {
    //Your implementation
  }  
}

Answer 4

因为 renderRightButton static 你可以尝试：

import { Actions } from 'react-native-router-flux'
constructor (props) {
  this.handleSave = this.handleSave.bind(this)
}
renderRightButton = () => {
return (
  <TouchableOpacity onPress={this.handleSave}>
    <Text>Save button</Text>
  </TouchableOpacity>
)
} 
async componentDidMount () {
  Actions.refresh({renderRightButton: this.renderRightButton})
} 
async handleSave () {
  console.log('save action')
}

router-flux 导航栏按钮 this.function 不是函数

router-flux navbar button this.function is not a function

navbar

react-native

react-native-router-flux