react-native构建基本页面4---渲染电影列表
电影列表
import React, { Component } from 'react'
import { View, Image, Text, ActivityIndicator, FlatList, StyleSheet, TouchableHighlight } from 'react-native'
const styles = StyleSheet.create({
movieTitle: {
fontWeight: 'bold'
}
})
// 导入路由的组件
import { Actions } from 'react-native-router-flux'
export default class MovieList extends Component {
constructor(props) {
super(props)
this.state = {
movies: [], // 电影列表
nowPage: 1, // 当前的页码
totalPage: 0, // 总页数
pageSize: 15, // 每页显示的记录条数
isloading: true // 是否正在加载数据
}
}
componentWillMount() {
this.getMoviesByPage()
}
render() {
return <View>
{this.renderList()}
</View>
}
// 根据页码获取电影列表
getMoviesByPage = () => {
const start = (this.state.nowPage - 1) * this.state.pageSize
const url = `https://api.douban.com/v2/movie/in_theaters?start=${start}&count=${this.state.pageSize}`
fetch(url)
.then(res => res.json())
.then(data => {
this.setState({
isloading: false,
movies: this.state.movies.concat(data.subjects),
totalPage: Math.ceil(data.total / this.state.pageSize)
})
})
/* setTimeout(() => {
this.setState({
isloading: false,
movies: require('./test_list.json').subjects,
totalPage: 1
})
}, 1000) */
}
// 渲染电影列表的方法
renderList = () => {
if (this.state.isloading) {
return <ActivityIndicator size="large"></ActivityIndicator>
}
return <FlatList
data={this.state.movies}
keyExtractor={(item, i) => i} // 解决 key 问题
renderItem={({ item }) => this.renderItem(item)} // 调用方法,去渲染每一项
ItemSeparatorComponent={this.renderSeparator} //渲染分割线的属性方法
onEndReachedThreshold={0.5} // 距离底部还有多远的时候,触发加载更多的事件
onEndReached={this.loadNextPage} // 当距离不足 0.5 的时候,触发这个方法,加载下一页数据
/>
}
// 渲染每项电影
renderItem = (item) => {
return <TouchableHighlight underlayColor="#fff" onPress={() => { Actions.moviedetail({ id: item.id }) }}>
<View style={{ flexDirection: 'row', padding: 10 }}>
<Image source={{ uri: item.images.small }} style={{ width: 100, height: 140, marginRight: 10 }}></Image>
<View style={{ justifyContent: 'space-around' }}>
<Text><Text style={styles.movieTitle}>电影名称:</Text>{item.title}</Text>
<Text><Text style={styles.movieTitle}>电影类型:</Text>{item.genres.join(',')}</Text>
<Text><Text style={styles.movieTitle}>制作年份:</Text>{item.year}年</Text>
<Text><Text style={styles.movieTitle}>豆瓣评分:</Text>{item.rating.average}分</Text>
</View>
</View>
</TouchableHighlight>
}
// 渲染分割线
renderSeparator = () => {
return <View style={{ borderTopColor: '#ccc', borderTopWidth: 1, marginLeft: 10, marginRight: 10 }}></View>
}
// 加载下一页
loadNextPage = () => {
// 如果下一页的页码值,大于总页数了,直接return
if ((this.state.nowPage + 1) > this.state.totalPage) {
return
}
this.setState({
nowPage: this.state.nowPage + 1
}, function () {
this.getMoviesByPage()
})
}
}
电影详情
import React, { Component } from 'react'
import { View, Image, Text, ActivityIndicator, ScrollView } from 'react-native'
export default class MovieDetail extends Component {
constructor(props) {
super(props)
this.state = {
movieInfo: {}, // 电影信息
isloading: true
}
}
componentWillMount() {
fetch('https://api.douban.com/v2/movie/subject/' + this.props.id)
.then(res => res.json())
.then(data => {
this.setState({
movieInfo: data,
isloading: false
})
})
}
render() {
return <View>
{this.renderInfo()}
</View>
}
renderInfo = () => {
if (this.state.isloading) {
return <ActivityIndicator size="large"></ActivityIndicator>
}
return <ScrollView>
<View style={{ padding: 4 }}>
<Text style={{ fontSize: 25, textAlign: 'center', marginTop: 20, marginBottom: 20 }}>{this.state.movieInfo.title}</Text>
<View style={{ alignItems: 'center' }}>
<Image source={{ uri: this.state.movieInfo.images.large }} style={{ width: 200, height: 280 }}></Image>
</View>
<Text style={{ lineHeight: 30, marginTop: 20 }}>{this.state.movieInfo.summary}</Text>
</View>
</ScrollView>
}
}
react-native构建基本页面4---渲染电影列表的更多相关文章
- 从零学React Native之03页面导航
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...
- react native (1) 新建页面并跳转
新建页面 1.新建文件 import React from 'react'; import { Text } from 'react-native'; export default class tod ...
- react native tap切换页面卡顿
问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿 解决办法: InteractionManager.runAfter ...
- React Native 中 跨页面间通信解决方案之 react-native-event-bus
https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...
- React Native登录注册页面实现空白处收起键盘
其实很简单,直接使用ScrollView作为父视图即可.有木有很神奇啊,以前都还不知道呢.....
- 【React Native】某个页面禁用物理返回键
1.引入组件 import { BackHandler, } from 'react-native'; 2.添加监听 componentDidMount(): void { BackHandler.a ...
- react 项目实战(五)渲染用户列表
现在我们需要一个页面来展现数据库中记录的用户. 在/src/pages下新建UserList.js文件. 创建并导出UserList组件: import React from 'react'; cla ...
- React Native 简介:用 JavaScript 搭建 iOS 应用 (1)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
随机推荐
- [RHEL8]关闭SELinux(同CentOS7)
修改配置文件(永久修改) # vi /etc/selinux/config SELINUX=disabled # 关闭 SELINUX=enforcing # 开启 命令方式(临时修改重启失效) # ...
- SharePoint 生产环境文件归档
前言 最近,用户提出数据库大小太大,所以,希望把文件归档.至于归档,该怎么做呢? 正文 我们提出的解决方案,占用数据库最主要的就是各种文档,那就按照时间为限制,超过一年的文档全部备份,由用户的IT自行 ...
- 网易MuMu模拟器不显示Menu(菜单)键的解决办法
解决方法一: 前提:需要一个键盘 步骤: 1.直接按下键盘上的Menu键. 解决方法二: 前提:需要Root之后的文件浏览器 步骤: 1.在文件管理器中打开 /System 文件夹: 2.复制 bui ...
- Blazor初体验之寻找存储client-side jwt token的方法
https://www.cnblogs.com/chen8854/p/securing-your-blazor-apps-authentication-with-clientside-blazor-u ...
- Linux基础:df命令总结
本文只总结一些常用的用法,更详细的说明见man df和 df --help. df命令 df命令用于显示目前在Linux系统上的文件系统的磁盘使用情况统计. df命令主要是从各文件系统的Super b ...
- NODEJS 搭建本地文件服务器
npm install anywhere --g 然后再任意目录位置运行 anywhere 80 就可以开启服务器.
- java设计模式学习笔记--接口隔离原则
接口隔离原则简述 客户端不应该依赖它不需要的接口,即一个类对另一个类的依赖应建立在最小的接口上 应用场景 如下UML图 类A通过接口Interface1依赖类B,类C通过接口Interface1依赖类 ...
- java设计模式学习笔记--浅谈设计模式
设计模式的目的 编写软件的过程中,程序员面临着来自耦合性,内聚性以及可维护性,可扩展性,重用性,灵活性等多方面的挑战.设计模式为了让程序具有更好的 1.代码重用性(即:相同功能的代码,不用多次编写) ...
- 优酷爱奇艺视频转换为MP4格式工具
本君今天分享两个免费的视频格式转换工具,分别是爱奇艺和优酷的(腾讯的有点复杂,等整理完再分享).教程都是一步步亲手操作的,每一步都有配图.希望各位老板多转发分享,谢谢! 一爱奇艺QSV转MP4格式 解 ...
- Enable VT-x in your BIOS security settings, ensure that HAXM is installed properly. Try disabling 3rd party security software if the problem still occurs
win7系统安装了了AndroidStudio3.5后用模拟器报错:Enable VT-x in your BIOS security settings, ensure that HAXM is in ...