RN请求网络上拉加载下拉刷新，跳转

最新推荐文章于 2023-11-06 10:25:12 发布

人望山，鱼窥荷

最新推荐文章于 2023-11-06 10:25:12 发布

阅读量503

点赞数

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

本文链接：https://blog.csdn.net/weixin_42582516/article/details/84070241

版权

RN 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

路由
import { createStackNavigator } from “react-navigation”;
import App from “./App”;
import Details from “./Details”;

const Route = createStackNavigator({
App: App,
Details: Details
});

export default Route;

APP页面
import React, { Component } from “react”;
import { Platform, StyleSheet, Text, View } from “react-native”;
//RefreshState依赖
import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;

export default class App extends Component {
/**

初始化构造方法
*/
constructor(props) {
super(props);

this.state = {
  dataValue: [], //数据源
  refreshState: RefreshState.Idle, //静止状态
  page: 1
};

}

/**

生命周期
*/
componentDidMount() {
this.onHeaderRefresh();
}

//下拉刷新
onHeaderRefresh = () => {
//1.更新状态，下拉状态
this.setState({
refreshState: RefreshState.HeaderRefreshing,
page: 1
});
//2.网络加载
fetch(
https://cnodejs.org/api/v1/topics?page=${ this.state.page }&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
});
console.warn(error);
});
};

//上拉加载更多
onFooterRefresh = () => {
this.setState({
refreshState: RefreshState.FooterRefreshing
});
//2.网络加载
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
});
console.warn(error);
});
};

/**

元素渲染
*/
render() {
return (

<RefreshListView
style={styles.welcome}
data={this.state.dataValue}
keyExtractor={(item, index) => index}
renderItem={({ item }) => (
<Text
style={{ width: “100%”, height: 80 }}
onPress={() => {
this.props.navigation.navigate(“Details”, {
abc: item.content
});
}}
>
{item.title}

)}
refreshState={this.state.refreshState}
onHeaderRefresh={this.onHeaderRefresh}
onFooterRefresh={this.onFooterRefresh}
/>

);
}
}

/**

样式表
*/
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#F5FCFF”
},
welcome: {
flex: 1
}
});
、、、详情页面
import React, { Component } from “react”;
import { View, Text, ScrollView, Dimensions } from “react-native”;
import HTML from “react-native-render-html”;
export default class Detils extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam(“name”).title
};
};
constructor(props) {
super(props);
this.state = {
content: this.props.navigation.getParam(“name”).content
};
}

render() {
return (

<HTML
html={this.state.content}
imagesMaxWidth={Dimensions.get(“window”).width}
/>

);
}
}

人望山，鱼窥荷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
RN请求网络上拉加载下拉刷新，跳转

路由import { createStackNavigator } from “react-navigation”;import App from “./App”;import Details from “./Details”;const Route = createStackNavigator({App: App,Details: Details});export default...
复制链接

扫一扫