在Android模拟器中显示应用程序时出错

时间:2019-01-22 18:51:46

标签: react-native

I keep getting this error in my visual Code editor 我在调试控制台中不断收到此错误。

这是我的主要App组件代码:-

 import React, {Component} from 'react';
import {StyleSheet, Text, View, FlatList, Image} from 'react-native';
import Bookitem from "./Bookitem";

const mB = [
  {
    rank: 1,
    title: "Gathering Prey",
    author: "John Sanford",
    image : "http://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9780399168796.jpg"
  },
  {
    rank: 2,
    title: "Memory Man",
    author: "David Baldacci",
    image : "http://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9781455586387.jpg"
  }
];

export default class App extends Component {
  constructor(props){
    super(props);
    this.state={data : this.addKeystoBooks(mB)};
  }

addKeystoBooks = books => {
  return books.map(book => {
     return Object.assign(book,{key: book.title})
  })
}



_renderitem = ({item}) => {
  <Bookitem 
    coverURL = {item.image}
    author = {item.author}
    title = {item.key} 
   /> 
}


render() {

    return <FlatList
         data={this.state.data}
         renderItem={this._renderitem} />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection : 'row'
  },
  input : {
    fontFamily: 'Lobster-Regular',
    fontSize: 24,
    padding: 40,
    borderWidth: 2,
    textAlign : "center"
  }
});

我的BookItem组件代码如下:-

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


export default class book extends Component {


    render(){
        return(

        <View style = {styles.container}>
          <Image style = {styles.cover} source = {this.props.coverURL} resizeMode="contain" />>
          <View style = {styles.info}>
             <Text style = {styles.author}>{this.props.author}</Text>
             <Text style ={styles.title}>{this.props.title}</Text>
          </View>
        </View>

        )
    }
}

const styles = StyleSheet.create(
    {
       container : {
           flex:1,
           justifyContent: "center",
           alignItems: "center",
           flexDirection: "row",
           backgroundColor:"#FFFFFF",
           borderBottomColor:"#AAAAAA",
           borderBottomWidth: 2,
           padding: 5,
           height: 175
       },
       cover : {
           flexDirection:"column",
           alignItems: "flex-start",
           height: 150
       },
       info:{
           flexDirection: "column",
           alignItems: "flex-end",
           flex: 3,
           alignSelf:"center",
           padding: 20
       },
       author: {
           fontFamily: "Lobster-regular",
           fontSize: 20
       },
       title : {
           fontSize: 23,
           fontFamily: "Lobster-Regular" 
       }
    }
)

我已经使用addkeystobooks函数为每本书添加一个唯一标识符以呈现flatList的数据 我希望这些信息足以告诉我我哪里出了问题,我正在尝试基于模拟书籍集来使用react-native。

0 个答案:

没有答案