Weitergabe der Bildquelle an eine andere Navigation - React Native

Question

Ich bin eine einfache App für die Schule bauen und ich habe eine Frage in Bezug auf die Weitergabe von Bildern Quelle von einer Navigationsansicht zu einer anderen Navigationsansicht. Hier

ist der Code:

class projekt2 extends React.Component { 
    render() { 
    return (
     <Navigator initialRoute={{id:'first'}} renderScene={this.navigatorRenderScene}/> 
    ) 
    } 

    navigatorRenderScene(route, navigator) { 

    _navigator = navigator; 

    switch(route.id) { 
     case 'first': 
     return (<First navigator={navigator} title="first" />); 
     case 'second': 
     return (<Second navigator={navigator} title="second" />) 
     case 'third': 
     return (<Third navigator={navigator} title="third" />) 
    } 

    } 
}; 

class First extends React.Component { // http://blog.paracode.com/2016/01/05/routing-and-navigation-in-react-native/ 
    navSecond() { 
    this.props.navigator.push({ 
     id: 'second', 
    }) 
    } 
    render() { //na sklad se da navigacijske slide, če klikaš gumbek back, se jemlje iz tega sklada 
    return (
     <View style={styles.container}> 
      <TouchableHighlight 
      onPress={this.navSecond.bind(this)}> 
       <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}> 
       <Image source={require('./slike_google/btn_google_light_normal_hdpi.9.png')}></Image> 
       <Text>Sign in with Google</Text> 
       </View> 
      </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

class Second extends React.Component { 

    _handlePress() { 
    this.props.navigator.push({ 
     id: 'third',  
    }) 
    } 

    _dodaj() { 
    ToastAndroid.show('Ni se vnesenih kartic',ToastAndroid.LONG); 
    } 


    render() { 
    return (
     <View style={styles.container} id="prva"> 
     <TouchableHighlight onPress={this._dodaj.bind(this)}> 
      <Image source={require('./slike_google/plus_318-80291.png')} style={{width: 30, height: 30}}></Image> 
     </TouchableHighlight> 
     <View> 
      <TouchableHighlight onPress={this._handlePress.bind(this)}> 
      <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image> 
      </TouchableHighlight> 
      <TouchableHighlight onPress={this._handlePress.bind(this)}> 
      <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image> 
      </TouchableHighlight> 
      <TouchableHighlight onPress={this._handlePress.bind(this)}> 
      <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image> 
      </TouchableHighlight> 
      <TouchableHighlight onPress={this._handlePress.bind(this)}> 
      <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image> 
      </TouchableHighlight> 
      <TouchableHighlight onPress={this._handlePress.bind(this)}> 
      <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image> 
      </TouchableHighlight> 
     </View> 
     <Text ref="none" style={{opacity: 0}}>Se ni dodanih kartic</Text> 
     </View> 
    ); 
    } 
}; 

class Third extends React.Component { 

    render() { 
    return (
    <View style={styles.container}> 
     <Image source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')}></Image> 
    </View> 
    ); 
    } 
} 

also in Klasse III sollte die Bildquelle sollte so etwas wie: source = {passed_data.url}.

Vielen Dank für Ihre Hilfe

Answer 1

ich Ihnen ein Beispiel tat in https://rnplay.org/apps/b3mJ5A

var SampleApp = React.createClass({ 
    render: function() { 
    var vSource = {uri: 'http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg'}; 
    return (
     <View style={styles.container}> 
     <Text>CustomImage Example</Text> 
     <CustomImage source={vSource} /> 
     </View> 
    ); 
    } 
}); 

var CustomImage = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <Image source={this.props.source} style={{width: 60,height: 60,}}/> 
     </View> 
    ); 
    } 
}); 

Es funktioniert gut.

Hoffe das ist, was Sie suchen.