按下按钮时未调用方法

Question

我正在使用反应导航，并在右侧添加了一个按钮，可以使用默认导航选项从我的应用程序注销，如下所示：

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 映射到道具

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

但问题是当我按下按钮时，它不会调用该方法！

Answer 1

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

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

我得到了解决方案，我做错了什么，我没有在按钮按下时回传回呼叫！

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>
),
})

现在它工作正常！