React Native中await操作后navigation的addListener首次不触发问题

问题原因 #

• React Navigation 5.x 的 focus 事件会在页面首次完成聚焦、对用户可见时立即同步触发。你通过 await、定时器等方式延后了监听器的注册时机，此时首次 focus 事件已经派发完成，新注册的监听器无法捕获历史事件，只有后续页面再次聚焦时的新事件才能被监听到。

解决方案 #

方案1：提前注册监听器，异步加载完成后主动判断执行 #

如果业务允许提前注册监听器，可将业务逻辑抽为公共方法，在数据加载完成后判断当前页面是否处于聚焦状态，主动执行一次逻辑即可覆盖首次进入的场景：

async componentDidMount() {
    // 抽离公共的聚焦业务逻辑
    this.handleFocus = async () => {
        // 前置数据未加载完成时直接返回
        if (!this.state.pageData) return;
        console.log('首次进入和后续返回都可正常触发')
    }
    // 提前注册监听器，不会错过后续的focus事件
    this.focusListener = navigation.addListener('focus', this.handleFocus);

    // 执行异步拉取数据逻辑
    const pageData = await new Promise(resolve => setTimeout(() => resolve('模拟接口返回数据'), 3000));
    this.setState({ pageData }, () => {
        // 数据加载完成后，判断当前页面已聚焦就主动执行业务逻辑
        if (navigation.isFocused()) {
            this.handleFocus();
        }
    })
}

// 组件卸载时移除监听器，避免内存泄漏
componentWillUnmount() {
    this.focusListener?.remove();
}

方案2：延迟注册监听器，注册后主动校验聚焦状态 #

如果业务确实要求必须等待异步操作完成后才能注册监听器，注册完成后立刻判断当前页面是否处于聚焦状态，主动执行一次回调即可：

async componentDidMount() {
    await new Promise(resolve => setTimeout(resolve, 3000)); // 异步逻辑

    const handleFocus = async (data) => {
        console.log('首次进入和后续返回都可正常触发')
    }
    this.focusListener = navigation.addListener('focus', handleFocus);
    // 注册后立即判断当前页面是否已聚焦，是就主动执行回调
    if (navigation.isFocused()) {
        handleFocus();
    }
}

componentWillUnmount() {
    this.focusListener?.remove();
}

内容的提问来源于stack exchange，提问作者Anuj Raghuvanshi