Question

I am trying to call a custom function inside a custom button in my react navigation header. I've looked around several ways to do this, and the best result I've found is making the function static, that is:

export class MyClass extends React.Component{
     static navigationOptions = ({navigation}) => ({
         headerRight: (<Button title='press me' onPress={()=> MyClass.SomeFunction() } ></Button>)
     });
     static SomeFunction(){
        /*Some code here*/
     }
     /*Some extra code here*/
}

My issue is, however, that I need to access some state properties within SomeFunction() and, as you may know, you cannot acces this within a static function.

Is there any way I can access the state of a component within a static, or is there a better way to implement a custom function within a button in the header????

Answer 1

As an alternative solution you might set the navigator state to set and get values.

If you use an AppWithNavigation state parent as a root of your navigation structure you should be pass a navigation prop to children elements like below:

render() {
    const { dispatch, nav, } = this.props
    return (
        <AppNavigator
            navigation={addNavigationHelpers({
                dispatch: dispatch,
                state: nav,
            })}
        />
    )
}

If so, just set your values by using the following line:

this.props.navigation.setParams({someValue: 'Value'})

Then get your set value whenever you want like the below:

this.props.navigation.state.someValue

Or

const { someValue } = this.props.navigation.state

But keep in mind, when first rendering the component state may be null or undefined. So you need to check its existing before try to get:

if (!this.props.navigation.state) {
    return null
}

const someValue = this.navigation.state.someValue

if (someValue) {
    /* you can use your someValue here! */
}

Note to that every route has its own state object. When your screen is changed, the state of your this.props.navigation.state object is changed. If you need a global solution, I think, you might use Redux.

Answer 2

after some time messing around with the code, I found a solution that better fits my needs. I post it below in case it helps anyone. Thank you all for your contributions :D

export class MyClass extends React.Component{
   static navigationOption = ({navigation}) => ({
       headerRight: (<Button title='Press Me!' onPress={() => MyClass.SomeFunc() })
   })

   //The function 
   static SomeFun(){
       alert(MyClass.SomeState.abc)
   }

   //Static functioning as state
   static SomeState = {
       abc: 'def'
   }
}

Answer 3

这是一种直接来自他们的文档https://reactnavigation.org/docs/en/header-buttons.html

的方法

还有一个npm模块可以让它更容易一些。 https://www.npmjs.com/package/react-navigation-underscore

＆＃13;

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};

    return {
      headerTitle: <LogoTitle />,
      headerRight: (
        <Button onPress={params.increaseCount} title="+1" color="#fff" />
      ),
    };
  };

  componentWillMount() {
    this.props.navigation.setParams({ increaseCount: this._increaseCount });
  }

  state = {
    count: 0,
  };

  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  /* later in the render function we display the count */
}

＆＃13;

Custom function inside header button react native

3 个答案: