이미지가 Lighbox 내부에 표시되지 않습니다. 원주민

Question

네이티브에서 네비게이션을 사용하여 두 장면 사이를 탐색하려고합니다. 아래는 장면 "예제", "LightboxView1"에 대한 코드입니다. 두 번째 장면 인 "LightboxView1"에서 라이트 박스 안에 이미지를 넣었습니다. 코드를 실행하면 이미지가 표시되지 않습니다. 나는 첫 장면의 라이트 박스에 이미지를 넣어하려고하면

또한, 나는 당신이 설정하지 않은 생각

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

"react.children.only 하나의 반응 자식 요소를받을 것으로 예상"이 오류가 이미지의 height 및 width은 styles.contain입니다. Image은 크기가 알려질 때까지 렌더링되지 않습니다.

react.children.only 오류의 경우 Image과 머리글을 모두 View에 넣고 Lightbox 안에 직접 넣으십시오.

편집 : iOS 9부터 기본적으로 HTTP를 통해 리소스를로드 할 수 없습니다. 이를 무시하려면 Info.plist에 App Transport Security Exception을 추가해야합니다.