这是我的主要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。