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

Posted 2023-02-22

【中文标题】当我按下按钮时没有调用方法

【英文标题】：Method is not being invoked when i press the button

【发布时间】：2020-01-03 15:25:46

【问题描述】：

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

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())
  

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

【参考方案1】：

我得到了解决方案，我做错了什么，我没有在按钮的 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>
    ),
  )

现在它工作正常！

【参考方案2】：

您也可以使用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();
          
        />
)

【讨论】：

addListener 中的“didFocus”是什么意思？

didFocus 意味着只要屏幕处于焦点状态，就会调用特定的函数。它还有其他方法，如 didBlur、willBlur 等。请参阅 react-navigation reactnavigation.org/docs/en/function-after-focusing-screen.html 以获取完整的可用功能。

这个类已经被导出并用 redux connect 我如何用导航包装它？

我想在组件的标题上添加一个按钮，它将调用 redux 功能，而不是你告诉我的方式！

我已经编辑了问题，您现在可以重新检查这里发生了什么！