React native在两个scrollView中没有显示的图像

Question

我开始反应原生，我很难找到我如何从uri加载图片并将其显示为两个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%'的图像没有给出预期的结果是把所有的空间可能显示的图像，并能水平里面滚动和垂直

感谢您的帮助。

Answer 1

终于找到了答案：

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> 
);