Question

我正在使用模拟数据构建一个react native应用程序。我能够在平面列表中渲染一些模拟数据，但图像不会渲染。在本机devtools中，它显示了图像URL，但即使我在样式表元素中有样式，也没有显示样式。

import React, { Component } from "react";

import { StyleSheet, Text, View, Image, ListView } from "react-native";


class BookItem extends Component {
    render(){
        return (
            <View style = {styles.bookItem}>
                <Image style  = {styles.cover}  /> //is this the issue?
                <View style = {styles.info}>
                    <Text style = {styles.author}>{this.props.author}</Text>
                    <Text style = {styles.title}>{this.props.title}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    bookItem: {
        flexDirection: "row",
        backgroundColor: "#FFFFFF",
        borderBottomColor: "#AAAAAA",
        borderBottomWidth: 2,
        padding: 5,
        height: 175
    },
    cover: {
        flex: 1,
        height: 150,
        resizeMode: "contain"
    },
    info: {
        flex: 3,
        alignItems: "flex-end",
        flexDirection: "column",
        alignSelf: "center",
        padding: 20
    },
    author: { fontSize: 18 },
    title: {fontSize: 18, fontWeight: "bold"}
});
export default BookItem

我不确定我是否正确使用了Image元素。这可能是个问题。在大多数情况下，它显示devtools中的数据

Answer 1

您必须将图像与source属性一起使用。如果您想添加一个正好背景，您应该只使用View背景样式。 Look at the official doc from here 示例如下所示。

<Image
      style={{width: 50, height: 50}}
      source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>

Answer 2

您提到了一个平面列表，但您提供的代码示例没有平面列表。

有关详细信息，请参阅文档。
https://facebook.github.io/react-native/docs/image.html

以下是文档中提供的示例。

<Image
  source={require('/react-native/img/favicon.png')}
/>

<Image
  style={{width: 50, height: 50}}
  source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>

<Image
  style={{width: 66, height: 58}}
  source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>

你可以为我们嘲笑你的问题吗？
https://snack.expo.io/

Answer 3

两件事：图像组件需要源支柱来渲染图像，其次，尽量不要将flex与图像一起使用。通常他们需要手动设置宽度和高度属性才能正确渲染。

Answer 4

将resizeMode的值更改为cover，而不是contain。这为我解决了同样的问题。

Answer 5

我遇到了同样的问题，建议您将react-native更新到0.63.3版这可能会导致错误，在这种情况下，您可以使用此React-Native升级助手。 https://react-native-community.github.io/upgrade-helper/

图像渲染问题React Native

5 个答案: