Question

我开始反应原生，我很难找到如何从 uri 加载图片并将其显示为两个scrollView（似乎我需要它，一个用于垂直，一个用于水平卷轴）。我可以使它适用于本地文件，但是一旦我从互联网上获取它，图片就不会出现，除非我给出一个特定的大小。

var ninja = {};
debugger;


addMethod(ninja,'whatever',function(){ console.log("I am the one with ZERO arguments supplied") });
addMethod(ninja,'whatever',function(a){ console.log("I am the one with ONE arguments supplied") });
addMethod(ninja,'whatever',function(a,b){ console.log("I am the one with TWO arguments supplied") });


ninja.whatever();
ninja.whatever(1,2);
ninja.whatever(3);

没有scrollViews的相同代码完美地显示了图像，但是使用它们时图像永远不会显示。我尝试了<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>，或者将alignSelf:'stretch'设置为top/bottom/right/left以及将0和width:'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>
);

在两个scrollView中反映原生图像不显示

1 个答案: