flexbox - flex box 在 react native android 中不适用于

Question

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

我正在使用 RN 0.53.0 for 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

这是你的代码:

请去掉图片的View标签

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

样式表:用于图像样式

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

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