在加载React Native后渲染RSS Feed数据

Question

我似乎在缓慢加载数据，这会阻止我的映射自定义组件在渲染帧之前进行渲染 - 在相当长的时间内留出空白空间。我简单地使用rss feed数据，解析它，并从json内容制作一个定制的组件。这里是我的代码：

module.exports = React.createClass({ 
    /* 
    mixins : [ 
     Reflux.listenTo(FeedStore, 'onChange') 
    ], 
    */ 
    componentWillMount: function() { 
     Parse.User.currentAsync() 
      .then((user) => { this.setState({user: user}); }) 

     //get the latest articles on page load 
     //this will pre-fill out articles state 
     FeedStore.getArticles() 
      .then((data) => { 
       this.setState({ articles: data }); 
      }); 
    }, 
    getInitialState: function() { 
     return { 
      user: null, 
      username: null, 
      articles: [], 
     } 
    }, 
    render: function() { 

     var readings = this.state.articles; 

     return (
      <ScrollView> 
       <ArticleView 
        category={'Comedy'} 
        key={1} 
        heartText={'2.9k'} 
        categoryPress={this.dummy} 
        selected={false} 
        source={require('../img/test_view_1.png')} 
        text={'These 3 black comedians are finally being honored for the ways they paved & the history they made'} 
        onPress={this.dummy} /> 
       <ArticleView 
        category={'City Life'} 
        key={2} 
        heartText={'299'} 
        categoryPress={this.dummy} 
        selected={false} 
        source={require('../img/test_view_2.png')} 
        text={'portland forecast: approaching weekend storm could rival halloween deluge'} 
        onPress={this.dummy} /> 
       <ArticleView 
        category={'Music'} 
        key={3} 
        heartText={'250k'} 
        categoryPress={this.dummy} 
        selected={false} 
        source={require('../img/test_view_3.png')} 
        text={'kendrick lamar answers furgeson criticism with new song'} 
        onPress={this.dummy} /> 
       {this.renderArticleFeed(readings)} 
      </ScrollView> 
     ); 
    }, 
    renderArticleFeed: function(readings) { 
     var that = this; 
     //call to api to get articles from rss/api var Articles = 
     return readings.slice(0,4).map(function(article, i) { 
      console.log("========================"); 
      console.log(article.title); 
      console.log(article.mediaGroups[0].contents[0].thumbnails[0].url); 

      return <ArticleView 
        category={'Music'} 
        key={i} 
        heartText={'2.9k'} 
        categoryPress={that.dummy} 
        selected={false} 
        source={{uri: article.mediaGroups[0].contents[0].thumbnails[0].url }} 
        text={article.title} 
        onPress={that.dummy} /> 
     }); 

    }, 
    dummy: function() { 

    }, 
    /* 
    onChange: function(event, articles) { 
     this.setState({articles: articles}); //trigers re-render of component 
    } 
    */ 

}); 

我很想深入研究方法与数据加载帮助，然后在渲染的结果 - 数据实际上是格式化时间前，而不是立刻呈现。特别是slices.slice（0,4）.map（function（article，i）..函数应该处理的不仅仅是rss feed的4个例子 - 我需要它能够处理所有这些，或者至少所有这一切都在我向下滚动的部分

Answer 1

我确定了一个非常有效的（和很酷的）答案！你坚持api调用数据的方式是使用ListView，Facebook有好的信息。它的使用是有记录的here。查看关联的github回购here，它在连接概念点时很有帮助，所以我不会详细讨论。

var React = require('react-native'); 
var { 
    View, 
    Image, 
    StyleSheet, 
    Text, 
    ScrollView, 
    ActivityIndicatorIOS, 
    ListView, 
} = React; 

//additional libraries 
var Parse = require('parse/react-native'); 
//var Reflux = require('reflux'); 

//dynamic component references 
var ArticleView = require('./article-view/article-view'); 
var Api = require('../utils/api'); 
var FeedStore = require('../stores/feed-store'); 
//var Actions = require('../../actions'); 

//dimensions 
var Dimensions = require('Dimensions'); 
var window = Dimensions.get('window'); 

