ReactNative FlatList--------实现上拉加载，下拉刷新

最新推荐文章于 2023-08-15 17:17:23 发布

焱先生y

最新推荐文章于 2023-08-15 17:17:23 发布

阅读量1.3k

点赞数

分类专栏： RN 文章标签： ReactNative FlatList

本文链接：https://blog.csdn.net/lzy_0710/article/details/82747375

版权

RN 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ReactNative FlatList解析，详情

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight
} from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
import { StackNavigator } from "react-navigation";
import Shows from "./Shows";

class Item extends Component {
  render() {
    return (
      <View style={{ flexDirection: "row" }}>
        <Image
          source={{ uri: this.props.url }}
          style={{ width: 100, height: 100 }}
        />
        <Text>{this.props.title}</Text>
      </View>
    );
  }
}

class Home1 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      //数据源
      dataValue: [],
      //刷新进度条的状态：默认我静止状态
      refreshState: RefreshState.Idle
    };
  }
  //生命周期方法：默认加载第一次数据
  componentDidMount() {
    this.HeaderRefresh();
  }
  
  //下拉刷新
  HeaderRefresh = () => {
	 //HeaderRefreshing：下拉刷新进度头
    this.setState({
      refreshState: RefreshState.HeaderRefreshing
    });
    //请求网络路劲
    fetch("https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10")
	    //通过箭头函数，数据解析，返回解析后的json对象
      .then(response => response.json())
	    //接收解析后的json对象，获取有用数据，状态机中做数据刷新
      .then(responseJson => {
	     //刷新数据
        this.setState({
          dataValue: responseJson.data,
          refreshState: RefreshState.Idle
        });
      })
	    //请求错误情况下进行调用
      .catch(error => {
        this.setState({
          refreshState: RefreshState.Failure
        });
      });
  };
  
  //上拉加载
  FooterRefresh = () => {
	 //FooterRefreshing上拉加载进度条
    this.setState({
      refreshState: RefreshState.FooterRefreshing
    });
	//请求网络路径
    fetch("https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10")
	    //通过箭头函数，数据解析，返回解析后的json对象
      .then(response => response.json())
	    //接收解析后的json对象，获取有用数据，在状态机中做数据刷新
      .then(responseJson => {
	     //刷新数据
        this.setState({
          dataValue: [...this.state.dataValue, ...responseJson.data],
          refreshState: RefreshState.Idle
        });
      })
	    //请求错误情况下进行调用
      .catch(error => {
        this.setState({
          refreshState: RefreshState.Failure
        });
      });
  };

  render() {
    return (
      <View style={styles.container}>
        <RefreshListView
          style={styles.welcome}
          data={this.state.dataValue}
          renderItem={({ item }) => {
            return (
              <TouchableHighlight
                //点击详情传入内容
                onPress={() => {
                  this.props.navigation.navigate("Show", {
                    title: item.title,
                    content: item.content
                  });
                }}
              >
                <Item url={item.author.avatar_url} title={item.title} />
              </TouchableHighlight>
            );
          }}
          keyExtractor={index => {
            return index;
          }}
          //上拉，下拉，状态刷新
          refreshState={this.state.refreshState}
          onFooterRefresh={this.FooterRefresh}
          onHeaderRefresh={this.HeaderRefresh}
        />
      </View>
    );
  }
}

//样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    flex: 1
  }
});

//路由
const Home1Route = StackNavigator({
  List: {
    screen: Home1,
    navigationOptions: {
      header: null
    }
  },
  Show: { screen: Shows }
});

export default Home1Route;

显示详情

import React, { Component } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import HTML from "react-native-render-html"; //渲染html成原生内容

export default class Shows extends Component {
  static navigationOptions = ({ navigation }) => ({
	 //获取传过来的title标题
    title: navigation.getParam("title", "详情")
  });

  render() {
    return (
      <View style={styles.container}>
	      //滑动事件
        <ScrollView>
          <HTML
            style={styles.welcome}
            //获取要展示内容
            html={this.props.navigation.getParam("content", "content")}
          />
        </ScrollView>
      </View>
    );
  }
}

//样式
const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

需要导入的依赖

下载项目：
react-native init HelloWorld --version 0.55.4

yarn库：
yarn add react-navigation

三方刷新加载：
yarn add react-native-refresh-list-view

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

StackNavigator
import { StackNavigator } from “react-navigation”;

HTML 依赖 yarn add react-native-render-html

import HTML from “react-native-render-html”;

焱先生y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ReactNative FlatList--------实现上拉加载，下拉刷新

ReactNative FlatList解析，详情import React, { Component } from “react”;import {Platform,StyleSheet,Text,View,Image,TouchableHighlight} from “react-native”;import RefreshListView, { RefreshState ...
复制链接

扫一扫