反应本机路由器通量：覆盖组件内的左右按钮并访问本地功能答案

【问题标题】：react native router flux: override left or right button inside component and access local function反应本机路由器通量：覆盖组件内的左右按钮并访问本地功能
【发布时间】：2017-03-24 06:29:21
【问题描述】：

我能够覆盖组件内的按钮，但无法调用本地函数，例如当我按下“刷新”时，什么也没有发生。这是覆盖按钮文本并执行功能的正确方法吗？感谢您的帮助。谢谢。

import { WebView } from 'react-native'
import React, { PropTypes, Component } from 'react';
import { View, Text } from 'react-native';

import styles from '../src/styles/home'

var WEBVIEW_REF = 'webview';
class WebViewComponent extends Component {

  static rightTitle = "Refresh";
  static onRight() {
    this.reload;
  }

  static propTypes = {
    url: PropTypes.string,
    scalesPageToFit: PropTypes.bool,
    startInLoadingState: PropTypes.bool,
  };

  static defaultProps = {
    url: 'http://google.com',
    scalesPageToFit: true,
    startInLoadingState: true,
  };

  render() {
    return (
      <WebView
          ref={ WEBVIEW_REF }
          style={ { flex: 1, marginTop: 50 } }
          source={ { uri: this.props.url } }
          scalesPageToFit={ this.props.scalesPageToFit }
          startInLoadingState={ this.props.startInLoadingState } />
      );
  }

  reload = () => {
    alert('reload');
  };

}

module.exports = WebViewComponent;

【问题讨论】：

你试过this.reload()吗？
@SagarKhatri 是的。我尝试了这 3 个，this.reload()、reload() 和 this.reload。但不幸的是，它们都不起作用......
从onRight方法中移除静态关键字。
@SagarKhatri 我无法删除静态方法，因为它是一种覆盖反应本机路由器通量github.com/aksonov/react-native-router-flux的右键按钮的方法

标签： javascript reactjs react-native jsx react-native-router-flux

【解决方案1】：

经过一番研究，我得到了答案，不要使用静态，使用 componentDidMount()

import { WebView } from 'react-native'
import React, { PropTypes, Component } from 'react';
import { View, Text } from 'react-native';

import styles from '../src/styles/home'

var WEBVIEW_REF = 'webview';
class WebViewComponent extends Component {

  //here is the answer
  componentDidMount() {
    Actions.refresh({rightTitle: 'Refresh', onRight: this.reload})
  }

  static propTypes = {
    url: PropTypes.string,
    scalesPageToFit: PropTypes.bool,
    startInLoadingState: PropTypes.bool,
  };

  static defaultProps = {
    url: 'http://google.com',
    scalesPageToFit: true,
    startInLoadingState: true,
  };

  render() {
    return (
      <WebView
          ref={ WEBVIEW_REF }
          style={ { flex: 1, marginTop: 50 } }
          source={ { uri: this.props.url } }
          scalesPageToFit={ this.props.scalesPageToFit }
          startInLoadingState={ this.props.startInLoadingState } />
      );
  }

  reload = () => {
    alert('reload');
  };

}

module.exports = WebViewComponent;

【讨论】：