在两个未显示的滚动视图中反应本机图像

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%' 图像没有给出预期结果 尽可能 space 显示图像并能够在其中水平和垂直滚动

感谢您的帮助。

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

在两个未显示的滚动视图中反应本机图像

React native Image in two scrollView not showing

image

scrollview

flexbox

react-native