标题按钮内部的自定义功能本机

Question

我试图在我的React Navigation标头中的自定义按钮中调用自定义功能。我已经浏览了几种方法，而我发现最好的结果是使功能静态，也就是说：

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

我的问题是，我需要访问SomeFunction()中的某些状态属性，并且您可能知道，您无法在静态功能中加速this。

有什么办法可以访问静态内组件的状态，还是有更好的方法在标题中的按钮中实现自定义功能？？？？

作为替代解决方案，您可能会设置导航状态以设置并获取值。

如果您使用AppWithNavigation State父母作为导航结构的根源，则应将navigation Prop传递给儿童元素，如下：

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

如果是这样，只需使用以下行设置您的值：

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

然后在您想要的时按照以下内容获取设定值：

this.props.navigation.state.someValue

或

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

，请记住，当第一次呈现组件状态时，可能为null或不确定。因此，您需要在尝试获取之前检查其现有：

if (!this.props.navigation.state) {
    return null
}
const someValue = this.navigation.state.someValue
if (someValue) {
    /* you can use your someValue here! */
}

注意到该每个路由都有自己的状态对象。更改屏幕时，this.props.navigation.state对象的状态会更改。我认为，如果您需要全球解决方案，则可以使用Redux。

一段时间后，我找到了一个更适合我需求的解决方案。我在下面发布，以防万一它可以帮助任何人。谢谢大家的贡献：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'
   }
}

这是一种直接从其文档中的方法

还有一个NPM模块可以使其更容易。https://www.npmjs.com/package/reeact-navigation-underscore

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