在 ListView 中为 React Native 显示图像

Question

我有两个表示组件。第一个，称为Category，在做一些设置工作后简单地渲染一个 React Native ListView 组件。

第二个组件Book 只是将数据显示为文本，并带有应通过网络获取的图像。

不幸的是，Image 似乎根本没有显示。有人可以帮我显示图像吗？下面，请找到 Category 和 Book 组件定义，以及传递给 Book 的 props 示例。

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，您需要在图像的style 上设置显式的width 和height。这是因为没有自动react-native 知道图像有多大的方法。

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