React Native：未显示背景图像答案

【问题标题】：React Native: Background Image not being shownReact Native：未显示背景图像
【发布时间】：2017-07-21 18:41:22
【问题描述】：

我试图在 React Native 中构建一个背景图像组件，它只能用于本地图像（jpg 和 png）加载（因此在 iOS 中使用 URI），但图像不显示

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>
);

【问题讨论】：

标签： javascript image react-native

【解决方案1】：

应该是require 而不是uri。由于您使用了 prop，因此需要先将其存储在 var 中，然后您可以将其传递给 Image，因为如果您直接将 prop 传递给它，require 将不起作用。

例子：

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

或

<Image style={[this.props.imageStyle]}
    source={this.props.imagePath
    ? this.props.imagePath
    : require('../theme/images/resource.png')}
/>

【讨论】：

【解决方案2】：

您必须检查您的 Image-URI 是 http 还是 https。 IOS 只允许 HTTPS。这是因为应用传输安全 (ATS)

【讨论】：