警告：将呈现空白部分 headers - React Native

Question

我正在通过从 API 获取书籍详细信息来制作一个简单的 ListView。该应用程序运行良好，但我收到警告和一些 ReferenceError。你可以看看错误here。我还提供了下面的代码。

index.android.js的代码：

import React, {Component} from 'react';
import {StyleSheet,Image,View,ListView,AppRegistry} from 'react-native';
import BookItem from './BookItem.js';


class dhrumil extends Component{


constructor(){
  super();
    var ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1!==r2});
  this.state={
    dataSource: ds.cloneWithRows([])
  }
}


componentDidMount(){
fetch('http://api.nytimes.com/svc/books/v3/lists/hardcover-fiction?response-format=json&api-key=73b19491b83909c7e07016f4bb4644f9:2:60667290')
.then((response) => response.json())
.then((rjson) => {
this.setState({
  dataSource: ds.cloneWithRows(rjson.results.books)
});
})
.catch((error)=>{
  console.warn(error);
});
}


render(){
  return(
<ListView style={styles.container}
dataSource= {this.state.dataSource}
renderRow={(rowData)=> {
return <BookItem style={styles.row}
coverURL={rowData.book_image}
title={rowData.title}
author={rowData.author}
/>;
}
}
/>

);
}


}
var styles = StyleSheet.create({
container: {
flex: 1,

backgroundColor: '#FFFFFF',
paddingTop: 24
},
row: {
flex: 1,
height: 44,
fontSize: 24,
padding: 42,
borderWidth: 1,
borderColor: '#DDDDDD'
}
});


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

BookItem.js的代码：

import React,{Component} from 'react';
import {StyleSheet,View,Text,Image,AppRegistry} from 'react-native';

class BookItem extends Component{
propTypes:{
  coverURL: React.PropTypes.string.isRequired,
  author: React.PropTypes.string.isRequired,
  title: React.PropTypes.string.isRequired
}

render(){
return(
<View style={styles.bookItem}>
<Image style={styles.cover} source={this.props.coverURL}/>
<View style={styles.info}>
<Text style={styles.author}>{this.props.author}</Text>
<Text style={styles.title}>{this.props.title}</Text>
</View>
</View>
  );
}


}
var styles = StyleSheet.create({
  bookItem:{
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#FFFFFF',
    borderBottomColor: '#AAAAAA',
    borderBottomWidth: 2,
  },
  cover:{
    flex: 1,
    height: 150,
    resizeMode: 'contain'
  },
  info:{
    flex: 3,
    alignItems: 'flex-end',
    flexDirection: 'column',
    alignSelf: 'center',
    padding: 20
  },
  author:{
    fontSize: 18
  },
  title:{
    fontSize: 18,
    fontWeight: 'bold'
  }
});
AppRegistry.registerComponent("BookItem",()=> BookItem);

可能出了什么问题，我该如何解决？

Answer 1

嗯，警告已经说明了一切。只需将 enableEmptySections 添加到您的列表视图组件，警告就会消失。

警告：将呈现空白部分 headers - React Native

Warning: Empty section headers will be rendered - React Native

android

react-native

react-native-android

react-native-listview