在ListView中显示React Native的图像

Question

我有两个表示组件。第一个，称为Category，只需在完成一些设置工作后呈现React Native ListView组件。

第二个组件Book只是将数据显示为文本，并且应该通过网络提取图像。

不幸的是，Image似乎根本没有显示。有人可以帮助我显示图像吗？请在下面找到Category和Book组件定义，以及过去Book的道具样本。

Category.js

import React from 'react';
import { ListView, Text } from 'react-native';
import _ from 'lodash';
import { camelizeKeys } from 'humps';

import Book from './Book';

const Category = ({ category }) => {
  let element;

  if (!_.isEmpty(category)) { // if data is available
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    const camelCasedBooks = camelizeKeys(category.results.books);
    const data = ds.cloneWithRows(camelCasedBooks);

    element = (
      <ListView
        dataSource={data}
        enableEmptySections
        renderRow={(book) => <Book {...book} />}
      />
    );
  } else { // if data is not available
    element = (
      <Text>Loading</Text>
    );
  }

  return element;
};

Category.propTypes = {
  category: React.PropTypes.object.isRequired,
};

export default Category;

Book.js

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

const Book = ({ author, bookImage, description, title }) =>
  <View>
    <Text>
      {author}
    </Text>
    <Text>
      {bookImage}
    </Text>
    <Text>
      {description}
    </Text>
    <Text>
      {title}
    </Text>
    <Image source={{ uri: bookImage }} />
  </View>;

Book.propTypes = {
  author: React.PropTypes.string.isRequired,
  bookImage: React.PropTypes.string.isRequired,
  description: React.PropTypes.string.isRequired,
  title: React.PropTypes.string.isRequired,
};

export default Book;

样本书道具

{
 author: "Vi Keeland",
 bookImage: "https://s1.nyt.com/du/books/images/9781942215462.jpg",
 description: "Reese dismisses a chance encounter with a smug stranger, until he turns out to be her new boss.",
 title: "BOSSMAN"
}

Answer 1

使用来自远程位置的图片（例如bookImage时，您需要在图片的width上设置明确的height和style。事实上，没有自动的反应原生方式来了解图像的大小。

检查Image文档，了解在渲染之前计算图像大小的策略。根据我的经验，只需在大多数情况下明确地设置width和height就足够了。