ReactNative 项目实战 (2) ListView 使用 网络请求以及下拉刷新 (条目控件封装)

最新推荐文章于 2022-08-22 10:27:56 发布
最新推荐文章于 2022-08-22 10:27:56 发布
阅读量900 收藏
点赞数
分类专栏： 从零开始React Native React_Native项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liudao7994/article/details/78002778
版权

看我的其他系列的文章
React_Native 项目实战 (1) (首页,以及页面的切换)

https://github.com/liudao01/ReactNativeProject
github地址 还在更新中

ListView 使用 网络请求以及下拉刷新

最终实现的效果图
mark

listview 以及 最热页面内容切换

现在写页面的内容 ,

知识点:

  • listivew 的使用
  • 网络数据的获取
  • 页面内容的组件封装

Listtview 的使用 看官方文档
http://reactnative.cn/docs/0.48/listviewdatasource.html#content

不要忘记引入ListView

下面是使用本地数据做的listview

mark

下面是代码


/**
 * Created by liuml on 2017/9/11.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    RefreshControl
}from 'react-native';

import NavigationBar from "../compoent/NavigationBar.js"
import ScrollableTabView from "react-native-scrollable-tab-view"
import ProjectRow from "../compoent/ProjectRow"
export default class PapularPage extends Component {


    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            languages: ["Android", "Ios", "Java", "React", "JS"]
        };
    }


    render() {
        return <View style={styles.container}>
            <NavigationBar/>
            <ScrollableTabView
                tabBarBackgroundColor="#63B8FF"
                tabBarActiveTextColor="#FFF"
                tabBarInactiveTextColor="#F5FFFA"
                tabBarUnderlineStyle={{backgroundColor: "#E7E7E7", height: 2}}>
                {
                    this.state.languages.map((item, i) => {
                        return <PopularTab key={`tab${i}`} tabLabel={item}/>
                    })
                }
            </ScrollableTabView>
        </View> 
    }
}

class PopularTab extends Component {

    //这里是Tab 的名字
    static defaultProps = {
        tabLable: 'Android',
    }
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})//是一个优化，节省无用的UI渲染 判断前后数据是否改变 如果改变就更新
        };
    }

    componentDidMount() {
        this.setState({
                dataSource: this.state.dataSource.cloneWithRows(['first', 'second', 'three'])
            }
        )
    };

    renderRow = () => {
        return <Text>test</Text>
    }


    render() {
        return <View style={styles.container}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
            ></ListView>
        </View>
    }


}


const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

解释下

componentDidMount

这个是RN加载完毕后调用的方法 生命周期

我在这里给他设置了列表的假数据 只有三条 所以在上面可以看到三条数据

其他的没什么 了 Listview的使用可以看下官方文档 比我讲的清楚

http://reactnative.cn/docs/0.48/listviewdatasource.html#content

联网请求数据返回给listview设置数据

mark

下面是代码

/**
 * Created by liuml on 2017/9/11.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    RefreshControl
}from 'react-native';

import NavigationBar from "../compoent/NavigationBar.js"
import ScrollableTabView from "react-native-scrollable-tab-view"
import ProjectRow from "../compoent/ProjectRow"
export default class PapularPage extends Component {


    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            languages: ["Android", "Ios", "Java", "React", "JS"]
        };
    }


    render() {
        return <View style={styles.container}>
            <NavigationBar/>
            <ScrollableTabView
                tabBarBackgroundColor="#63B8FF"
                tabBarActiveTextColor="#FFF"
                tabBarInactiveTextColor="#F5FFFA"
                tabBarUnderlineStyle={{backgroundColor: "#E7E7E7", height: 2}}>
                {
                    this.state.languages.map((item, i) => {
                        return <PopularTab key={`tab${i}`} tabLabel={item}/>
                    })
                }
            </ScrollableTabView>
        </View>
    }
}

class PopularTab extends Component {

    //这里是Tab 的名字
    static defaultProps = {
        tabLabel: 'android',
    }
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})//是一个优化，节省无用的UI渲染 判断前后数据是否改变 如果改变就更新
        };
    }

    /*componentDidMount() {
     /!*this.setState({
     dataSource: this.state.dataSource.cloneWithRows(['first', 'second', 'three'])
     }
     )*!/
     this.loadData();
     };*/

    //和上面一样的效果
    componentDidMount = () => {
        this.loadData();
    }

    //渲染ListView的每一行
    renderRow = (obj) => {
        // return <ProjectRow>{obj.full_name}</ProjectRow>
        return <Text>{obj.full_name}</Text>
    }


    //加载数据
    loadData = () => {

        fetch(`https://api.github.com/search/repositories?q=${this.props.tabLabel}&sort=stars`)
            .then(response => response.json()) //服务器响应response对象，继续变成json对象
            .then(json => {
                //更新dataSource
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(json.items)

                });
            })
            .catch((error) => {
                console.error(error);
            }).done();
    }

    render() {
        return <View style={styles.container}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
            ></ListView>
        </View>
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

联网请求 看官方文档

http://reactnative.cn/docs/0.48/network.html#content

这样就做好了上面的gif图的效果

Listview 的item ProjectRow.js

现在数据有了,下面是做item的样式 把数据显示到item上面

先看下效果图

mark

  • 本地的数据 我把item 抽取出来 做成一个组件了

下面是item组件

/**
 * Created by liuml on 2017/9/14.
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    StatusBar,
    Platform,
    Image,
    TouchableOpacity
} from 'react-native';

export default class ProjectRow extends Component {

    static defaultProps = {
        item: {}
    }


    render() {
        var item = this.props.item;
        return <View style={styles.container}>
            <Text style={styles.title}>{item.full_name}</Text>
            <Text style={styles.description}>{item.description}</Text>
            <View style={styles.bottom}>
                <View style={styles.bottomTextWrapper}>
                    <Text>作者:</Text>
                    {console.log(item.owner.avatar_url)}
                    <Image style={{width: 22, height: 22}} source={{uri: item.owner.avatar_url}}/>
                </View>
                <View style={styles.bottomTextWrapper}>
                    <Text>star:</Text>
                    <Text>{item.stargazers_count}</Text>
                </View>
                <Image source={require("../../res/images/ic_unstar_transparent.png")} style={{width: 22, height: 22}}/>
            </View>
        </View>
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 10,
        marginLeft: 5,
        marginRight: 5,
        marginVertical: 5,
        backgroundColor: '#FFF',
        flexDirection: 'column',
        borderColor: '#dddddd',
        borderWidth: 0.5,
        borderRadius: 2,
        shadowColor: 'gray',
        shadowOffset: {width: 0.5, height: 0.5},
        shadowRadius: 1, //阴影半径
        shadowOpacity: 0.4,
        elevation: 2 //Android 投影

    },
    title: {
        fontSize: 16

    },
    description: {
        fontSize: 14,
        marginBottom: 2,
        color: '#757575'

    },
    bottom: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    bottomTextWrapper: {
        flexDirection: 'row',
        alignItems: 'center'
    }
})

解释下: 没啥好说的 就是UI布局 做多了都一样 下面是几个属性 解释下

borderColor : 设置边框颜色

borderWidth : 属性设置所有四个边框的宽度。

borderRadius : 边框圆角效果

shadowColor:‘gray’,//阴影颜色

shadowOffset:{width:0.5,height:0.5},//shadowoffset 四周阴影

shadowRadius:1, //阴影半径

shadowOpacity:0.4,//阴影不透明度

elevation:2 //Android 投影

还有就是PopularPage.js 里面只改动了一行代码

    //渲染ListView的每一行
    renderRow = (obj) => {
        return <ProjectRow item={obj}></ProjectRow>
        // return <Text>{obj.full_name}</Text>
    }

这样就做好了上面的gif图的效果

listview 的加载动画以及下拉刷新

看下文档

https://reactnative.cn/docs/0.48/refreshcontrol.html#content

搜索 RefreshControl 这个就是刷新的使用


/**
 * Created by liuml on 2017/9/11.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    RefreshControl
}from 'react-native';

import NavigationBar from "../compoent/NavigationBar.js"
import ScrollableTabView from "react-native-scrollable-tab-view"
import ProjectRow from "../compoent/ProjectRow"
export default class PapularPage extends Component {


    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            languages: ["Android", "Ios", "Java", "React", "JS"]
        };
    }


    render() {
        return <View style={styles.container}>
            <NavigationBar/>
            <ScrollableTabView
                tabBarBackgroundColor="#63B8FF"
                tabBarActiveTextColor="#FFF"
                tabBarInactiveTextColor="#F5FFFA"
                tabBarUnderlineStyle={{backgroundColor: "#E7E7E7", height: 2}}>
                {
                    this.state.languages.map((item, i) => {
                        return <PopularTab key={`tab${i}`} tabLabel={item}/>
                    })
                }
            </ScrollableTabView>
        </View>
    }
}

class PopularTab extends Component {

    //这里是Tab 的名字
    static defaultProps = {
        tabLabel: 'android',
    }
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),//是一个优化，节省无用的UI渲染 判断前后数据是否改变 如果改变就更新
            isLoading: true
        };
    }

    /*componentDidMount() {
     /!*this.setState({
     dataSource: this.state.dataSource.cloneWithRows(['first', 'second', 'three'])
     }
     )*!/
     this.loadData();
     };*/

    //和上面一样的效果
    componentDidMount = () => {
        this.loadData();
    }

    //渲染ListView的每一行
    renderRow = (obj) => {
        return <ProjectRow item={obj}></ProjectRow>
        // return <Text>{obj.full_name}</Text>
    }


    //加载数据
    loadData = () => {
        this.setState({isLoading: true});
        fetch(`https://api.github.com/search/repositories?q=${this.props.tabLabel}&sort=stars`)
            .then(response => response.json()) //服务器响应response对象，继续变成json对象
            .then(json => {
                //更新dataSource
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(json.items),
                    isLoading: false,
                });
            })
            .catch((error) => {
                console.error(error);
            }).done();
    }

    handleRefresh = () => {
        this.loadData();
    }

    render() {
        return <View style={styles.container}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isLoading}
                        tintColor="#63B8FF"
                        title="正在加载..."
                        titleColor="#63B8FF"
                        colors={['#63B8FF']}
                    />
                }
            ></ListView>
        </View>
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

