ListView-电影列表
2024-10-20 09:30:46
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
ListView } from 'react-native'; //从文件中读取数据(ES5)
var movieData = require("./data.json");
//获取所有movies数据,属性movies是一个数组
var movies = movieData.movies; //ES6 读取本地 json
import moviesData from "./movie.json";
var movies = moviesData.links;
var MovieList = React.createClass({ getInitialState:function () {
//创建dataSource对象
var ds = new ListView.DataSource({
rowHasChanged:(oleRow,newRow) => oleRow!==newRow
});
return{
dataSource : ds.cloneWithRows(movies)
}
},
//渲染行组件
_renderRow:function (movie) {
return(
<View style={styles.row}>
<Image
style={styles.thumbnail}
source={{uri:movie.posters.thumbnail}}//图像的链接
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
)
},
//渲染头部
_renderHeader:function () {
return(
<View style={styles.header}>
<Text style={styles.headerText}>Movies List</Text>
<View style={styles.separator}></View>
</View>
) },
//渲染分割线
_renderSepatator:function (sectionID:number,rowID:number) {
return(
//view作为分割线
<View style={styles.separator} key={sectionID+rowID}></View>
)
}, render:function () {
return(
<ListView
style={styles.listView}
dataSource={this.state.dataSource}
renderRow={this._renderRow}
renderHeader={this._renderHeader}
renderSeparator={this._renderSepatator}
initialListSize={10} //开始时 渲染多少行
/> )
}
}); var styles = StyleSheet.create({ listView:{
marginTop:25,
flex:1,
backgroundColor:"#F5FCFF"
},
//行组件样式
row:{
flexDirection:"row",
padding:5,
alignItems:"center",
backgroundColor:"#F5FCFF"
},
thumbnail:{
width:53,
height:81,
backgrounColor:"gray"
},
rightContainer:{
marginLeft:10,
flex:1,
},
title:{
fontSize:18,
marginTop:3,
marginBottom:3,
textAlign:"center",
},
year:{
marginBottom:3,
textAlign:"center",
},
//header组件样式
header:{
height:50,
backgroundColor:"#F5FCFF"
},
headerText:{
flex:1,
fontSize:20,
fontWidth:"bold",
textAlign:"center",
lineHeight:44
},
//分割线组件样式
separator:{
height:1,
backgrounColor:"CCCCCC" } });
最新文章
- 找window的三种方法
- js 变量与值 连写
- Jboss7.1 加入realm auth认证 bootsfaces 美化的登录页面
- iOS开发——高级篇——如何集成支付宝SDK
- Nginx环境下配置PHP使用的SSL认证(https)
- VS2010中经常使用的快捷键
- sequekize
- 20172328 2018-2019《Java软件结构与数据结构》第六周学习总结
- 使用Bootstrap Bar来增加Onboarding Progress Bar功能。
- C#中哈希表(HashTable)的用法详解以及和Dictionary比较
- elasticsearch 动态增加副本
- Why in the code “456”+1, output is “56”
- hdu4942线段树模拟rotate操作+中序遍历 回头再做
- 交叉编译libudev
- IT程序猿们,我该做什么选择呢
- Tomcat 添加为系统服务 开机自动启动
- [Codeforces50C]Happy Farm 5 凸包
- 【bzoj2938】[Poi2000]病毒 AC自动机
- 代码自动生成工具 MyGeneration
- java.io.IOException Too many open files 解决