为什么 React Native Navigation 监听器在第一次尝试时触发？答案

【问题标题】：Why does React Native Navigation listener trigger on the first try?为什么 React Native Navigation 监听器在第一次尝试时触发？
【发布时间】：2019-11-16 19:29:47
【问题描述】：

我想要一个事件监听器，当用户到达屏幕时触发一个事件。在这种情况下，事件是尝试检索令牌，如果不存在，则打开模式。

我遇到的问题是侦听器在用户第一次到达屏幕时不会触发任何事件，而只会在第二次触发。第一次，useEffect 不会运行以显示“Listener is run”，也不会检索令牌。

    useEffect(() => {
        const focusListener = props.navigation.addListener('didFocus', () => {
            console.log("Listener is run")
            retrieveToken()
        })

        return () => {
           focusListener.remove()
        }
    }, [])

    const retrieveToken = async () => {
        try {
            const token = await AsyncStorage.getItem(LOGIN_TOKEN)
            console.log("token", token)
            if(!token) {
                console.log("Modal is run")
                authModalOpen()
            }
        } catch (err) {
            throw new Error(err)
        }
    }

我尝试将didFocus 更改为willFocus，但仍然无法正常工作。

【问题讨论】：

你为什么不检查 componentdidmount 并且每次他们来到那个屏幕时，检查令牌是否存在并根据它运行你的模式。

标签： javascript reactjs react-native react-navigation addeventlistener

【解决方案1】：

正如GitHub issue 中所建议的，解决方案是使用useLayoutEffect 而不是useEffect。

原因是useEffect 将在组件渲染后运行，并且浏览器已经绘制了这些更改。我想当时听者为时已晚。另一方面，useLayoutEffect 在浏览器从渲染中绘制更改之前运行。

【讨论】：