解释

  • isLoading 用来判断是否显示对话框
  • return 是把每个item的数据传到 ProjectRow里面去

最终实现的效果图
mark

六道对穿肠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React native ListView 增加顶部下拉刷新和底下点击刷新示例
08-27
主要介绍了React native ListView 增加顶部下拉刷新和底下点击刷新示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-native ListView下拉刷新上拉加载实现代码
08-29
本篇文章主要介绍了react-native ListView下拉刷新上拉加载实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React Native FlatList属性及使用详情
afufufufu的博客
08-22 930
React Native FlatList属性及使用详情
自定义listview完成上拉刷新，下拉加载的功能，重写ontouchevent方法
JerryWu145的专栏
07-29 1990
最 近做的类似于微博的项目中，有个Android功能要使用到listview的向下拉刷新来刷新最新消息，向上拉刷新（滑动分页）来加载更多。 新浪微博就是使用这种方式的典型。 当用户从网络上读取微博的时候，如果一下子全部加载用户未读的微博这将耗费比较长的时间，造成不好的用户体验，同时一屏的内容也不足以显示如此多的内容。这时候，我们就需要用到另一个功能，那就是listview的分页了，其实这个分页
RecyclerView实现下拉刷新与自动加载控件封装
逗比学习笔记
02-16 3766
前端时间自己整合了一个listview实现的下拉刷新上拉自动加载的demo,有需要的看这里listview实现下拉刷新上拉自动加载，由于新版本APP采用到RecyclerView,发现找不到一个好的简单的效果，于是抽几天时间，结合大牛们的文章，整合出一个比较简洁的RecyclerView实现下拉刷新与自动加载控件 一.废话不多少看效果（本人比较笨，不会制作动态图，哈哈哈）： 1.第一进入页
Listview多条目加载和XListview下拉刷新控件
现状很好
11-08 306
在现实的项目开发中，listView往往会加载不同类型的数据，这就要求我们要对listView进行多条目的加载，对数据类型进行判断，怎么判断呢？主要在适配器里面进行类型的判断。 XListViewHeader继承自linearLayout，用来实现下拉刷新时的界面展示，可以分为三种状态：正常、准备刷新、正在加载。
Android类ListView下拉刷新控件实现
03-02
Android下拉刷新，在目前好多应用被使用到。比如微博，下拉刷新更多数据。一般我们在运用的ListView，本身就实现了下拉获取更多数据。只是这个下拉刷新的操作时在listView拉到底端的监听。对于ListView刷新，我们...
ReactNative 滑动字母选择城市 以及搜索功能
六道对穿肠的学习之旅
10-09 4930
先上效果图遇到的问题 右侧字母选择器 高度问题, 右侧字母选择器 如何使用手势检测panresponse 右侧字母选择器 计算高度如何判断是触摸到那个字母上的(思考 如果是==native应用是如何做的==…刚看过 native应用的城市列表也是通过计算每个字母的高度来检测的)动态创建的控件 右边滑动的原理: 通过onlayout计算每个字母高度 ,然后加入数组 , 手指触摸字母列表时 知道 触摸的
React_Native 项目实战 (1) (首页,以及页面的切换)
六道对穿肠的学习之旅
09-12 4613
写一个用reactnative 的项目 可以用于查看GitHub最受欢迎与最热项目的App。 项目开始 HomePage.js PS 可以先拖动到底部看下效果图 新建一个reactnative项目 ,底部因为有四个tab 选项卡 那么 我使用一个第三方组件react-native-tab-navigator并且新建一个HomePage.js,关于第三方组件可以看下这篇文章 http://blog
ReactNative开发问题汇总
六道对穿肠的学习之旅
06-01 4145
webstorm配置 http://blog.csdn.net/xiangzhihong8/article/details/52293896webstorm插件 安装 react templatesreact native 问题以及技巧0, 启动服务后 使用 localhost:8081 看看是否正常启动 React Native packager is running. 显示 解决: 发布
react_native 项目实战 (4) 自定义分类 使用 CheckBox 以及 数据存储asyncStorage
六道对穿肠的学习之旅
10-17 3051
使用CheckBox先看使用CheckBox 下效果图引入CheckBox 第三方复选框react-native-check-boxnpm install react-native-check-box –save //两个横杠leftText 的Text 大写.又被坑了一次Checkbox http://www.searu.org/39207.html遇到的问题 1, 点击后就隐藏了
从零开始 React Native (5) React 数据传递_表单_函数复用_动画
六道对穿肠的学习之旅
05-03 1336
数据传递表单函数复用_动画HTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="babel.min.js"></script
react_native 项目实战 (3) 使用导航页面跳转 (ReactNaviation 完全自定义导航)
六道对穿肠的学习之旅
09-27 1202
其他的一些问题 记录下 什么时候 要给函数加上括号: 加括号情况: 当函数需要立即执行的时候(需要立刻返回) 不加括号情况: 当事件需要延迟触发的时候. (比如点击事件的函数) static propTypes = { } ```static defaultProps = {} propTypes 是用于传入类型的校验defaultProps 是给props
从零开始 React Native (1) ES6简介及环境搭建与语法入门
六道对穿肠的学习之旅
04-12 1145
JavaScript的历史 诞生 JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。Javascript于Java的关系
从零开始 React Native (2) ES6面向对象编程
六道对穿肠的学习之旅
05-03 1117
主要知识点: 模板字符串 箭头函数 解构赋值 Symbol 第七种数据类 class 关键字 语法糖 继承 (原型继承 原型继承的问题)(构造函数继承 )(组合继承) 下面都是代码样例 看看能打印什么/** * Created by liuml on 2017/4/7. */ //模板字符串 let name = "liu"; let age = 26; let str = name + "
react_native 项目实战 (6) 趋势页面 列表抽取 popover使用
六道对穿肠的学习之旅
10-30 1070
父控件 更新子控件 通过属性传值现在写趋势页面. 其实趋势页面和最热页面都差不多. 趋势页面的导航条是有个popover的控件 所以不是简单的text 需要改造NavigationBar需要改造NavigationBar.js //渲染顶部title renderTitle = () => { let view = (this.props.title.length != 0
从零开始 React Native(6) 计时器案例(模块化_组件封装)有图有demo
六道对穿肠的学习之旅
05-09 944
先上效果图注意 : 这个项目是用node 方式创建的 实际上是创建了一个node 项目 使用命令行的方式 然后再导入 westrom . 步骤如下1 ,通过这个命令，创建一个react工程 npm install -g create-react-app 这个是必须的,打开cmd输入就行.2, #到指定目录创建工程create-react-app my_timer// 先到项目文件夹下面 然后用
Android集成React Native 踩坑合集 (github 有demo)
六道对穿肠的学习之旅
08-27 923
react native 版本升级降级 查看版本 react-native –version 查看npm包管理的React Native 版本 npm info react-native 根据package.json 的版本更新 npm install react native 升级 npm WARN React-native@0.35.0 requires a peer of re
Qt qml listview 列表视图控件（下拉刷新、上拉分页、滚动轴）
最新发布
05-25
Qt QML 提供了一个名为 ListView 的组件，可以用于显示列表视图，支持下拉刷新、上拉分页和滚动轴。 以下是一个简单的 ListView 示例： ``` import QtQuick 2.0 import QtQuick.Controls 2.0 ApplicationWindow {...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值