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

丁振海
2023-12-01

首先 第一步 需要导入三方的类库 和跳转详情页面
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”)}
/>


);
}
}

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

 类似资料: