javascript - 如何在 React 中调用堆栈中的导航事件？

Question

当我在我的 StackNavigator 中离开名为 GridVid, 2nd 的屏幕时，我想调用 NavigationEvent 函数 onWillBlur()。

所以在我的 SettingsClass 中，堆栈中的第一个屏幕，这工作正常，我可以调用 onWillBlur()，因为它在 App.js 文件中。

然而，尝试在堆栈的第二个屏幕(称为 GridVid，在 GridVid.js 文件中定义)中调用 onWillBlur() 不起作用。我该如何解决这个问题？

//App.js

class SettingsClass extends Component {

    render() {
          return (
            <View style={styles.settingsContainer}>
               <NavigationEvents
                       onWillBlur={() => {
                           alert('moving from Settings') //THIS WORKS FINE!!!
                       }}
              />
            </View>
            )
          }
   } 


    //Tabs across the bottom of the screen
    const TabNavigator = createBottomTabNavigator(
      {
        HomeScreen: { 
            screen: HomeClass,
        },

        SettingsStack
      },
    )

    //Settings Class swipes to GridVid
    const SettingsStack = createStackNavigator({
      SettingsScreen: {
        screen: SettingsClass
      },
      GridVid: {
        screen: GridVidClass
      }
   })

//GridVid.js

export default class GridVidClass extends Component {

  render() {
   return (
    <View style={styles.container}> 
         <Text>On Grid </Text>

         <NavigationEvents
           onWillBlur={() => {
               alert('moving from GridVid')  //THIS DOESN'T WORK...
           }}
      />

    </View> 
    );
 }
}

Answer 1

尝试使用事件 addListener。它可以解决问题。

例子

  constructor(props) {
    super(props);
 this.willBlur = props.navigation.addListener(
    'willBlur',
    () => {
       alert('moving from GridVid');
    }
  );
}

  componentWillUnmount() {
    this.willBlur.remove();

  }

然后，使用 push 命令渲染屏幕。

this.props.navigation.push('Gridvid');