1
私はReact Nativeを使用してライブチャットアプリを作成しています。 メイン画面のチャットチャンネルリストに<FlatList>を使用していますが、画面間のナビゲーションにはStackNavigatorを使用しています。 私は<FlatList>がバックエンドからデータを再取得させ、ユーザーがメイン画面に戻るたびに再レンダリングさせようとしています。React Nativeの現在の画面に表示されるたびにFlatListを積極的にリフレッシュする方法は？
ユーザーはチャットチャンネルを入力し、チャットの詳細画面に移動し、そこにメッセージを送信します。ユーザーが戻るボタンを押してメインのチャットチャンネルリスト画面に戻ると、 <FlatList>はバックエンドから再解析し、最新のデータを表示するために再レンダリングする必要があります。 （最新のチャンネルをトップに並べ替えるなど）
今すぐリフレッシュを実行するが実装されているが、問題はユーザーがメイン画面に戻ったことをどのようにして知っているのか、また、<FlatList>発生します。だから
this.props.navigation.navigate(
'ChatDetails',
{
onGoBack:() => console.log('Will go back from ChatDetails'),
}
);
：
onRefresh = async() => {
const { data } = this.props
try {
this.setState({ refreshing: true })
await data.refetch({ page: 1 })
} catch (e) {
// todo
} finally {
this.setState({
refreshing: false,
})
}
}
const NudgeList = ({
nudges,
loading,
refreshing,
onRefresh,
}) => {
let inner
if (loading && !refreshing && !fetchingMore) {
inner = (
<View style={styles.center}>
<ActivityIndicator animating />
</View>
)
} else {
inner = (
<FlatList
onRefresh={onRefresh}
refreshing={refreshing || false}
scrollEventThrottle={400}
data={nudges}
renderItem={({ item }) => (
<NudgeCard nudge={item} {...{ onOpenNudge }} />
)}
/>
)
}
return (
<View style={styles.container}>
{inner}
</View>
)
}