圖像不顯示在Lighbox React Native中

Question

我試圖在反應本機中使用導航器在兩個場景之間導航。以下是場景「Example」，「LightboxView1」的codea。 我在第二個場景「LightboxView1」中放入了燈箱內的圖像。當我運行代碼時，圖像不顯示。

另外，如果我嘗試把圖像在第一現場的收藏，我得到這個錯誤「react.children.only有望獲得單個元素反應子」

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

我相信你沒有設置styles.contain中的圖像的height和width。直到它被告知其大小，Image纔會呈現。

至於react.children.only錯誤，將Image和標頭包裝在一個單獨的View中，並將它直接放在Lightbox的內部。

編輯：自iOS 9以來，默認情況下無法通過HTTP加載資源。要覆蓋此項，您需要將App Transport Security Exception添加到您的Info.plist。