写博客只会自己以后能看,留点映象
第一:获取数据源,我这里是自己手动添加一点假数据
var data = {
“result”: [
{
“data1”: “data/puzzle_domain_walker_data.json”,
“title1”: “迷域行者”
},
{
“data1”: “data/shuangqimigong.json”,
“title1”: “双栖迷宫”
},
{
“data1”: “data/langmanchuanshuo.json”,
“title1”: “浪漫传说”
},
{
“data1”: “data/Lily.json”,
“title1”: “Lily”
},
{
“data1”: “data/bodycount_data.json”,
“title1”: “死亡名单”
},
{
“data1”: “data/chaoxiyou.json”,
“title1”: “超西游”
},
{
“data1”: “data/duchuangtianya.json”,
“title1”: “独闯天涯”
},
{
“data1”: “data/kexuezhanshi.json”,
“title1”: “科学战士”
},
{
“data1”: “data/dtcys.json”,
“title1”: “大唐除妖司”
}, {
“data1”: “data/langmanchuanshuo.json”,
“title1”: “浪漫传说”
},
{
“data1”: “data/Lily.json”,
“title1”: “Lily”
},
{
“data1”: “data/bodycount_data.json”,
“title1”: “死亡名单”
},
{
“data1”: “data/chaoxiyou.json”,
“title1”: “超西游”
},
{
“data1”: “data/duchuangtianya.json”,
“title1”: “独闯天涯”
},
{
“data1”: “data/kexuezhanshi.json”,
“title1”: “科学战士”
},
{
“data1”: “data/dtcys.json”,
“title1”: “大唐除妖司”
}
]
} 有需要可以自己下截去,
第二步:导入Listview就不说了,构造方法里面创建DataSource(ds)
rowHasChanged是指数据改变时会刷新
constructor(props) {
super(props)
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2})
this.state = ({
dataSource: ds.cloneWithRows(data.result),
isLoading: true,
})
this.onLoad()
}
第三步:
<ListView
dataSource={this.state.dataSource}//指定数据源
renderRow={(item) => this.renderRow(item)}//指定每页的数据视图
//下面这名是添加下划线
renderSeparator={(rowData, sectionID, rowID, highlightRow) => this.renderSeparator(rowData, sectionID, rowID, highlightRow)}
//添加脚视图
renderFooter={() => this.renderFooterd()}
//下拉刷新数据
refreshControl={<RefreshControl
refreshing={this.state.isLoading}
onRefresh={() => this.onLoad()}
/>}
/>
上面三步就大功告成了
下面有几个方法
每个条目的item对应上面的 : renderRow={(item) => this.renderRow(item)}
renderRow(item) {
//取出数据里面的数据
return <View style={styles.item}>
<TouchableOpacity//点击事件视图
onPress={() => {
this.toast.show('你单击了:' + item.title1, DURATION.LENGTH_SHORT);
}}
>
<Text style={styles.tips}>{item.title1}</Text>
<Text style={styles.tips}>{item.data1}</Text>
</TouchableOpacity>
</View>
}
下面的是添加下划线代码:
renderSeparator(rowData, sectionID, rowID, highlightRow) {
return <View key={rowID} style={styles.line}></View>
}
下面的是模拟请求代码
onLoad() {
setTimeout(() => {
this.setState({
isLoading: false,
})
}, 2000)
}
写的这里也就结束了,只是刚刚接触RN也不是特别熟悉
下面是全部源码:
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
ListView,
RefreshControl
} from 'react-native'
import NavigationBar from './NavigationBar'
import Toast, {DURATION} from 'react-native-easy-toast'
var data = {
"result": [
{
"data1": "data/puzzle_domain_walker_data.json",
"title1": "迷域行者"
},
{
"data1": "data/shuangqimigong.json",
"title1": "双栖迷宫"
},
{
"data1": "data/langmanchuanshuo.json",
"title1": "浪漫传说"
},
{
"data1": "data/Lily.json",
"title1": "Lily"
},
{
"data1": "data/bodycount_data.json",
"title1": "死亡名单"
},
{
"data1": "data/chaoxiyou.json",
"title1": "超西游"
},
{
"data1": "data/duchuangtianya.json",
"title1": "独闯天涯"
},
{
"data1": "data/kexuezhanshi.json",
"title1": "科学战士"
},
{
"data1": "data/dtcys.json",
"title1": "大唐除妖司"
}, {
"data1": "data/langmanchuanshuo.json",
"title1": "浪漫传说"
},
{
"data1": "data/Lily.json",
"title1": "Lily"
},
{
"data1": "data/bodycount_data.json",
"title1": "死亡名单"
},
{
"data1": "data/chaoxiyou.json",
"title1": "超西游"
},
{
"data1": "data/duchuangtianya.json",
"title1": "独闯天涯"
},
{
"data1": "data/kexuezhanshi.json",
"title1": "科学战士"
},
{
"data1": "data/dtcys.json",
"title1": "大唐除妖司"
}
]
}
export default class ListViewSencond extends Component {
constructor(props) {
super(props)
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2})
this.state = ({
dataSource: ds.cloneWithRows(data.result),
isLoading: true,
})
this.onLoad()
}
renderRow(item) {
//取出数据里面的数据
return <View style={styles.item}>
<TouchableOpacity
onPress={() => {
this.toast.show('你单击了:' + item.title1, DURATION.LENGTH_SHORT);
}}
>
<Text style={styles.tips}>{item.title1}</Text>
<Text style={styles.tips}>{item.data1}</Text>
</TouchableOpacity>
</View>
}
renderSeparator(rowData, sectionID, rowID, highlightRow) {
return <View key={rowID} style={styles.line}></View>
}
renderFooterd() {
return <Image style={{width: 400, height: 100}}
source={{uri: ''}}/>
}
onLoad() {
setTimeout(() => {
this.setState({
isLoading: false,
})
}, 2000)
}
render() {
return (
<View style={styles.container}>
<NavigationBar
title={'ListViewSencond'}
statusBar={
{
backgroundColor: '#EE6363',
}
}
/>
<ListView
dataSource={this.state.dataSource}
renderRow={(item) => this.renderRow(item)}
renderSeparator={(rowData, sectionID, rowID, highlightRow) => this.renderSeparator(rowData, sectionID, rowID, highlightRow)}
renderFooter={() => this.renderFooterd()}
refreshControl={<RefreshControl
refreshing={this.state.isLoading}
onRefresh={() => this.onLoad()}
/>}
/>
<Toast ref={toast => {
this.toast = toast
}}/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 22,
},
item: {
height: 50
},
tips: {
fontSize: 15,
},
line: {
height: 1,
backgroundColor: '#e1e1e1'
}
})
结束: RN的路还很长