2-1、ListView 中属性renderSeparator的问题

来源:4-1 ListView列表、下拉刷新、上拉加载的基本使用

22不小了

2017-05-21

http://szimg.mukewang.com/592133120001b01404150643.jpg


老师这个是我的具体报错信息:下面是代码部分:

/**
 * 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回答

CrazyCodeBoy

2017-05-22

将:

renderSeparator={(item)=>this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}

改为:

renderSeparator={(sectionID, rowID, adjacentRowHighlighted)=>this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}

试一下,问题出在=>前后参数个数要保持一致,另外,如果开发出现错误可以通过调试来快速定位出现错误的位置。这里有http://www.imooc.com/learn/808关于调试的视频教程,希望对你有帮助。

0
1
22不小了
非常感谢!
2017-05-24
共1条回复

22不小了

提问者

2017-05-21

当我把renderSeparator(sectionID, rowID, adjacentRowHighlighted) 参数全部去掉以后就恢复正常。希望老师能够解答,这是我学习编程以来这么积极的去问问题,我并不想给老师及同学们一个伸手党的印象,可没有办法,公司突然立项要用RN做APP开发,让我零基础用一个月的时间用RN开发出第一版本的APP,公司没有同事可以帮忙,学习来也挺痛苦的,这一晃时间就过去五天了,一直采取抓大放小的方式,迅速学习,遇到问题马上查资料,如果查找超时,只能提问老师了,还玩老师海涵。

0
1
大苗子
我也是公司要求做app,零基础 呜呜呜
2017-06-10
共1条回复

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程