使用 React Navigation 导航堆栈时重新渲染组件

Question

我目前正在使用

react-navigation

进行堆栈和选项卡导航。

每次用户导航到特定屏幕时是否可以重新渲染组件？我想确保每次到达特定屏幕时都重新运行

componentDidMount()

，因此我通过调用适当的操作创建器从服务器获取最新数据。

我应该考虑什么策略？我很确定这是一种常见的设计模式，但我没有看到记录的示例。

Answer 1

如果您使用

React Navigation 5.X

，只需执行以下操作：

import { useIsFocused } from '@react-navigation/native'

export default function App(){

    const isFocused = useIsFocused()

    useEffect(() => {
        if(isFocused){
            //Update the state you want to be updated
        }
    }, [isFocused])

}

useIsFocused 钩子检查屏幕当前是否处于焦点状态。当屏幕聚焦时，它返回一个布尔值，该值是 true；当屏幕未聚焦时，它返回 false。

Answer 2

React Navigation 生命周期事件 引用自 react-navigation

React Navigation 向订阅它们的屏幕组件发出事件。您可以订阅四种不同的事件：willFocus、willBlur、didFocus 和 didBlur。在 API 参考中阅读有关它们的更多信息。

---

我们来看看吧，

使用 导航侦听器，您可以向页面添加事件侦听器，并在每次页面聚焦时调用一个函数。

const didBlurSubscription = this.props.navigation.addListener(
  'willBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);

// Remove the listener when you are done
didBlurSubscription.remove();

替换 payload 函数并将其更改为“刷新”函数。

希望这会有所帮助。

Answer 3

您还可以使用 useFocusEffect 挂钩，然后每次您导航到使用该挂钩的屏幕时，它都会重新渲染。

useFocusEffect(()=> {
    your code
})

Answer 4

应 Dimitri 在评论中的要求，我将向您展示如何强制重新渲染组件，因为这篇文章给我们留下了这种歧义。

如果您正在寻找如何强制重新渲染组件，只需更新某些状态（其中任何一个），这将强制重新渲染组件。我建议你创建一个控制器状态，也就是说，当你想强制渲染时，只需用与之前不同的随机值更新该状态即可。

Answer 5

这个效果很好： 我们监听焦点事件，该事件在打印当前屏幕时触发。在这种情况下，我们调用附加的回调函数来定义我们想要执行的操作。完成后不要忘记删除事件侦听器。

import { useNavigation } from "@react-navigation/native";
const navigation = useNavigation();
useEffect(() => {
  const didFocus = navigation.addListener(
    'focus',
    () => {
      yourFunctionToCall();
    }
  );
  
  // Remove the listener when you are done
  return didFocus;
}, [navigation]
);

Answer 6

导航到屏幕时触发渲染。

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

// Quick little re-render hook       
function useForceRender() {
    const [value, setValue] = useState(0);
    return [() => setValue(value + 1)];
}

export default function Screen3({ navigation }) {
  const [forceRender] = useForceRender();

  // Trigger re-render hook when screen is focused
  // ref: https://reactnavigation.org/docs/use-focus-effect
  useFocusEffect(useCallback(() => { 
    console.log("NAVIGATED TO SCREEN3")
    forceRender();
  }, []));
}

注：

"@react-navigation/native": "6.0.13",
"@react-navigation/native-stack": "6.9.0",