我目前正在使用react-navigation堆栈和选项卡导航。
每次用户导航到特定屏幕时是否可以重新渲染组件？我想确保componentDidMount()每次到达特定屏幕时都重新运行，因此我通过调用适当的动作创建者从服务器获取最新数据。
我应该考虑哪些策略？我很确定这是一个常见的设计模式，但我没有看到记录的例子。
使用 React Navigation 导航堆栈时重新渲染组件
IT技术
reactjs
react-native
react-navigation
expo
2021-04-25 21:04:39
4个回答
如果您使用的是 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])
}
从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();
替换有效负载函数并使用“刷新”函数对其进行更改。
希望这会有所帮助。
应 Dimitri 在评论中的要求，我将向您展示如何强制重新渲染组件，因为这篇文章给我们留下了这种歧义。
如果您正在寻找如何强制重新渲染您的组件，只需更新一些状态（其中任何一个），这将强制重新渲染组件。我建议你创建一个控制器状态，也就是说，当你想强制渲染时，只需用一个不同于前一个的随机值更新那个状态。
添加一个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]);
......