React Native：背景画像が表示されない

Question

React Nativeに背景画像コンポーネントを作成しようとしていましたが、これはローカル画像（jpg & png）の読み込み（iOS用のURIの使用）それはrequireないuriでなければなりません

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

Answer 1

：イメージは

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

使用状況を表示されません。あなたが小道具を使用しているので、最初に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')} 
/>