图像渲染问题 React Native

Question

I am building a react native app using mock data. I am able to render some of the mock data in a flatlist but the image will not render. In the react native devtools it shows the image url but no style is shown even though I have the style in the Stylesheet element.

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

Im not sure if I am using the Image element in react native properly. This could be the issue. For the most part it shows the data in the devtools

Answer 1

You have to use image with source property. If you want to to add a just background you should use just View with background style. Look at the official doc from here Example is at the below.

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

Answer 2

You mentioned a flatlist but the code sample you provided does not have a flatlist.

Refer to the documentation for more information.
https://facebook.github.io/react-native/docs/image.html

Here are the examples provided in the documentation.

<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=='}}
/>

Could you maybe mock up your problem for us?
https://snack.expo.io/

Answer 3

Two things: Image component needs a source prop to render an image and second, try not to use flex with images. Usually they need width AND height property manually set to render properly.

Answer 4

Change the value for resizeMode to cover instead of contain . This has resolved the same issue for me.

Answer 5

I had the same problem, i suggest you update react-native to version 0.63.3 It will probably cause errors, in which case you could use this React-Native upgrade helper. https://react-native-community.github.io/upgrade-helper/