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

Posted 2023-02-22

【中文标题】使用 React Navigation 导航堆栈时重新渲染组件

【英文标题】：Re-render component when navigating the stack with React Navigation

【发布时间】：2019-03-19 05:46:31

【问题描述】：

我目前正在使用react-navigation 进行堆栈和选项卡导航。

是否可以在用户每次导航到特定屏幕时重新渲染组件？我想确保每次到达特定屏幕时都重新运行componentDidMount()，因此我通过调用适当的操作创建者从服务器获取最新数据。

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

【问题讨论】：

您使用的是模式：模式还是经典导航？

【参考方案1】：

添加一个 useEffect 钩子，其中包含您想要响应的匹配参数。确保使用控制组件的参数，以便重新渲染。示例：

export default function Project(props) 
    const [id, setId] = useState(props?.match?.params?.id);
    const [project, setProject] = useState(props?.match?.params?.project);

    useEffect(() => 
        if (props.match) 
            setId(props.match?.params.id);
            setProject(props.match?.params.project);
        
    , [props.match?.params]);
   
......

【参考方案2】：

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

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

【参考方案3】：

如果您使用的是 React Navigation 5.X，只需执行以下操作：

import  useIsFocused  from '@react-navigation/native'

export default function App()

const isFocused = useIsFocused()

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

【讨论】：

只是说，感谢分享isFocused 但这并没有显示重新渲染任何内容的方法，因此不能成为公认的答案。我找不到用它重新渲染视图的方法。我不得不再次问这个问题here

好吧，我认为您在我谈到的代码的功能方面存在错误。这段代码是为了让你知道和更新屏幕聚焦时的任何状态，这段代码不会强制渲染。

问题是关于re-render（问题的第一个词），我最终在组件上使用了key`和setMyKey(Math.random())

功能组件的每次状态更新都会强制重新渲染，所以它起作用了！好！

我仍然认为你应该展示如何重新渲染，因为这是谷歌搜索问题时的首选。

【参考方案4】：

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

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

---

让我们看看这个，

使用navigation listeners，您可以向页面添加事件监听器，并在每次页面获得焦点时调用函数。

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

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

替换 payload 函数并用您的“刷新”函数更改它。

希望这会有所帮助。