React-Native navigation.addListener 不是函数答案

【问题标题】：React-Native navigation.addListener is not a functioReact-Native navigation.addListener 不是函数
【发布时间】：2018-10-08 17:29:08
【问题描述】：

有没有办法在不使用 redux 的情况下解决这个问题？

这仅在 iOS 上发生，在 android 上，没有它，AddListener 工作得很好。

我有一个组件，我在 componentDidMount 函数上调用 props.navigation.addListener。一些代码可帮助您准确了解中断的位置：

componentDidMount(){
    var _this = this;
    this.willBlurListener = this.props.navigation.addListener('willBlur', () => {
        _this.timer.clearTimeout();
    });
    this.willFocusListener = this.props.navigation.addListener('willFocus', () => {
        _this._action();
    });
    AppState.addEventListener('change', this._handleAppStateChange);
}

然后我像这样使用组件：

<Inactivity name='SomeNameView' navigation={ this.props.navigation }>
    {this.renderDetails()}              
</Inactivity>

【问题讨论】：

能否请您分享一些问题所在的代码。
刚刚用一些代码sn-ps编辑了

标签： ios iphone react-native react-native-ios react-native-navigation

【解决方案1】：

您能否尝试使用withNavigation 函数，它会返回一个 HOC，其中包含导航道具，因此您不必从父组件传递给子组件：

我创建了一个使用此概念的简单应用程序，可能会对您有所帮助：

import React from 'react';
import {
  View,
  Text,
  Button,
} from 'react-native';
import {
  createStackNavigator,
  withNavigation,
} from 'react-navigation';


class SomeComponent extends React.Component {
  componentDidMount() {
    this.willBlurListener = this.props.navigation.addListener('willBlur', () => {
      this.someAction();
    })
  }

  someAction() {
    console.log('Some action is called!');
  }

  componentWillUnmount() {
    this.willBlurListener.remove();
  }

  render() {
    return (
        <View>
          <Text>Some Component</Text>
          <Button
              title={'Open settings'}
              onPress={() => this.props.navigation.navigate('Settings')}
          />
        </View>
    )
  }
}

const SomeComponentWithNavigation = withNavigation(SomeComponent);

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home'
  }

  render() {
    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <SomeComponentWithNavigation/>
          <Text>Welcome to home screen!</Text>
        </View>
    )
  }
}

class SettingsScreen extends React.Component {
  static navigationOptions = {
    title: 'Settings'
  }

  render() {
    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <Text>Welcome to settings screen!</Text>
        </View>
    )
  }
}

export default createStackNavigator(
    {
      Home: HomeScreen,
      Settings: SettingsScreen,
    },
);

【讨论】：

感谢您的评论，感谢您的帮助虽然这是一个很好的提示，但它并不能解决我的问题...
能否请您分享完整代码，以便我们有更大的想法！

【解决方案2】：

我使用import { useNavigation } from '@react-navigation/native'; 来实现这一点。这也适用于您。

示例代码示例

import { useNavigation } from '@react-navigation/native';

class CurrentOrderClass extends React.Component {
  constructor(props) {
   super(props);
  }

  componentDidMount() {
   this.onFocusSubscribe = this.props.navigation.addListener('focus', () => {
     // Your code
   });
  }

  componentWillUnmount() {
   this.onFocusSubscribe();
  }
  .
  .
  .
  .
  function CurrentOrder(props) {
   const navigation = useNavigation(props)
   return <CurrentOrderClass {...props} navigation={navigation} />
  }
}
export default CurrentOrder;

您也可以查看 React Native 文档https://reactnavigation.org/docs/navigation-events/

【讨论】：

【解决方案3】：

我发现这有点棘手，经过一番研究，我想出了以下解决方案。请注意，这是在 React Navigation 5.x 上测试的。

import { useIsDrawerOpen } from "@react-navigation/drawer";

let lastDrawerStateIsOpened = false;
const DrawerComponent = (props) => {
  const isOpened = useIsDrawerOpen();
  if (lastDrawerStateIsOpened != isOpened) {
    lastDrawerStateIsOpened = isOpened;
    if (isOpened) {
      // Do what needs to be done when drawer is opened.
    }
  }
};

另外，请注意我使用的是功能组件。

【讨论】：