React-native 三方框架实现上拉刷新、下拉加载网络请求以及跳转先详情页面

最新推荐文章于 2024-03-21 17:45:17 发布

qq_43479946

最新推荐文章于 2024-03-21 17:45:17 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_43479946/article/details/83243819

版权

首先第一步需要导入三方的类库和跳转详情页面
yarn add react-native-refresh-list-view
//导包
import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;

import React, { Component } from “react”;
import {
StyleSheet,
Text,
View,
Image,
TouchableHighlight
} from “react-native”;
import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;

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

/**
 *page： 当前页面值
  refreshState： 刷新状态
  dataValue： 数据源
 */
this.state = {
  page: 1,
  refreshState: RefreshState.Idle,
  dataValue: []
};

}

/**

生命周期方法，创建的时候调用下拉刷新，加载数据
*/
componentDidMount() {
this.onHeaderRefresh();
}

//下拉刷新
onHeaderRefresh = () => {
//设置为正在下拉刷新的状态
this.setState({ page: 1, refreshState: RefreshState.HeaderRefreshing });

fetch(`https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10`)
  .then(response => response.json())
  .then(responseJson => {
    this.setState({
      //显示获取到的数据
      dataValue: responseJson.data,
      refreshState: RefreshState.Idle,
      page: this.state.page + 1
    });
  })
  .catch(error => {
    this.setState({
      refreshState: RefreshState.Failure
    });
  });

};
//上拉加载
onFooterRefresh = () => {
//设置为正在上拉加载的状态
this.setState({ refreshState: RefreshState.FooterRefreshing });

fetch(
  `https://cnodejs.org/api/v1/topics?page=${
    this.state.page
  }&tab=good&limit=10`
)
  .then(response => response.json())
  .then(responseJson => {
    this.setState({
      //将加载到的数据与原数据进行拼接
      dataValue: [...this.state.dataValue, ...responseJson.data],
      refreshState: RefreshState.Idle,
      page: this.state.page + 1
    });
  })
  .catch(error => {
    this.setState({
      refreshState: RefreshState.Failure
    });
  });

};

render() {
return (

{/* //刷新控件的使用 */}
<RefreshListView
style={{ flex: 1 }}
data={this.state.dataValue}
keyExtractor={(item, index) => index}
renderItem={({ item }) => (
<TouchableHighlight
onPress={() => {
this.props.navigation.navigate(“Details”, {
content: item.content
});
}}
>
<View style={{ flexDirection: “row”, margin: 5 }}>
<Image
source={{ uri: item.author.avatar_url }}
style={{ width: 80, height: 80, borderRadius: 65 }}
/>

{item.title}
{item.author.loginname}

)}
//多出方法：设置刷新状态，设置下拉刷新，设置上拉加载更多
refreshState={this.state.refreshState}
onHeaderRefresh={this.onHeaderRefresh}
onFooterRefresh={this.onFooterRefresh}
/>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: “center”,
alignItems: “center”,
backgroundColor: “#F5FCFF”
},
welcome: {
fontSize: 20,
textAlign: “center”,
margin: 10
}
});

export default Good;

跳转详情页面：

import React, { Component } from “react”;
import { StyleSheet, ScrollView, View, WebView } from “react-native”;
import HTML from “react-native-render-html”;
import { withNavigation } from “react-navigation”;

class Details extends Component {
render() {
return (

<HTML
style={styles.welcome}
html={this.props.navigation.getParam(“content”, “content”)}
/>

);
}
}

qq_43479946

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React-native 三方框架实现上拉刷新、下拉加载网络请求以及跳转先详情页面

首先第一步需要导入三方的类库和跳转详情页面yarn add react-native-refresh-list-view//导包import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;import React, { Component } from “react”;impo...
复制链接

扫一扫