2016-03-15 80 views
2

我在組件上看到很長的渲染時間,並想知道是否可以更有效地實現相同的效果,或者如果它僅僅是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?如果不是我做錯了什麼?

非常感謝您的幫助。

+0

作爲替代方案,您可以使用react-native-grid-view。 – sekogs

+0

@sekogs謝謝!我會試一試。最終,我還需要其他東西,因爲我需要不同行大小的列,並且需要防止滾動(我認爲react-native-grid-view使用ListView)。但是我會測試perf並將它發佈到這裏,在測試react-native-grid-view之後肯定會很有趣 – VonD

+0

,這個數字稍微好一些,但平均仍然高於1.2s – VonD

回答

1

如果您不需要在細胞打印任何東西,但只需要在網格顯示,可以呈現列,然後在他們呈現絕對定位的行。

這意味着對於x * y網格,您將有x + yViews而不是x * y:效率更高!

分量的render方法的表現似乎直接對本地Views涉及的數量,這也就是爲什麼在Android上存在collapsable道具依賴:它允許通過不渲染是那些以減少原生Views數量,佈局而已。

如果需要渲染所有這些Views,那麼有可能不是很多工作要做,加快反應母語爲今天的過程,但我很樂意被證明是錯誤的!

相關問題