Question

这是我的主要“应用”组件代码：- 我已经制作了一个模拟书集，我将其传递给“ Bookitem”组件以进行显示，我将道具作者，title和coverURL（imageURL）传递给了“ 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作为道具？

Answer 1

因此，您的代码存在一些问题：

您忘记将Image导入到Bookitem文件中。
似乎您的网址包含无效的SSL证书，因此您没有能够通过HTTPS请求它们。将协议更改为HTTP 使其可以下载并显示。

下面是您的代码，其中包含所需的更正：

App.js

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 }) => {
    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.js

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: this.props.coverURL }} />
             <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: {
      fontSize: 20,
    },
    title: {
      fontSize: 23,
    },
  }
);

Here's how it should look

如何将图片网址作为道具传递给另一个组件？

1 个答案: