2018-10-24 上拉下拉刷新加载

需要加载yarn add react-native-refresh-list-view命令

//点击子条目跳转到详情页面


import React, { Component } from "react";

import { Image, Text, View, TouchableHighlight } from "react-native";

import RefreshListView, { RefreshState } from "react-native-refresh-list-view";

import { createStackNavigator } from "react-navigation";

import Mon from "./Mon";

class Itm extends Component {

  constructor(props) {

    super(props);

    this.state = {};

  }

  render() {

    return (

     

        style={{

          flexDirection: "row",

          justifyContent: "center",

          alignItems: "center",

          margin: 5

        }}

      >

       

          source={{ uri: this.props.img }}

          style={{ width: 100, height: 100, margin: 5 }}

        />

        {this.props.tt}

     

    );

  }

}

class News extends Component {

  constructor(props) {

    super(props);

    this.state = {

      value: [],

      refreshState: RefreshState.Idle

    };

  }

  componentDidMount() {

    this.onHead();

  }

  onHead = () => {

    fetch("http://c.m.163.com/nc/article/list/T1348649079062/0-20.html")

      .then(response => response.json())

      .then(responseJson => {

        this.setState({

          value: responseJson.T1348649079062

        });

      });

  };

  onHeaderRefresh = () => {

    this.setState({

      refreshState: RefreshState.HeaderRefreshing

    });

    this.onHead();

  };

  onFooterRefresh = () => {

    this.setState({

      refreshState: RefreshState.FooterRefreshing

    });

    fetch("http://c.m.163.com/nc/article/list/T1348649079062/0-20.html")

      .then(response => response.json())

      .then(responseJson => {

        this.setState({

          value: [...this.state.value, ...responseJson.T1348649079062],

          refreshState:

            this.state.value.length > 30

              ? RefreshState.NoMoreData

              : RefreshState.Idle

        });

      });

  };

  render() {

    return (

     

        keyExtractor={index => {

          return index;

        }}

        data={this.state.value}

        renderItem={({ item }) => (

         

            onPress={() => {

              this.props.navigation.navigate("Mon", {

                url: item.url,

                title: item.title

              });

            }}

          >

           

             

           

         

        )}

        //下拉  上拉  状态刷新

        refreshState={this.state.refreshState}

        onHeaderRefresh={this.onHeaderRefresh}

        onFooterRefresh={this.onFooterRefresh}

        // 可选

        footerRefreshingText="玩命加载中 "

        footerFailureText="我擦嘞,居然失败了 "

        footerNoMoreDataText="-我是有底线的-"

        footerEmptyDataText="-好像什么东西都没有-"

      />

    );

  }

}

const MM = createStackNavigator({

  News: {

    screen: News

  },

  Mon: Mon

});

export default MM;

你可能感兴趣的:(2018-10-24 上拉下拉刷新加载)