如何从静态 navigationOptions 调用 this.props - react-navigation答案

【问题标题】：How to call this.props from a static navigationOptions - react-navigation如何从静态 navigationOptions 调用 this.props - react-navigation
【发布时间】：2017-12-21 11:16:55
【问题描述】：

我正在尝试在堆栈导航器标题中的 onPress of button 中调用 handlelogout()，然后在 handlelogout() 中调用 this.props.logout 操作，该操作将调用导航减速器以重置为登录屏幕。 ...但是this.props.logout 没有调用动作....什么也没发生

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    console.log("navigation", navigation);

    return {
      title: "Profile List",
      gesturesEnabled: false,
      headerLeft: null,
      headerRight: <Button title={"Logout"} onPress={() => params.handlelogout && params.handlelogout({ state: navigation.state })} />
    }
  };

这是我的handlelogout函数

handlelogout(state) {
    console.log("in handlelogout", this.props.logout, state);
    this.props.logout;
  }

i am attaching the log i printed in the console

这里我将注销绑定到 mapdispatchprops

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ReduxActions, dispatch);
}

【问题讨论】：

不确定这是实际问题还是只是问题代码 sn-p 中的错误，但您没有调用 this.props.logout 方法。为此，您需要使用this.props.logout() 调用该函数。
jevakallio this.props.logout (reduxactions) 是对 actioncreator 的调度操作，它调用导航减速器.....

标签： react-native react-navigation stack-navigator

【解决方案1】：

您可以尝试将按钮放在另一个元素中，然后从该元素/类处理您的注销。

import ButtonForLogout from './test/buttonforlogout';

...

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    console.log("navigation", navigation);

    return {
      title: "Profile List",
      gesturesEnabled: false,
      headerLeft: null,
      headerRight: <ButtonForLogout />
    }
  };

buttonforlogout.js

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import { connect } from 'react-redux';
import { ReduxActions } from './youractions';

class ButtonForLogout extends Component {

   render(){
   return(
      <View>
       <Button title={"Logout"} onPress={this.props.logout} />
      </View>
   );
   }

}

const mapStateToProps = state => ({});

export default connect(mapStateToProps, ReduxActions)(ButtonForLogout);

类似的东西。

【讨论】：