[RN教学网络解析](网络解析+刷新）

最新推荐文章于 2021-02-24 19:23:44 发布

那一只猫

最新推荐文章于 2021-02-24 19:23:44 发布

阅读量590

点赞数 2

分类专栏： Rn网络解析文章标签： RN

本文链接：https://blog.csdn.net/qq_43479820/article/details/83243304

版权

Rn网络解析专栏收录该内容

1 篇文章 0 订阅

订阅专栏

你好！今天我们来一起学习一下RN的网络解析（上拉下拉刷新）, 可以仔细阅读这篇文章，了解一下网络解析的基本语法知识。

依赖

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

我们首先需要在Yarn包中添加RefreshListView代码（这样我们就可以使用RefreshListView的方法） react-native-refresh-list-view；
在渲染中添加以下代码：

refreshState={this.state.refreshState} 刷新动画
onFooterRefresh={this.FooterRefresh} 底部刷新动画
onHeaderRefresh={this.HeaderRefresh} 顶部刷新动画

构造方法,设置加载状态为静态

this.state = {
page: 5,
dataValue: [],
refreshState: RefreshState.Idle
}; }：

顶部刷新方法：

HeaderRefresh = () => { HeaderRefresh = () => {
this.setState({
page: 1,
refreshState: RefreshState.HeaderRefreshing
});
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({});
}); };；

底部刷新方法：

FooterRefresh = () => {
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
});
}); };；

6.以箭头函数的形式获取网络解析的内容

<RefreshListView
data={this.state.dataValue}
renderItem={({ item }) => {
…
}}
keyExtractor={index => {
return index;
}}
refreshState={this.state.refreshState}
onFooterRefresh={this.FooterRefresh}
onHeaderRefresh={this.HeaderRefresh}
/>

      7.在Yarn文件中导入HTML方法：react-native-render-html；
      并导入依赖import HTML from "react-native-render-html";
      使用方法：<HTML 
      html={this.props.navigation.getParam("content", "content")} />
      
      
      8.页面传值方法：
      	Send:
      onPress={() => {
              this.props.navigation.navigate("跳转页", {
                content: item.content
              });
            }}
        receive：
        this.props.navigation.getParam("content", "content")

那一只猫

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[RN教学网络解析](网络解析+刷新）

你好！今天我们来一起学习一下RN的网络解析（上拉下拉刷新）, 可以仔细阅读这篇文章，了解一下网络解析的基本语法知识。依赖import React, { Component } from “react”;import { StyleSheet, Text, View, Image,TouchableHighlight, WebView } from&quot;react-nativ...
复制链接

扫一扫