list view header about react native -


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