React Native: Görüntü tabanlı bir haber beslemesinin performans gösterimi

Question

Yerel görüntülemede görüntü tabanlı bir haber beslemesinin oluşturulması için en iyi yöntemler nelerdir?

Her hikayenin bir kapak resmi ve ardından bir yıldız derecelendirmesinin (1-5 resimden oluşan) bulunduğu çok basit bir haber beslemem var. İlk render sırasında, görüntüler rastgele sırayla yüklenir ve korkunç ve doğal olmayan görünüyor.

Here's a 7s video showing the screen transition and render.

görüntüleri işlemek veya tüm blok yüklenene kadar bir hikaye işlemek için değil sırayı kontrol için herhangi bir yolu var mı?

Yardımcı olabilirse, kod aşağıdadır. Satırları oluşturmak için IncrementalListView kullanma. Sürüm oluşturma, iOS 9.3, iPhone 6. Her kapak resmi ~ 55kb JPG, ve yıldız ~ 3kb PNG'dir. Her iki görüntü de pakete paketlenir. 3/31

GÜNCELLEME yerine scrollview doğrudan kılma IncrementalListView kullanılacak kodu değişti, ancak bu yardım etmedi. Sorun, görüntülerin nasıl oluşturulduğu ile değil deşifre edilmesi ve işlenmesiyle ilgili gibi görünüyor.

class DiscoverRow extends React.Component { 
    render() { 
    let images = { 
     wide: { 
     data: require('../img/img-wide.jpg'), 
     height: 200, 
     width: 376 
     } 
    }; 
    let title = this.props.event.name; 
    let date = "Tomorrow"; 
    let place = this.props.event.venue.name; 
    const newHeight = images.wide.height/images.wide.width * screenWidth; 
    return (

     <View style={[rowStyles.cell]}> 
      <View style={{ borderRadius: 15 }}> 
      <Image resizeMode={'stretch'} source={images.wide.data} style={[rowStyles.thumbnail]} /> 
      <View style={[rowStyles.annotationsContainer]}> 
       <View style={rowStyles.textContainer}> 
       <AHStarRating starColor={gConstants.themeColor} disabled rating={4.5} style={{ width: 100 }} /> 
       <AHText style={rowStyles.title}>{title}</AHText> 
       <AHText style={rowStyles.date}>{date}</AHText> 
       </View> 
       <View style={rowStyles.commentsContainer}> 
       <Image source={require('../img/chat.png')} 
        style={{ width: 36, height: 36, 
        tintColor: gConstants.themeColor, 
        backgroundColor: 'transparent' }} 
       /> 
       <TouchableWithoutFeedback onPress={this._poop}> 
        <Image 
        source={require('../img/heart.png')} 
        style={{ width: 36, height: 36, 
         tintColor: gConstants.themeColor, 
         backgroundColor: 'transparent' }} 
        /> 
       </TouchableWithoutFeedback> 
       </View> 
      </View> 
      </View> 
     </View> 
    ); 
    } 
} 

class DiscoverPage extends React.Component { 

    static relay = { 
    queries: { viewer:() => Relay.QL`query { viewer }` }, 
    fragments: { 
     viewer:() => Relay.QL` 
     fragment on Viewer { 
      events { 
      id 
      name 
      venue { 
       name 
      } 
      } 
     } 
     `, 
    }, 
    }; 

    componentDidMount() { 
    InteractionManager.runAfterInteractions(() => { 
     this.setState({ renderPlaceholderOnly: false }); 
    }); 
    } 

    componentWillReceiveProps(nextProps) { 
    if (!nextProps.relayLoading) { 
     const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
     this.setState({ 
     dataSource: ds.cloneWithRows(nextProps.viewer.events), 
     }); 
    } 
    } 

    _renderRow(event: Object, sectionID: number, rowID: number) { 
     return <DiscoverRow 
     onPress={() => Actions.event({ event })} 
     key={`comment-${rowID}`} event={event} 
     />; 
    } 

    render() { 
    if (this.props.relayLoading || this.state.renderPlaceholderOnly) { 
     return <View><AHText>Relay loading</AHText></View>; 
    } else { 
     return (
     <View style={styles.container}> 
      <AHNavBar title={'Discover'} leftTitle={""} rightImage={require('../img/filter.png')} /> 
      <IncrementalListView 
      initialListSize={3} 
      dataSource={this.state.dataSource} 
      renderRow={this._renderRow} 
      renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} 
      style={styles.separator} />} 
      /> 
     </View> 
    ); 
    } 
    } 
} 

Answer 1

Bir ListView yerine ScrollView ile uygulamalıdır. ListView, kaydırma performansını artıran performans iyileştirmelerine sahiptir. React Native Docs yılında ListView bölümünden

:

dinamik potansiyel yüklenirken sorunsuz ListView kaydırma yapmak için tasarlanmış bir kaç performans operasyonları vardır çok büyük (veya kavramsal sonsuz) veri