image - 在两个未显示的 ScrollView 中 react native 图像

Question

我开始使用 react-native，我很难找到如何从 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>
);