2

APIからブックの詳細を取得することによって、単純なListViewを作成しています。アプリケーションは正常に動作しますが、私は警告といくつかのReferenceErrorを取得します。エラーhereを見ることができます。私は以下のコードも提供しています。 index.android.jsため警告:空のセクションヘッダーがレンダリングされる - 反応ネイティブ

コード:BookItem.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); 

コード:

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); 

何おそらく間違っている可能性が、私はそれをどのように解決するのですか?

答えて

2

よく警告はすでにすべてそれを言う。 enableEmptySectionsをリストビューコンポーネントに追加するだけで、警告は消えます。

+0

これは機能しました!ありがとう:) –

関連する問題