0

我在 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 需要那么多视图。

4

1 回答 1

0

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

FlatList此外，当我有 a 的内部时，我似乎遇到了性能问题ScrollView，请尝试将您的 FlatList 移出ParallaxScrollView

于 2017-09-07T02:26:45.817 回答