Question

有没有一种方法可以不使用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>

Answer 1

请尝试使用withNavigation函数，它会返回一个HOC，该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,
    },
);

Answer 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/

Answer 3

我发现这有点棘手，在研究了一下之后，我想出了以下解决方案。请注意，已在 == 上进行测试。

React Navigation 5.x

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

React-Native navigation.addListener不是一个函数

3 个答案: