Question

我试图在React Native中构建一个背景图像组件，它只能用于本地图像（jpg＆amp; png）加载（因此使用iOS for iOS），但是图像没有显示

import React from 'react';
import {Image} from 'react-native';

const BackgroundImage = (props) => {
    return (
        <Image source={{uri: props.img }}  style={styles.backgroundImage}>
            {props.children}
        </Image>
    )
};
const styles = {
    backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    }
};

export {BackgroundImage};

用法：

const App = () => (
    <BackgroundImage img='./assets/img/gradient.jpg'>
        <View style={{flex: 1}}>
             /* More things */
        </View>
    </BackgroundImage>
);

Answer 1

应该{{1}}而不是require。当你使用prop时，它需要首先存储在var中，然后你可以将它传递给Image，因为如果直接将prop传递给它，require将不起作用。

示例：

uri

或

let imagePath = require("../../assets/list.png");
<Image style={{height: 50, width: 50}} source={imagePath} />

Answer 2

您必须检查您的Image-URI是http还是https。 IOS只允许HTTPS。这是因为App Transport Security（ATS）

React Native：背景图像未显示

2 个答案: