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

私はScrollViewに直接描画するのではなく、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

あなたはScrollViewの代わりにListViewで実装する必要があります。 ListViewには、スクロールのパフォーマンスを向上させるパフォーマンスの最適化があります。 React Native DocsでListViewセクションから

：

を動的に潜在的に読み込みながら円滑にリストビュー スクロールを行うように設計され、いくつかのパフォーマンスの動作があり、非常に大きな（又は 概念的に無限の）データ