我正在使用名為 selectedStream 的狀態設定我的 flatlist 組件顯示的資料。每次用戶按下不同的組選項時， selectedStream 都會發生變化。我注意到 flatlist 需要 1-3 秒來重繪 它當前已經顯示的所有帖子。我希望有一個加載指示器，以便在指示器消失時，串列已經正確顯示了新更新的資料。
<FlatList
maxToRenderPerBatch={5}
bounces={false}
windowSize={5}
ref={feedRef}
data={selectedStream}/>
uj5u.com熱心網友回復：
每當我們處理與 UI 相關的任何事情時，有時我們可能會面臨 UI 重新渲染的延遲。但是，我們需要首先弄清楚究竟是什么導致了延遲。
詢問您的代碼的正確問題是：
專案的渲染時間是否比預期的要長？或者，資料是否延遲傳遞，因為它依賴于 API 呼叫或任何其他異步任務？
一旦你回答了這個問題，你可能會遇到兩種情況：
1. FlatList 需要更長的時間來呈現視圖
這通常不會發生，因為 RNFlatList只會在任何給定時間呈現對用戶可見的視圖，并且會在用戶滾動串列時不斷呈現新視圖。但是，可能存在一些閃爍的問題，您可以參考以下文章：
優化 RN FlatList 的 8 種方法
2. 傳遞資料導致延遲
這是最常見的場景，我們可以呼叫 API 端點并獲取一些資料，然后相應setState地更新任何視圖/串列。一般的方法是顯示某種進度條，表明應用程式很忙，從而保持適當的用戶體驗。最簡單的方法是通過條件渲染。
一般的例子是：
const [myList, setMyList] = useState();
function callAPIforMyList(){
// logic goes here
}
return {
{myList ? <ActivityIndicator .../> : <Flatlist .... />
}
上面的代碼將檢查myListisundefined或 has a value。如果undefined，它將使ActivityIndicator不然FlatList。
另一種情況可能是當myList可能有現有資料但您需要用新資料更新/替換它時。這樣上面的檢查可能會失敗，所以我們可以再做一次檢查：
const [myList, setMyList] = useState();
const [isAPIbusy, setAPIBusy] = useState(false)
function callAPIformyList() {
setAPIBusy(true)
/// other logics or async calls or redux-dispatch
setAPIBusy(false)
}
return {
{!isAPIBusy && myList ? (<Flatlist .... />) : (<ActivityIndicator .../>)
}
您可以使用更多車削來添加多個條件，例如isAPIBusy ? <View1> : otherBoolean ? <View2> : <Default_View_When_No_Conditions_Match)/>
希望這有助于澄清您的需求。
uj5u.com熱心網友回復：
首先用視圖組件包裝你的平面串列，并在視圖中放置一個 ActivityIndi??cator，然后你每次用戶更改資料時都需要一個加載器狀態，當用戶更改組選項時，加載器將為真，當 selectedStream 更改時，它將回傳到false，在 ActivityIndi??cator 影片道具中使用加載器。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/368788.html