flex box 不适用于 <Image> 在 react native android 中

Question

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

我将 RN 0.53.0 用于 Android 和 atom 编辑器。如果您需要更多详细信息，请告诉我。这是我提取数据的地方：http://rallycoding.herokuapp.com/api/music_albums

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;

Answer 1

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

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

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

Answer 2

这里：

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

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

Answer 3

这是您的代码：

请删除图片中的查看标签

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

样式表：用于 imageStyle

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

请检查它并告诉我它是否有效。

flex box 不适用于 <Image> 在 react native android 中

flex box is not working for <Image> in react native android

jsx

flexbox

atom-editor

react-native

react-native-android