美文网首页react native
react native FlatList 显示 fetch 网

react native FlatList 显示 fetch 网

作者: 苍天霸气诀 | 来源:发表于2017-12-14 17:14 被阅读0次

    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',
        }
    });
    

    相关文章

      网友评论

        本文标题:react native FlatList 显示 fetch 网

        本文链接:https://www.haomeiwen.com/subject/mbnkwxtx.html