React Native: Performance Issue while using 2 Flat

问题:

I have 2 FlatList inside a ScrollView. The ScrollView and the second FlatList lags as soon as the FlatList comes into view. I tried keeping only one FlatList and it works pretty smooth. I'm also using PureComponent to render each individual items for the 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. If I delete 2 or 3 views also the performance gets much better. But can't really do that, as the UI needs that many views.

回答1:

Try adding shouldComponentUpdate to each of your 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