Question

如何调用ListView的renderHeader？我尝试了以下代码，但没有任何反应

this.refs.listview.props.renderHeader()

Answer 1

你需要传入一个renderHeader方法，该方法返回一个JSX元素，如下面的代码所示：

<ListView renderHeader={this.renderHeader} dataSource={this.state.dataSource} renderRow={this.renderRow} />

我还设置了一个非常基础的项目，展示了如何做到here。代码如下。希望这能回答你的问题！

https://rnplay.org/apps/fuYP5Q

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView
} = React;

var SampleApp = React.createClass({

  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return { 
      dataSource: ds.cloneWithRows([]),
      data: ['row1', 'row2', 'row3', 'row4', 'row5', 'row6']
    }

  },

  componentDidMount: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.setState({
        dataSource: ds.cloneWithRows(this.state.data)
    })
  },

  renderHeader: function() {
    return <View style={{backgroundColor:'red', height:60}}><Text style={{color: 'white', fontSize:20, textAlign:'center'}}>Header</Text></View>
  },

  renderRow:function(data) {
    return <View style={{height:50, borderWidth:1, marginBottom:5}}><Text  style={{textAlign:'center'}} >{data}</Text></View>
  },

  render: function() {
    return (
      <View style={styles.container}>
        <ListView renderHeader={this.renderHeader} dataSource={this.state.dataSource} renderRow={this.renderRow} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginTop:100
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

React native render header方法

1 个答案: