react native FlatList 显示 fetch 网

fetch

参考地址
http://reactnative.cn/docs/0.51/network.html

return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

自己的例子

    loadData=()=>{
        fetch( `https://api.github.com/search/repositories?q=${this.props.tabLabel}&sort=stars`)
            .then((response) => response.json())
            .then(responseJson=>{
                let data = responseJson.items;
                let dataBlob = [];
                let i = 0;
                //放入 datablob 里面 
                data.map((item,i)=>{
                     dataBlob.push({
                         key: i,
                         value: item,
                       });
                });

                this.setState({
                    //复制数据源
                    dataList: dataBlob,
                    isLoading:false
                });
                data = null;
                dataBlob = null;

            })
            .catch((error)=>{
                console.error(error);
            }).done();
    }

FlatList

参考地址
http://reactnative.cn/docs/0.50/flatlist.html#content

  <FlatList
         data={this.state.dataList}
         renderItem={this.renderItemView}
     >
     </FlatList>
     
     /**
     * 返回 flatList 里面的字布局
     * @param item
     * @returns {XML}
     */
    renderItemView({item}) {
        return (
           <ProjectRow item={item}/>
        );
    }

整体js

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    FlatList,
    ListView,
    ActivityIndicator,
    RefreshControl
} from 'react-native';

import NavigationBar from "../component/NavigationBar"
import ProjectRow from "../component/ProjectRow"
import ScrollableTabView from "react-native-scrollable-tab-view"

//"最热"是包含在，HomePage页面
//"最热"页面包含，NavigationBar

export default class PopularPage extends Component{
    constructor(props){
        super(props);
        this.state={
            languages:["Android","IOS","Java","React","JS"]
        }
    }
    render(){
        return <View style={styles.container}>
            <NavigationBar/>
            <ScrollableTabView
                tabBarBackgroundColor="#63B8FF"
                tabBarActiveTextColor="#FFF"
                tabBarInactiveTextColor="#F5FFFA"
                tabBarUnderlineStyle={{backgroundColor:"#E7E7E7",height:2}}>
                {
                    this.state.languages.map((item,i)=>{
                        return <PopularTab key={`item${i}`} tabLabel={item}></PopularTab>
                    })
                }
            </ScrollableTabView>
        </View>;
    }
}
class  PopularTab extends Component{
    static defaultProps={
        tabLabel:"Android"
    }
    constructor(props){
        super(props)
        this.state={
            dataList:[],
            isLoading: true,
        }
    }
    loadData=()=>{
        fetch( `https://api.github.com/search/repositories?q=${this.props.tabLabel}&sort=stars`)
            .then((response) => response.json())
            .then(responseJson=>{
                let data = responseJson.items;
                let dataBlob = [];
                let i = 0;
                //放入 datablob 里面
                data.map((item,i)=>{
                     dataBlob.push({
                         key: i,
                         value: item,
                       });
                });

                this.setState({
                    //复制数据源
                    dataList: dataBlob,
                    isLoading:false
                });
                data = null;
                dataBlob = null;

            })
            .catch((error)=>{
                console.error(error);
            }).done();
    }
    componentDidMount =()=>{
        this.loadData()
     }

     render(){
        if(this.state.isLoading){
            return this.renderLoadingView();
        }else{
            return this.renderData();
        }
     }

    /**
     * 获取数据成功后显示
     * @returns {XML}
     *                          onRefresh={this.handleRefresh()}
     */
     renderData(){
         return(
             <View style={styles.container}>
                 {
                     <FlatList
                         data={this.state.dataList}
                         renderItem={this.renderItemView}
                     >
                     </FlatList>
                 }
             </View>
         )
     }

    /**
     * 返回 flatList 里面的字布局
     * @param item
     * @returns {XML}
     */
    renderItemView({item}) {
        return (
           <ProjectRow item={item}/>
        );
    }

    handleRefresh=()=>{
        this.loadData();
    }
    //加载等待的view
    renderLoadingView() {
        return (
            <View style={styles.container}>
               <ActivityIndicator
                    animating={this.state.isLoading?true:false}
                    style={[styles.gray, {height: 80}]}
                    color='red'
                    size="large"
                />

            </View>
        );
    }


}
const styles = StyleSheet.create({
    container: {
        flex:1
    },
    title: {
        fontSize: 15,
        color: 'blue',
    },
    content: {
        fontSize: 15,
        color: 'black',
    }
});