[英]React Native: Performance Issue while using 2 FlatLists
I have 2 FlatList inside a ScrollView. 我在ScrollView中有2 FlatList。 The ScrollView and the second FlatList lags as soon as the FlatList comes into view.
一旦FlatList进入视图,ScrollView和第二个FlatList就会滞后。 I tried keeping only one FlatList and it works pretty smooth.
我尝试仅保留一个FlatList,并且运行起来非常流畅。 I'm also using PureComponent to render each individual items for the FlatList
我还使用PureComponent为FlatList渲染每个单独的项目
class HourlyItem extends React.PureComponent {
render() {
return (
<View style={styles.row_2_item}>
<Text style={styles.row_2_item_time}>11:00</Text>
<Image source={{uri: 'icon_sun'}} style={styles.row_2_image1}/>
<Text style={styles.row_2_item_temp}>25°</Text>
<View style={styles.row_2_item_rain_holder}>
<Image source={{uri: 'icon_rain_umbrella'}} style={styles.row_2_item_rain_icon}/>
<Text style={styles.row_2_item_rain_value}>0%</Text>
</View>
</View>
)
}
}
class DailyItem extends React.PureComponent {
render() {
return (
<View style={styles.row_2_item}>
<Text style={styles.row_2_item_time}>THU</Text>
<Image source={{uri: 'icon_cloud_sun'}} style={styles.row_2_image1}/>
<Text style={[styles.row_2_item_temp, {fontFamily: "avenir_medium"}]}>18°/32°</Text>
<View style={styles.row_2_item_rain_holder}>
<Image source={{uri: 'icon_rain_umbrella'}} style={styles.row_2_item_rain_icon}/>
<Text style={[styles.row_2_item_rain_value, {fontFamily: "avenir_medium"}]}>0%</Text>
</View>
</View>
)
}
}
export class HomePage extends Component {
_renderHourlyItem = ({item}) => (
<HourlyItem produto={item.key}/>
);
_renderDailyItem = ({item}) => (
<DailyItem produto={item.key}/>
);
render() {
return (
<View style={styles.container}>
<StatusBar hidden={true}/>
<View style={[styles.mainHeader, {top: this.state.mainHeaderTop}]}>
<Text style={[styles.innerHeaderTemp, {fontSize: 52,lineHeight: 53}]}>28°</Text>
<Text style={styles.innerHeaderLocation}>Kozhikode</Text>
<Text style={styles.innerHeaderDate}>Tuesday, Jan 17</Text>
</View>
<ParallaxScrollView
onScroll={this.handleScroll}
contentBackgroundColor="#fff"
parallaxHeaderHeight={PARALLAX_HEADER_HEIGHT}
backgroundSpeed={10}
fadeOutForeground={false}
renderBackground={() => (
<View key="background">
<View style={styles.iconHolder}>
<Icon style={styles.searchIcon} name="ios-search" size={25} color="rgba(0,0,0,0.75)" />
</View>
<View style={[styles.iconHolder, styles.locationIconHolder]}>
<Icon style={styles.searchIcon} name="ios-pin" size={25} color="rgba(0,0,0,0.75)" />
</View>
<Image source={{uri: 'sun',
width: width,
height: 480}} style={{resizeMode: 'cover'}}/>
</View>
)}
renderForeground={() => (
<View key="parallax-header" style={[styles.parallaxHeader, {borderTopWidth: this.state.slantedHeight}]}>
</View>
)}>
<View style={styles.body}>
<View style={styles.innerHeader}>
<Text style={[styles.innerHeaderTemp, {fontSize: this.state.innerHeaderTempFontSize,
lineHeight: this.state.innerHeaderTempLineHeight}]}>28°</Text>
<Text style={styles.innerHeaderLocation}>Kozhikode</Text>
<Text style={styles.innerHeaderDate}>Tuesday, Jan 17</Text>
</View>
<Text style={styles.summary}>Light rain on Saturday through Tuesday, with temperatures falling to 28°C on Tuesday</Text>
<View style={[styles.boxHolder, {backgroundColor: '#3a99d8', padding: 10}]}>
<FlatList
horizontal={true}
windowSize={5}
showsHorizontalScrollIndicator={false}
data={[{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}, {key: 'f'}]}
renderItem={this._renderHourlyItem}
/>
</View>
<View style={[styles.boxHolder, {backgroundColor: '#975db4', padding: 10}]}>
<FlatList
horizontal={true}
windowSize={5}
showsHorizontalScrollIndicator={false}
data={[{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}, {key: 'f'}]}
renderItem={this._renderDailyItem}
/>
</View>
</View>
</ParallaxScrollView>
</View>
);
}
As you can see my FlatList items have a lot of Views inside it. 如您所见,我的FlatList项目内部有很多视图。 If I delete 2 or 3 views also the performance gets much better.
如果删除2或3个视图,性能也会好得多。 But can't really do that, as the UI needs that many views.
但是实际上不能做到这一点,因为UI需要那么多视图。
Try adding shouldComponentUpdate
to each of your React.PureComponent
尝试将
shouldComponentUpdate
添加到每个React.PureComponent
Also I seem to have performance issues when I have a FlatList
inside of a ScrollView
, try moving your FlatList out of the ParallaxScrollView
当我在
ScrollView
有一个FlatList
时,我似乎也遇到性能问题,请尝试将FlatList从ParallaxScrollView
移出
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.