i want create react native demo has listview header. i'm rendering view on top of listview component:
render: function() { if (!this.state.loaded) { return this.renderloadingview(); } return ( <view style = {styles.viewcontainer}> <text style = {styles.title}>标题:{this.state.question.content}</text> <text style = {styles.year}>描述:{this.state.question.description}</text> <listview datasource={this.state.datasource} renderrow={this.rendermovie} style={styles.listview}/> </view> ); //加载回复答案 }, renderloadingview: function() { return ( <view style={styles.container}> <text> loading infos... </text> </view> ); }, rendermovie: function(movie) { return ( <view style={styles.container}> <view style={styles.rightcontainer}> <text style={styles.title}>{movie.content}</text> <text style={styles.year}>id:{movie.username}</text> </view> </view> ); }, }); i render header part of listview component instead. how can so?
according react native documentation on listview, listview can accept renderheader function prop , render header based on it.
here's how can it:
render: function() { if (!this.state.loaded) { return this.renderloadingview(); } return ( <view style = {styles.viewcontainer}> <listview datasource={this.state.datasource} renderrow={this.rendermovie} renderheader={this.renderheader} style={styles.listview}/> </view> ); }, renderheader: function() { return ( <view> <text style = {styles.title}>标题:{this.state.question.content}</text> <text style = {styles.year}>描述:{this.state.question.description}</text> </view> ) } renderloadingview: function() { return ( <view style={styles.container}> <text> loading infos... </text> </view> ); }, rendermovie: function(movie) { return ( <view style={styles.container}> <view style={styles.rightcontainer}> <text style={styles.title}>{movie.content}</text> <text style={styles.year}>id:{movie.username}</text> </view> </view> ); }, });
Comments
Post a Comment