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

【问题标题】：Re-render component when navigating the stack with React Navigation使用 React Navigation 导航堆栈时重新渲染组件
【发布时间】：2019-03-19 05:46:31
【问题描述】：

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

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

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

【问题讨论】：

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

标签： reactjs react-native react-navigation expo

【解决方案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 函数并用您的“刷新”函数更改它。

希望这会有所帮助。

【讨论】：