我stackNavigator
用于在屏幕之间导航。我componentDidMount()
在第二个活动中调用了两个 API 函数。当我第一次加载它时,它会成功加载。然后我按返回按钮返回第一个活动。然后,如果我再次进行第二个活动,则不会调用 API,并且会出现渲染错误。我无法为此找到任何解决方案。任何建议,将不胜感激。
11 回答
如果有人在 2019 年来到这里,试试这个:
import {NavigationEvents} from 'react-navigation';
将组件添加到您的渲染中:
<NavigationEvents onDidFocus={() => console.log('I am triggered')} />
现在,这个 onDidFocus 事件将在每次页面获得焦点时触发,尽管来自 goBack() 或导航。
如果使用 NavigationEvents 组件的赞成语法不起作用,您可以尝试以下操作:
// no need to import anything more
// define a separate function to get triggered on focus
onFocusFunction = () => {
// do some stuff on every screen focus
}
// add a focus listener onDidMount
async componentDidMount () {
this.focusListener = this.props.navigation.addListener('didFocus', () => {
this.onFocusFunction()
})
}
// and don't forget to remove the listener
componentWillUnmount () {
this.focusListener.remove()
}
React-navigation 文档明确描述了这种情况:
考虑一个带有屏幕 A 和 B 的堆栈导航器。导航到 A 后,它的 componentDidMount 被调用。在压入 B 时,它的 componentDidMount 也会被调用,但 A 仍然挂载在堆栈上,因此不会调用它的 componentWillUnmount。
从 B 回到 A 时,调用了 B 的 componentWillUnmount,但 A 的 componentDidMount 没有被调用,因为 A 一直处于挂载状态。
现在有3个解决方案:
订阅生命周期事件
...
React Navigation 向订阅它们的屏幕组件发出事件。您可以订阅四种不同的事件 :
willFocus
、willBlur
和。在 API 参考中阅读有关它们的更多信息。didFocus
didBlur
您的许多用例可能都包含在
withNavigationFocus
高阶组件、<NavigationEvents />
组件或useFocusState
钩子中。
- 高阶
withNavigationFocus
分量 -
组件_
<NavigationEvents />
- useFocusState挂钩(已弃用)
withNavigationFocus
高阶分量
import React from 'react';
import { Text } from 'react-native';
import { withNavigationFocus } from 'react-navigation';
class FocusStateLabel extends React.Component {
render() {
return <Text>{this.props.isFocused ? 'Focused' : 'Not focused'}</Text>;
}
}
// withNavigationFocus returns a component that wraps FocusStateLabel and passes
// in the navigation prop
export default withNavigationFocus(FocusStateLabel);
<NavigationEvents />
零件
import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';
const MyScreen = () => (
<View>
<NavigationEvents
onWillFocus={payload => console.log('will focus', payload)}
onDidFocus={payload => console.log('did focus', payload)}
onWillBlur={payload => console.log('will blur', payload)}
onDidBlur={payload => console.log('did blur', payload)}
/>
{/*
Your view code
*/}
</View>
);
export default MyScreen;
useFocusState 钩子
首先安装库yarn add react-navigation-hooks
import { useNavigation, useNavigationParam, ... } from 'react-navigation-hooks'
function MyScreen() { const focusState = useFocusState(); return <Text>{focusState.isFocused ? 'Focused' : 'Not Focused'}</Text>; }
这是我的个人解决方案,仅在从您的 API 获取数据时使用onDidFocus()
和onWillFocus()
呈现:
import React, { PureComponent } from "react";
import { View } from "react-native";
import { NavigationEvents } from "react-navigation";
class MyScreen extends PureComponent {
state = {
loading: true
};
componentDidMount() {
this._doApiCall();
}
_doApiCall = () => {
myApiCall().then(() => {
/* Do whatever you need */
}).finally(() => this.setState({loading: false}));
};
render() {
return (
<View>
<NavigationEvents
onDidFocus={this._doApiCall}
onWillFocus={() => this.setState({loading: true})}
/>
{!this.state.loading && /*
Your view code
*/}
</View>
);
}
}
export default MyScreen;
即使您在屏幕之间导航,React-navigation 也会保持组件挂载。您可以使用该组件对这些事件做出反应:
<NavigationEvents
onDidFocus={() => console.log('hello world')}
/>
有关此组件的更多信息,请点击此处。
2020 年解决方案 / React Navigation v5
在屏幕的 ComponentDidMount 内
componentDidMount() {
this.props.navigation.addListener('focus', () => {
console.log('Screen.js focused')
});
}
https://reactnavigation.org/docs/navigation-events/
或者:将 addListener 方法放在构造函数中,以防止重复调用
根据反应导航文档,我们可以使用如下
componentDidMount () {
this.unsubscribe= this.props.navigation.addListener('focus', () => {
//Will execute when screen is focused
})
}
componentWillUnmount () {
this.unsubscribe()
}
类似于 vitosorriso 的答案,但应该根据文档将 didFocus 更改为焦点
您希望在每次使用drawernavigator
or导航到组件后执行某些操作stacknavigator
;为此目的NavigationEvents
,比componentDidMount
.
import {NavigationEvents} from "react-navigation";
<NavigationEvents onDidFocus={()=>alert("Hello, I'm focused!")} />
注意 :如果您想在每次使用抽屉导航或堆栈导航关注组件后执行任务,那么使用NavigationEvents
是更好的主意。但是,如果您想执行一次任务,则需要使用componenetDidMount
.
//na pagina que você quer voltar
import {NavigationEvents} from 'react-navigation';
async atualizarEstado() {
this.props.navigation.setParams({
number: await AsyncStorage.getItem('count'),
});}
render() {
return (
<View style={styles.container}>
<NavigationEvents onDidFocus={() => this.atualizarEstado()} />
</View>
);
}
https://reactnavigation.org/docs/navigation-events/
useEffect(() => {
const unsubscribe = props.navigation.addListener('focus', () => {
// do something
// Your apiCall();
});
return unsubscribe;
}, [props.navigation]);
我遇到过这个问题,问题是当你导航一个页面时,第一次调用构造函数、componentWillmount、render componentDidmount,但是第二次导航到同一页面时它只调用render,所以如果你做任何API调用或来自 componentDidmount 的东西不会被调用,
并且 componentWillunmount 也从未调用过。
您可以使用此方法,如果您使用带有类组件的 react-navigation 5.x,它可以解决您的问题。
为每个类组件页面添加此方法并从构造函数调用此方法一次
constructor(props) {
super(props);
this.state = {
...
};
...
this.navigationEventListener(); // call the function
}
navigationEventListener = () => { // add this function
let i = 0;
const initialState = this.state;
this.props.navigation.addListener('focus', () => {
if (i > 0) {
this.setState(initialState, () => {
//this.UNSAFE_componentWillMount(); // call componentWillMount
this.componentDidMount(); // call componentDidMount
});
}
});
this.props.navigation.addListener('blur', () => {
this.componentWillUnmount(); //call componentWillUnmount
++i;
});
}
在 React 中,仅在安装组件时才调用 componentDidMount。我认为您要做的是在返回 StackNavigator 时调用您的 API。当您在父屏幕上调用导航时,您可以将回调函数作为参数传递:
navigate("Screen", {
onNavigateBack: this.handleOnNavigateBack
});
handleOnNavigateBack = () => {//do something};
在儿童屏幕上
this.props.navigation.state.params.onNavigateBack();
this.props.navigation.goBack();