Метод не вызывается, когда я нажимаю кнопку

Я использую интерактивную навигацию и добавил кнопку справа для выхода из моего приложения с использованием параметров навигации по умолчанию, как показано ниже:

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

Функция отображается на реквизиты с помощью редукции

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

Но проблема в том, что когда я нажимаю кнопку, метод не запускается!


react-native react-redux react-navigation redux-thunk react-navigation-stack
person Ali Yar Khan    schedule 30.08.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы также можете использовать onFocus метод react-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();
          }}
        />
)}
person Rishav Kumar    schedule 30.08.2019
comment
что подразумевается под didFocus в addListener? - person Ali Yar Khan; 30.08.2019
comment
didFocus означает, что всякий раз, когда экран находится в фокусе, будет вызываться конкретная функция. У него также есть другие методы, такие как didBlur, willBlur и т. Д. Пожалуйста, обратитесь к response-navigation responsenavigation.org/docs/en/function-after-focusing-screen.html для получения полного набора доступных функций. - person Rishav Kumar; 31.08.2019
comment
класс уже экспортирован, завернутый с помощью redux connect, как я могу обернуть его с помощью навигации? - person Ali Yar Khan; 02.09.2019
comment
Я хочу добавить кнопку в заголовок компонента, которая будет вызывать функцию redux, а не так, как вы мне говорите! - person Ali Yar Khan; 02.09.2019
comment
я отредактировал вопрос, теперь вы можете перепроверить что здесь происходит! - person Ali Yar Khan; 02.09.2019

arrow_upward
0
arrow_downward

У меня есть решение, что я делал не так, что я не передавал обратный звонок в 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>
    ),
  })

И теперь все работает нормально!

person Ali Yar Khan    schedule 02.09.2019