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

问题

I implemented in my router-flux nav bar a right button like this:

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

But If I click on my button I get this error :this.5.getCurrentPosition is not a function

I declare my function in the constructor with this.getCurrentPosition = this.getCurrentPosition.bind(this)

回答1:

You're using a static method, which means you don't have access to this, which only works for instances.

So you can either

1) remove static

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

2) or pass getCurrentPosition to the render method as a parameter.

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

回答2:

So we have had the same problem using RNRF, our solution is to leverage the Actions.refresh API.

For your case, you can do like this:

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

回答3:

Assuming that you are using jsx file the return can take html like format but you can't structure it that way. Your transpiler didn't pass this.getCurrentPosition() expression. Take a look at your minified file and search for that.

This is how you embed expressions in 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>

回答4:

because renderRightButton static you can try:

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

来源：https://stackoverflow.com/questions/44408864/router-flux-navbar-button-this-function-is-not-a-function

标签

react-native

navbar

react-native-router-flux