图像渲染问题 React Native答案

【问题标题】：Image rendering issues React Native图像渲染问题 React Native
【发布时间】：2018-01-03 19:54:44
【问题描述】：

我正在使用模拟数据构建一个反应原生应用程序。我能够在平面列表中呈现一些模拟数据，但图像不会呈现。在 react native devtools 中，它显示了图像 url，但没有显示任何样式，即使我在 Stylesheet 元素中有样式。

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 中显示数据

【问题讨论】：

标签： javascript android css react-native

【解决方案1】：

您必须使用带有源属性的图像。如果你想添加一个公正的背景，你应该只使用 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'}}
/>

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

两件事：图像组件需要一个源道具来渲染图像，第二，尽量不要对图像使用 flex。通常他们需要手动设置宽度和高度属性才能正确渲染。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：