我刚开始学习 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;
最佳答案
这是你的代码:
请去掉图片的View标签
<CardSection>
<Image style={imageStyle} source={{ uri: image }} />
</CardSection>
样式表:用于图像样式
imageStyle: {
height: 300,
width: null,
flex: 1,
}
请检查它并告诉我它是否有效。
关于flexbox - flex box 在 react native android 中不适用于 <Image>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49241523/