Question

我在ScrollView中有2个FlatList。一旦FlatList进入视图，ScrollView和第二个FlatList就会滞后。我试过只保留一个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>
        );
    }

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

Answer 1

尝试为React.PureComponent

中的每一个添加shouldComponentUpdate

当我在FlatList内部ScrollView时，我似乎遇到了性能问题，请尝试将FlatList移出ParallaxScrollView

React Native：使用2个FlatLists时的性能问题

1 个答案: