wymagający obraz w natywnej reagować-0.14.2

Question

Robi to mój kod działa poprawnie

<Image 
source={require('../../assets/images/music_star.png')} 
style={styles.musicStar} 
/> 

Ale robi to daje mi błąd

let imgSource = '../../assets/images/music_star.png'; 
<Image 
source={require(imgSource)} 
style={styles.musicStar} 
/> 

pojawia się błąd:

Wymaganie nieznany moduł "../../assets/images/music_star.png"

Co robię źle? Jak wymagać obrazów przechowywanych w zmiennej w wersji natywnej 0.14.2?

Answer 1

Możesz przeczytać więcej in the docs ale w zasadzie, aby to zadziałało, nazwa obrazu w wymagać musi być znany statycznie:

// GOOD 
<Image source={require('./my-icon.png')} /> 

// BAD 
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; 
<Image source={require('./' + icon + '.png')} /> 

// GOOD 
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png'); 

Aby przekazać obraz z rodzica na dziecko, powinieneś go wymagać u rodzica:

/** 
* The entry point for the iOS app. 
*/ 
import React, { 
    AppRegistry, 
    Component, 
    Image, 
    View, 
} from 'react-native'; 

class Child extends Component { 
    render() { 
    return (
     <Image source={this.props.image} /> 
    ) 
    } 
} 

export default class Parent extends Component { 
    render() { 
    return (
     <View> 
     <Child image={require('./test.png')} /> 
     </View> 
    ); 
    } 
} 

AppRegistry.registerComponent('App',() => Parent);