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
相似问题