如何在React Native當前屏幕上顯示時主動刷新FlatList？

我正在使用React Native創建一個實時聊天應用程序。我使用<FlatList>作爲主屏幕上的聊天頻道列表，我正在使用StackNavigator用於屏幕之間的導航。現在我試圖讓<FlatList>從後端重新獲取數據，並在用戶導航回主屏幕時重新提交數據。如何在React Native當前屏幕上顯示時主動刷新FlatList？

一個例子是用戶進入聊天頻道，應用程序導航到聊天詳情屏幕，用戶在那裏發送一些消息，當用戶按下後退按鈕並導航回到主聊天頻道列表屏幕時， <FlatList>應該從後端重新繪製並重新顯示自己的最新數據。（重新排序最近的頻道到頂端等）

現在拉到刷新實施，但問題是我怎麼知道用戶已導航回到主屏幕以及如何積極呼叫刷新<FlatList>何時那個會發生。

下面是我的一些代碼：

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> 
 
) 
 
}

來源

2017-10-13 Yuxiao Ma

，當你瀏覽到ChatDetails屏幕您可以傳遞一個回調作爲導航PARAM：

this.props.navigation.navigate(
    'ChatDetails', 
    { 
    onGoBack:() => console.log('Will go back from ChatDetails'), 
    } 
);

所以，而不是console.log()，做你的fetch()或/和任何你想要的。

來源

2017-10-13 21:33:38

如何在React Native當前屏幕上顯示時主動刷新FlatList？

回答

相關問題