React Native:使用 2 FlatLists 时出现性能问题 [英] React Native: Performance Issue while using 2 FlatLists

问题描述

我在 ScrollView 中有 2 个 FlatList.一旦 FlatList 进入视图，ScrollView 和第二个 FlatList 就会滞后.我试着只保留一个 FlatList 并且它工作得非常顺利.我还使用 PureComponent 为 FlatList 呈现每个单独的项目

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>
        );
    }

正如你所看到的，我的 FlatList 项目里面有很多视图.如果我删除 2 或 3 个视图，性能也会变得更好.但不能真正做到这一点，因为 UI 需要那么多视图.

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.

推荐答案

尝试添加 shouldComponentUpdate 到你的每一个 React.PureComponent

当我在 ScrollView 中有一个 FlatList 时，我似乎也有性能问题，请尝试将您的 FlatList 移出 ParallaxScrollView

Also I seem to have performance issues when I have a FlatList inside of a ScrollView, try moving your FlatList out of the ParallaxScrollView

这篇关于React Native:使用 2 FlatLists 时出现性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！