图像不显示在Lighbox React Native中
问题描述:
我试图在反应本机中使用导航器在两个场景之间导航。以下是场景“Example”,“LightboxView1”的codea。 我在第二个场景“LightboxView1”中放入了灯箱内的图像。当我运行代码时,图像不显示。图像不显示在Lighbox React Native中
另外,如果我尝试把图像在第一现场的收藏,我得到这个错误“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}}
/>
);
}
});
答
我相信你没有设置styles.contain
中的图像的height
和width
。直到它被告知其大小,Image
才会呈现。
至于react.children.only
错误,将Image
和标头包装在一个单独的View
中,并将它直接放在Lightbox
的内部。
编辑:自iOS 9以来,默认情况下无法通过HTTP加载资源。要覆盖此项,您需要将App Transport Security Exception添加到您的Info.plist
。
感谢您的评论,我会试一试,让你知道。 – Sameer
包含:{ 柔性:1, 高度:150, }, 我没有这种风格,仍然没有工作 – Sameer
您应同时指定'width'和'Image'的'height'。 –