NavigatorIOS - 是否有 viewDidAppear 或 viewWillAppear 等价物？答案

【问题标题】：NavigatorIOS - Is there a viewDidAppear or viewWillAppear equivalent?NavigatorIOS - 是否有 viewDidAppear 或 viewWillAppear 等价物？
【发布时间】：2015-04-14 05:20:27
【问题描述】：

我正在将一个应用程序移植到 React-Native 以进行测试。当我弹回到导航器堆栈中的前一个视图（点击后退按钮）时，我想运行一些代码。有 viewWillAppear 方法吗？我在 Navigator 上看到有一个“onDidFocus()”回调，这听起来可能是正确的。但在 NavigatorIOS 上似乎没有类似的东西

【问题讨论】：

NavigatorIOS 与我认为的 Navigator 具有所有相同的方法。
好吧 viewDidAppear 例如不是 iOS 中导航器上的方法，而是 viewController 出现时的方法。另外，我认为只有 Facebook 选择公开给 JavaScript 的方法可用，而不是全部可用。但也许有一个暴露的会有所帮助，我只是不知道
我指的是你说“在 Navigator 上有一个“onDidFocus()”.. 但在 NavigatorIOS 上似乎没有类似的东西”
对了。我明白你在说什么。

标签： react-native

【解决方案1】：

我找到了一种在 UIKit 中模拟 viewDidAppear 和 viewDidDisappear 的方法，
但我不确定这是否是“正确”的方式。

componentDidMount: function() {
    // your code here

    var currentRoute = this.props.navigator.navigationContext.currentRoute;
    this.props.navigator.navigationContext.addListener('didfocus', (event) => {
        //didfocus emit in componentDidMount
        if (currentRoute === event.data.route) {
            console.log("me didAppear");
        } else {
            console.log("me didDisappear, other didAppear");
        }
        console.log(event.data.route);
     });
},

【讨论】：

【解决方案2】：

对于使用钩子和响应导航版本 5.x 的人，我认为您可以这样做以期待 viewDidAppear 的类似行为：

  import React, {useCallback } from "react";
  import { useFocusEffect } from "@react-navigation/native";

  const SomeComponent = () => {
      useFocusEffect(
        useCallback(() => {
          //View did appear
        }, [])
      );
      //Other codes
  }

更多信息，请参考https://reactnavigation.org/docs/use-focus-effect/

【讨论】：

【解决方案3】：

这是一个用最新的 React Navigation 版本模拟 viewDidAppear 的解决方案：

componentDidMount() {
     var currentRoute = this.props.navigation.state.routeName;
     this.props.navigation.addListener('didFocus', (event) => {

         if (currentRoute === event.state.routeName) {
             // VIEW DID APPEAR
         }
     });
}

感谢 Jichao Wu 的想法 :)

【讨论】：

目前看来是一种不错的做法。
this.props.navigation.state.routeName 引发错误，因为 this.props.navigation.state 未定义。 navigation 上有 getState() 函数，但它也没有 routeName 属性，它有 routes 和 routeNames 是数组，所以我们不知道如何访问当前的 routeName从那里

【解决方案4】：

如果您使用的是 React Navigation，请使用：

    componentDidMount(){
        this.props.navigation.addListener('focus', () => {
            // put your code here
        });
    }

基本上，您是在首次安装组件时添加focus 事件。每当（包括第一次）组件聚焦时都会调用它。理想情况下，您还需要通过捕获从addListener 调用返回的值并调用该返回值（实际上是取消订阅函数）来删除卸载时的侦听器。

【讨论】：

【解决方案5】：

我创建了一个带有onLeftButtonPress 的自定义按钮来按照https://github.com/facebook/react-native/issues/26 处理返回运行代码

绕过它的方法是在左侧设置自定义后退按钮，或者在 iOS 中实现 - viewWillDisappear:。

【讨论】：

您也可以通过向后滑动返回

【解决方案6】：

您可以使用 ComponentWillMount，或者如果您要离开视图，您可以使用 ComponentWillUnmount，它会在退出时运行一些代码。

【讨论】：