L'image ne s'affiche pas à l'intérieur de Lighbox React Native

Question

J'essaie de naviguer entre deux scènes à l'aide de Navigator dans react-native. Ci-dessous est codea pour les scènes "Exemple", "LightboxView1". J'ai mis une image dans Lightbox dans la deuxième scène "LightboxView1". Lorsque je cours le code, Image ne s'affiche pas.

Aussi, si je tente de mettre l'image dans la visionneuse de première scène, je reçois cette erreur « react.children.only devrait recevoir un enfant unique élément réagir »

var Example = React.createClass({ 

    navigate(id) { 
    this.props.navigator.push({ 
     id: id, 
     component: LightboxView1 
    }) 
    }, 


    render: function() { 

    return (
     <ScrollView style={styles.container}> 
     <View style={styles.text}><Text>Test Text 1</Text></View> 
     <Lightbox navigator={this.props.navigator} 
      renderHeader={close => (
      <TouchableOpacity onPress={close}> 
       <Text style={styles.closeButton}>Close</Text> 
      </TouchableOpacity> 
     )}> 
      <View style={styles.customHeaderBox}><Text>I have a custom header</Text></View> 
     </Lightbox> 
     <TouchableHighlight onPress={() => this.navigate('second') } style={ styles.button }> 
     <Text>Second View</Text> 
     </TouchableHighlight> 
     </ScrollView> 
    ); 
    }, 
}); 

var LightboxView1 = React.createClass({ 

    render: function() { 
    return (
     <ScrollView style={styles.container}> 
     <View style={styles.text}> 
      <Text>Lighbox view 1: some example text</Text> 
     </View> 
     <Lightbox underlayColor="white" navigator={this.props.navigator}> 
      <Image style={styles.contain} resizeMode="contain" 
      source={{uri: 'http://www.yayomg.com/wp-content/uploads/2014/04/yayomg-pig-wearing-party-hat.jpg'}} 
      /> 
     </Lightbox> 
     <TouchableHighlight onPress={() => this.props.navigator.pop()}> 
      <Text>First View</Text> 
     </TouchableHighlight> 
     </ScrollView> 
    ); 
    }, 
}); 

var LightBoxProject = React.createClass({ 

    _renderScene: function(route, navigator){ 
    if(route.component) { 
    var Component = route.component; 
    return (<Component navigator={navigator} route={route} {...route.passProps} />); 
    } 
    switch(route.id){ 
    case "first": 
     return(<Exmaple navigator={navigator} />); 
    case "second": 
     return (<LightboxView1 navigator={navigator}/>); 
    } 
}, 

    render: function() { 

    return (
     <Navigator 
     ref="navigator" 
     style={styles.navigator} 
     renderScene={this._renderScene} 
     initialRoute={{ id: 'first', component: Example}} 
     /> 
    ); 
    } 
}); 

Answer 1

Je crois que vous n'avez pas défini le height et width de votre image dans styles.contain. Le Image ne rendra pas jusqu'à ce que sa taille soit indiquée.

En ce qui concerne l'erreur react.children.only, envelopper la fois Image et l'en-tête en un seul View et le mettre et seul directement à l'intérieur du Lightbox.

éditer: depuis iOS 9 vous ne pouvez pas par défaut charger des ressources via HTTP. Pour surcharger cela, vous devez ajouter App Transport Security Exception à votre Info.plist.