module.exports = React.createClass({ 
    componentWillMount: function() { 
     Parse.User.currentAsync() 
      .then((user) => { this.setState({user: user}); }) 
    }, 
    getInitialState: function() { 

     var getSectionData = (dataBlob, sectionID) => { 
      console.log("SectionID GIS, getSectionData: " + sectionID); 
      return dataBlob[sectionID]; 
     } 

     var getRowData = (dataBlob, sectionID, rowID) => { 
      console.log("RowID GIS, getRowData: " + rowID); 
      return dataBlob[sectionID + ':' + rowID]; 
     } 

     return { 
      user: null, 
      isLoaded: false, 
      dataSource : new ListView.DataSource({ 
       getSectionData   : getSectionData, 
       getRowData    : getRowData, 
       rowHasChanged   : (row1, row2) => row1 !== row2, 
       sectionHeaderHasChanged : (s1, s2) => s1 !== s2 
      }) 
     } 
    }, 
    componentDidMount: function() { 
     this.organizeData(); 
    }, 
    organizeData: function() { 
     var data_store = null; 
     //get the latest articles on page load 
     //this will pre-fill out articles state 
     FeedStore.getArticles() 
      .then((data) => { 
       console.log("================"); 
       console.log("data is at home"); 
       console.log(data); 
       console.log("================"); 

       var entries = data, 
       length = entries.length, 
       dataBlob = {}, 
       sectionIDs = [], 
       rowIDs = [], 
       entry, 
       sectionID, 
       rowID, 
       i; 
       console.log(entries.length); 
       for (i = 0; i < length; i++) 
       { 
        entry = entries[i]; 
        console.log(entry); 

        //add section/row to section id array 

        //mapping section id array for section data 
        sectionID = entry.title.replace(/\s+/g, '').toLowerCase() + i; 
        console.log("SectionID = " + sectionID); 
        sectionIDs.push(sectionID); 
        dataBlob[sectionID] = entry.title; 

        //mapping row id array for row data 
        rowIDs[i] = [] 
        rowID = sectionID; 
        console.log("RowID = " + rowID); 
        rowIDs[i].push(rowID); 
        dataBlob[sectionID + ':' + rowID] = entry; 
       } 

       console.log(dataBlob); 

       this.setState({ 
        dataSource : this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs), 
        isLoaded : true, 
       }); 

      }).done(); 
    }, 
    render: function() { 

     if (!this.state.isLoaded) { 
      return this.renderLoadingView(); 
     } 

     return this.renderListView(); 
    }, 
    renderLoadingView: function() { 
     return (
      <View style={styles.container}> 
       <ActivityIndicatorIOS 
        animating={!this.state.isLoaded} 
        style={[styles.activityIndicator, {height: 80}]} 
        size="large" /> 
      </View> 
     ); 
    }, 
    renderListView: function() { 
     return (
      <View style={styles.container}> 
       <ListView 
        dataSource = {this.state.dataSource} 
        initialListSize = {4} 
        pageSize={4} 
        renderRow = {this.renderRow} /> 
      </View> 
     ); 
    }, 
    renderRow: function (rowData, sectionID, rowID) { 
     console.log("Getting my rows on"); 
     console.log(rowID); 
     console.log(rowData); 

     var that = this; 
     //call to api to get articles from rss/api var Articles 
     return <ArticleView 
       category={'Music'} 
       key={sectionID} 
       heartText={'2.9k'} 
       categoryPress={() => { that.dummy }} 
       selected={false} 
       source={{uri: rowData.mediaGroups[0].contents[0].url }} 
       text={rowData.title} 
       onPress={() => { that.dummy }} /> 

    }, 
    dummy: function() { 

    }, 
    /* 
    onChange: function(event, articles) { 
     this.setState({articles: articles}); //trigers re-render of component 
    } 
    */ 

}); 


styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     alignItems: 'center', 
     justifyContent: 'center', 
    }, 
    activityIndicator: { 
     alignItems: 'center', 
     justifyContent: 'center', 
    }, 
});