how to perform a function in header?

[hardtosaygoodbye]

| software | version
| react-navigation 1.0.0
| react-native 0.44
| node 7.3

import React from 'react';
import {
AppRegistry,
Text,
Button,
View
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
headerLeft: <Button title='button' onPress={() => {this.changeText()}} //error
/>
};
constructor(props){
super(props)

this.state = {
  text: '11'
}

}
changeText(){
this.setState({ text: '22'})
}
render() {
return (

{this.state.text}
<Button
title='changeText'
onPress={() => {this.changeText()}}
/> //ok

)
}
}

const test = StackNavigator({
Home: { screen: HomeScreen },
});

AppRegistry.registerComponent('test', () => test);

This question is from the previous issues, but the answer is wrong, who can help me ?

[sunnylqm]

A simple way is to store this outside class, but this has side effects on several instances.

let _this = null;

export default class WebViewPage extends Component {
    static navigationOptions = ({ navigation }) => ({
        // ......
                    onPress={() => _this.reload() }>
        // ......
        )
    });
   componentDidMount() {
       _this = this;
   }
    _reload() {
        console.log("aaaaaaa");
    }

A better (and of course more complex) way is to use navigation.setParams to put methods into navigation.state.params and then invoke them in your navigationOptions.

[dzpt]

@sunnylqm It doesn't work.
First of all, you declared _this as a const, it means it immutable.

[sunnylqm]

@tom29 My mistake. Simply replace const with let.

[buncis]

is @sunnylqm code considered as good practices?

[shivanraptor]

Codes of @sunnylqm work, but it doesn't look like a clean way to do so. Any alternatives?

[spencercarli]

Hi! In an effort to get the hundreds of issues on this repo under control I'm closing issues tagged as questions. Please don't take this personally - it's simply something we need to do to get the issues to a manageable point. If you still have a question I encourage you to re-read the docs, ask on StackOverflow, or ask on the #react-navigation Reactiflux channel. Thank you!

[yasir-netlinks]

You can use setParams

static navigationOptions = ({ navigation }) => {
    headerRight: navigation.state.params && navigation.state.params.headerRight
}

componentDidMount(){
     this.props.navigation.setParams({
            headerRight: (<TouchableOpacity onPress={this._headerRightPressed}></TouchableOpacity>)
     })
}

[brentvatne]

https://reactnavigation.org/docs/en/header-buttons.html