我在組件上看到很長的渲染時間,並想知道是否可以更有效地實現相同的效果,或者如果它僅僅是React Native的兩個多元素/太多計算。在React-Native中可以更高效地實現此網格佈局嗎?
佈局看起來像這樣:
<View style={{flex: 1, flexDirection: 'row', alignItems: 'stretch'}}>
<View style={{width: 250}} />
<View style={{flex: 1}}>
<View style={{height: 50}} />
<View style={{flex: 1}}>
<Grid columns={15} rows={40} />
</View>
</View>
</View>
凡Grid
部件簡單地呈現使用flex
含有每種rows
行相等的寬度/高度的columns
列的網格。這裏是a link一個完整的例子。
無論是在仿真器還是一個全新的設備上,dev
標誌都關閉了,我看到渲染時間在1.5到3.5秒之間,這看起來很多。如果我添加一個按鈕來切換左側面板,佈局還需要這段時間來更新。
我沒有使用flex
並使用預先計算Dimensions.get('window')
這兩個州的所有值,但結果是相似的嘗試。
systrace
(可用here)顯示所有工作都在UI和Render線程中完成,並且還顯示一些警告:Long View#draw()
。
我是正確的思維,在這一點上它只是太多的元素或過於複雜的佈局爲本地做出反應?如果是的話,是否還有其他技術可以用來繪製所有這些元素?可能類似於瀏覽器的Canvas
?如果不是我做錯了什麼?
非常感謝您的幫助。
作爲替代方案,您可以使用react-native-grid-view。 – sekogs
@sekogs謝謝!我會試一試。最終,我還需要其他東西,因爲我需要不同行大小的列,並且需要防止滾動(我認爲react-native-grid-view使用ListView)。但是我會測試perf並將它發佈到這裏,在測試react-native-grid-view之後肯定會很有趣 – VonD
,這個數字稍微好一些,但平均仍然高於1.2s – VonD