Question

我刚开始学习React-Native。我在尝试将图像渲染到屏幕时遇到问题，但它没有出现。我尝试了很多来自谷歌和堆栈溢出的解决方案，但无法解决问题。有人可以帮帮我吗。以下是详细信息。

我使用RN 0.53.0 for Android with atom editor。如果您需要更多详细信息，请与我们联系。这是我提取数据的地方：http://rallycoding.herokuapp.com/api/music_albums

＆＃13;

import React from 'react';
import { Text, View, Image, Linking } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
import Button from './Button';

const AlbumDetail = ({ album }) => {
    const {
      title,
      artist,
      thumbnail_image,
      image,
      url
    } = album;
    const {
      headerContentStyle,
      thumbnailStyle,
      thumbnailContainerStyle,
      imageStyle
    } = styles;

    return (
      <Card>
        <CardSection>
          <View style={thumbnailContainerStyle}>
            <Image style={thumbnailStyle} source={{ uri: thumbnail_image }} />
          </View>
          <View style={headerContentStyle}>
            <Text style={{ fontSize: 18 }}>{title}</Text>
            <Text>{artist}</Text>
          </View>
        </CardSection>
        <CardSection>
          <View>
            <Image style={imageStyle} source={{ uri: image }} />
          </View>
        </CardSection>
        <CardSection>
          <Button onPress={() => Linking.openURL(url)}>
            Purchase
          </Button>
        </CardSection>
      </Card>
    );
};

const styles = {
  headerContentStyle: {
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
  thumbnailStyle: {
    height: 50,
    width: 50
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  imageStyle: {
    height: 350,
    width: null,
    flex: 1,
    justifyContent: 'center'
  }
};

export default AlbumDetail;

＆＃13;

Answer 1

下面：

imageStyle: {
    height: 350,
    width: null,
    flex: 1,
    justifyContent: 'center'
  }

您已将图像宽度设置为null。尝试将其设置为合理的值。

Answer 2

这是你的代码：

请从图片中删除View标记

<CardSection>
   <Image style={imageStyle} source={{ uri: image }} />
</CardSection>

stylesheet：for imageStyle

 imageStyle: {
    height: 300,
    width: null,
    flex: 1,
  }

请检查并告知我是否正常工作。

Answer 3

您需要将图案的样式添加到高度和宽度。在你的代码中你没有添加样式，试试这个：

 <Image style={styles.imageStyle} source={{ uri: image }} />

使用来自互联网的图片时，请为高度和宽度添加有效尺寸。

flex box不适用于本地android中的<img/>

3 个答案: