[英]React Native - How to refresh FlatList when back to previous page?
I will try to explain my case: 我会尝试解释我的情况:
I have 2 pages/screens 我有2页/屏幕
SreenA.js : SreenA.js:
...
<FlatList>
</FlatList>
...
ScreenB.js : ScreenB.js:
...
<Button> This button for back to ScreenA </Button>
...
What i want to achieve : 我想要实现的目标:
When i press back button in screenB , my app will back to screenA. 当我按下screenB中的后退按钮时,我的应用程序将返回到screenA。 When i come back to screenA , i need to refresh the FlatList. 当我回到screenA时,我需要刷新FlatList。 (each time i back to screenA). (每次我回到screenA)。
How i achieve that case in Android Native ? 我如何在Android Native中实现这种情况?
I add this section to help you to more understand what challenge i face. 我添加此部分可帮助您更好地了解我面临的挑战。 In Android Native, i will use onResume to refresh the list (onResume called everytime the screen/page called). 在Android Native中,我将使用onResume刷新列表(每次调用屏幕/页面时调用onResume)。
What i already try but not work for me now : 我已经尝试但现在不适合我:
I already try this but what i get it just called when app in background and then show in foreground : 我已经尝试了这个但是我得到它只是在应用程序在后台调用然后显示在前台:
state = {
appState: AppState.currentState
}
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
console.log('App has come to the foreground!')
//i place the code here for refresh the flatList. But not work
}
this.setState({appState: nextAppState});
}
Add navigation.addListener
to fire every time a page receives navigation focus. 添加navigation.addListener
以在每次页面接收导航焦点时触发。
As an example: 举个例子:
class Page1 extends React.Component {
constructor(props) {
super(props);
this.state = { ts: 0 }
// this will fire every time Page 1 receives navigation focus
this.props.navigation.addListener('willFocus', () => {
this.setState({ ts: Date.now() })
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Page 1 [{this.state.ts}]
</Text>
<Button title="Page 2" onPress={() => this.props.navigation.navigate('Page2')}/>
</View>
);
}
}
For the full example, check the following snack on your phone. 有关完整示例,请在手机上查看以下小吃 。 The timestamp will update every time you navigate back to page 1 but not when the app resumes. 每次导航回第1页时,时间戳都会更新,但不会在应用程序恢复时更新。
You should be able to expand it for your needs from this example. 您应该可以从此示例中根据需要扩展它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.