React Native：基於圖像的新聞源的性能渲染

Question

基於圖像的新聞源渲染的最佳實踐是什麼？

我有一個非常簡單的新聞推送，每個故事都有一個封面圖片，然後是一個星級評分（由1-5張圖片組成）。在初始渲染時，圖像顯示爲以隨機順序加載，看起來很糟糕，非本機。

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

有什麼辦法來控制它的圖像渲染，或直到整個數據塊裝入不渲染故事的順序？

如果有幫助，代碼如下。使用IncrementalListView來渲染行。發佈版本，iOS 9.3，iPhone 6.每個封面圖片是〜55kb JPG，而明星是〜3kb PNG。這兩個圖像都打包到捆綁包中。

UPDATE 3/31

我改變，而不是使用直接渲染到滾動型IncrementalListView的代碼，但是這並沒有幫助。這個問題似乎與圖像的解碼和渲染方式有關，而不是如何渲染行。

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

你應該用ListView而不是ScrollView實現。 ListView具有提高滾動性能的性能優化。

從React Native Docs的ListView部分：

有旨在使ListView控件 滾動流暢而動態加載可能一些性能操作非常大（或 概念上是無限的）數據集