Это мой основной код компонента «Приложение»: - Я сделал набор mockbook, который я передаю компоненту «Bookitem» для целей отображения, я передаю реквизиты автора, заголовок и URL-адрес обложки (URL-изображение) для цели рендеринга в «FlatList» .Но мое изображение не загружается, но автор и заголовок работают правильно, как только я удаляю тег «Изображение».
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 : "https://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9780399168796.jpg"
},
{
rank: 2,
title: "Memory Man",
author: "David Baldacci",
image : "https://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}) => {
return(
<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,
padding : 22
}
});
Это мой компонент Bookitem: -
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default class book extends Component {
render(){
return(
<View style = {styles.container}>
<View style = {styles.info}>
<Image style={styles.cover} source ={{uri : "https://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9780399168796.jpg"}} />
<Text style = {styles.author}>{this.props.author}</Text>
<Text style ={styles.title}>{this.props.title}</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create(
{
container : {
flexDirection: "row",
backgroundColor:"#FFF85C",
borderBottomColor:"#AAAAAA",
borderBottomWidth: 2,
padding: 5,
height: 175
},
cover : {
flex:1,
resizeMode:"contain",
height: 150,
width: 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"
}
}
)
Как я могу передать imageURL в качестве реквизита??
this.props.coverURL
в своем компоненте ``‹Book /›`? - person johnborges   schedule 23.01.2019coverURL
в качестве реквизита, используя статическое локальное изображение, а затем устраните проблему с сертификатом для URL-адреса удаленного изображения. - person johnborges   schedule 23.01.2019