React native在两个scrollView中没有显示的图像
问题描述:
我开始反应原生,我很难找到我如何从uri加载图片并将其显示为两个scrollView(似乎我需要,一个用于垂直和一个水平卷轴)。我可以让它适用于本地文件,但只要我从互联网上获取它,除非我给出特定的大小,否则图片从不会显示。React native在两个scrollView中没有显示的图像
<View style={{ flex: 1 }}>
<ScrollView contentContainerStyle={{ flex: 0, alignContent: "stretch" }}>
<ScrollView horizontal={true} contentContainerStyle={{ flex: 0, alignContent: "stretch" }}>
<Image
style={{ flex: 1, backgroundColor: 'white' }}
resizeMode='cover'
source={{ uri: 'https://cdn.pixabay.com/photo/2017/02/15/11/15/wintry-2068298_960_720.jpg' }}
/>
</ScrollView>
</ScrollView>
</View>
没有scrollViews的代码显示完美的图像,但与他们的图像从不显示。我试过了,alignSelf:'stretch'
,或者设置top/bottom/right/left
到0
也width:'100%'
和height:'100%'
的图像没有给出预期的结果是把所有的空间可能显示的图像,并能水平里面滚动和垂直
感谢您的帮助。
答
终于找到了答案:
var myUri = 'https://cdn.pixabay.com/photo/2017/02/15/11/15/wintry-2068298_960_720.jpg';
var mode = 'cover'
Image.getSize(myUri, (width, height) => { this.setState({ width, height }) });
return (
<ScrollView contentContainerStyle={{ flex: 0 }}>
<ScrollView horizontal={true} contentContainerStyle={{ flex: 0 }}>
<Image
style={{ width: width, height: height }}
resizeMode={mode}
source={{ uri: myUri }}
/>
</ScrollView>
</ScrollView>
);