2-1、ListView 中属性renderSeparator的问题
来源:4-1 ListView列表、下拉刷新、上拉加载的基本使用
22不小了
2017-05-21

老师这个是我的具体报错信息:下面是代码部分:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
TouchableOpacity,
RefreshControl
} from 'react-native';
import Navigtorbar from './Navigtorbar'
import Toast ,{DURATION} from 'react-native-easy-toast';
var data = {"result":[
{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},
{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},
{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
},{
"name":"chenjiahong",
"resParam": 85522,
"email":"34@qq.com"
}
]};
export default class ListViewTest extends Component {
constructor(props) {
super(props);
var 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.row}>
<TouchableOpacity onPress={()=>{
this.toast.show('你单击了'+item.name,DURATION.LENGTH_LONG);
}}>
<Text style={styles.tips}>{item.name}</Text>
<Text style={styles.tips}>{item.resParam}</Text>
<Text style={styles.tips}>{item.email}</Text>
</TouchableOpacity>
</View>
}
renderSeparator(sectionID, rowID, adjacentRowHighlighted){
return <View style={styles.line} key={rowID}></View>
}
renderFooter(){
return <Image style={{width:400,height:400}} source={require('./res/images/ic_trending@3x.png')} />
}
renderHeader(){
}
onLoad(){
setTimeout(()=>{
this.setState({isLoading:false})
},2000);
}
render() {
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={(item)=>this.renderRow(item )}
renderSeparator={(item)=>this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
renderFooter={(item)=>this.renderFooter()}
renderHeader={(item)=>this.renderHeader()}
refreshControl={
<RefreshControl
refreshing={this.state.isLoading}
onRefresh={()=>this.onLoad()}
/>
}
/>
<Toast ref={toast=>{this.toast=toast}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
row:{
height:70
},
tips:{
fontSize:18
},
line:{
height:1,
backgroundColor:'black'
}
});
AppRegistry.registerComponent('simple_app', () => simple_app);这是我学习React Native的第五天,一开始遇到好些奇怪问题,上网查资料,中文特别少,英语又学得不怎么的,理解起来很是费劲,比如说我在window上用webstorm编程,出现中文乱码问题,查资料一时半会还是没有找到。
写回答
2回答
-
将:
renderSeparator={(item)=>this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}改为:
renderSeparator={(sectionID, rowID, adjacentRowHighlighted)=>this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}试一下,问题出在=>前后参数个数要保持一致,另外,如果开发出现错误可以通过调试来快速定位出现错误的位置。这里有http://www.imooc.com/learn/808关于调试的视频教程,希望对你有帮助。
012017-05-24 -
22不小了
提问者
2017-05-21
当我把renderSeparator(sectionID, rowID, adjacentRowHighlighted) 参数全部去掉以后就恢复正常。希望老师能够解答,这是我学习编程以来这么积极的去问问题,我并不想给老师及同学们一个伸手党的印象,可没有办法,公司突然立项要用RN做APP开发,让我零基础用一个月的时间用RN开发出第一版本的APP,公司没有同事可以帮忙,学习来也挺痛苦的,这一晃时间就过去五天了,一直采取抓大放小的方式,迅速学习,遇到问题马上查资料,如果查找超时,只能提问老师了,还玩老师海涵。
012017-06-10
相似问题