图像不显示在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。