在使用dataSource时,我们需要先new一个dataSource对象
constructor(){
super();
this.state = {
movies:new ListView.DataSource({
rowHasChanged:(row1,row2) => row1 !== row2
})
}
this.fetchData(); //豆瓣json https://api.douban.com/v2/movie/top250
};
1.getRowData(dataBlob, sectionID, rowID):表明我们将以何种方式从dataBlob(数据源)中提取出rowData,
sectionID用于指定每一个section的标题名(在renderRow,renderHeader等方法中会默认拆开并作为参数传入)
2.getSectionHeaderData(dataBlob, sectionID):表明我们将以何种方式从dataBlob(数据源)中提
取出HeaderData。HeaderData用于给每一个sectionHeader赋值
3.rowHasChanged(prevRowData, nextRowData):指定我们更新row的策略,一般来说都是prevRowData和
nextRowData不相等时更新row
4.sectionHeaderHasChanged(prevSectionData, nextSectionData):指定我们更新sectionHeader的策略,
一般如果用到sectionData的时候才指定
fetchData(){
data ='username='+user;
fetch(REQUEST_URL,
{
method: 'POST',
headers: {
'Accept':'application/json',
'Content-Type':'application/x-www-form-urlencoded'
},
body: data
})
.then((response) => response.json()) //把response转为json
.then((responseData) => {
this.setState({
movies:this.state.movies.cloneWithRows(responseData.subjects)
})
})
.catch((error)=> {
alert(error);
})
};
renderMovieList(movie){
return(
<View>
<View style={styles.itemContent}>
<Text onPress={() => this._gotoSubClass() } style={styles.itemHeader}>
{movie.title}
</Text>
</View>
</View>
);
}
//render两种写法 一
render() {
return(
<View style={styles.container}>
<ListView
dataSource={this.state.movies}
renderRow={
this.renderMovieList.bind(this) //上边自定义方法
}
/>
</View>
);
}
//render两种写法 二
render() {
return(
<View style={styles.container}>
<ListView
dataSource={this.state.movies}
renderRow={(movieData) => <Text>{movieData.title}</Text>}
/>
</View>
);
}
React-Native组件之ListView
原创
©著作权归作者所有:来自51CTO博客作者lb沫的原创作品,请联系作者获取转载授权,否则将追究法律责任

提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
React-Native组件之 TabBarIOS和TabBarIOS.Item
TabBarIOS 组件简介目前的APP内,大部分都是选项与选项之间切换,比如:微信、微开发需求。TabBarI
android ios native ico 自定义 -
react-native布局
react-native布局篇。
react-native -
react-native 初探
最近公司打算做一个app 我们的android 打算采用新技术 ,所以我也投入了学习的大部队中 首先 学习react-native 他是干什么的 我们一直知
react-native android bash ios -
react-native模板
expo升级SDK38后,原本创建项目时可选的导航模板变成了由typescript写的模板,于是自己还是js写一个,以下是效果地址https://github.com/tangmusenLiu/react-native-template
android ios typescript 创建项目 github -
react-native 封装 VedioPlayer 组件
1.封装组件 src/components/VideoPlayer/index.js 2.调用组件 3.效果图
react-native react-native 自定义组件 ide ico sed -
react-native
react-native 可以做到2端完全适配,但是有一点点小的地方需要调整 项目目录: .
react-native ios 项目文件 android 配置信息 -
React-Native(四):React Native之View学习
React Native实现以下布局效果:携html5(http://m.ctrip.com/html5/) 基于HelloWord修改项目代码: 最终运行效果:
React-Native html5 调优 项目代码 加载