当我按下按钮时没有调用方法

Question

我正在使用 React 导航，并在右侧添加了一个按钮，用于使用默认导航选项退出我的应用程序，如下所示：

const otherApp = createStackNavigator({
  Welcome : { 
    screen : WelcomeScreen
  }
},
{
  defaultNavigationOptions : ({navigation}) => ({
    title : 'Welcome',
    headerStyle: {
      backgroundColor: '#29434e',
      shadowColor: 'transparent',
      elevation: 0
    },
    headerRight: (
      <TouchableOpacity
        style={{ backgroundColor: '#DDDDDD', padding: 5 }}
        onPress={() => navigation.getParam('logout')}>
        <Text
          style={{
            fontSize: 10,
          }}>
          Logout
        </Text>
      </TouchableOpacity>
    ),
  })
});

我正在绑定要调用的方法，如下所示：

_Logout() {
    this.props.signOut();
  }
  componentDidMount(){
    this.props.navigation.setParams({ logout : this._Logout.bind(this) })
  }

使用 redux

将函数映射到 props

const mapDispatchToProps = (dispatch) => {
  return {
    Signout : ()=> dispatch(Signout())
  }
}

但问题是当我按下按钮时，它没有调用方法！

Answer 1

您也可以使用react-navigation的onFocus方法来查看屏幕是否对焦。如果屏幕处于焦点上，则调用该函数。

import { withNavigation } from "react-navigation";
 componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener("didFocus", () => {
      // The screen is focused
      // Call any action
    });
  }

  componentWillUnmount() {
    // Remove the event listener
    this.focusListener.remove();
  }

export default withNavigation(Your Class Name);

方法：2

import { NavigationEvents } from "react-navigation";

 onFocus = () => {
 //Write the code here which you want to do when the screen comes to focus.
  };

  render() {
    return (
        <NavigationEvents
          onDidFocus={() => {
            this.onFocus();
          }}
        />
)}

Answer 2

我得到了解决方案，我做错了什么，我没有在按钮的 onPress 中传递回电！

logoutFromFirebase = () => {
    this.props.Signout();
    this.props.navigation.navigate(this.props.user.uid ? 'App' : 'Auth')
  }
  componentDidMount(){
    this.props.navigation.setParams({ logout : this.logoutFromFirebase })
  }

和默认导航

defaultNavigationOptions : ({navigation}) => ({
    title : 'Welcome',
    headerStyle: {
      backgroundColor: '#29434e',
      shadowColor: 'transparent',
      elevation: 0
    },
    headerRight: (
      <TouchableOpacity
        style={{ backgroundColor: '#DDDDDD', padding: 5 }}
        onPress={navigation.getParam('logout' , () => Reactotron.log('Logout not callled'))}>
        <Text
          style={{
            fontSize: 10,
          }}>
          Logout
        </Text>
      </TouchableOpacity>
    ),
  })

现在一切正常！

当我按下按钮时没有调用方法

Method is not being invoked when i press the button

react-native

redux-thunk

react-redux

react-navigation

react-navigation-stack