在两个滚动视图中反应原生图像未显示答案

【问题标题】：React native Image in two scrollView not showing在两个滚动视图中反应原生图像未显示
【发布时间】：2018-02-02 11:30:07
【问题描述】：

我开始 react-native 并且我很难找到如何从 uri 加载图片并将其显示到两个滚动视图中（似乎我需要那个，一个用于垂直，一个用于水平卷轴）。我可以让它适用于本地文件，但是一旦我从互联网上得到它，除非我给出特定的大小，否则图片永远不会出现。

  <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%' 的图像没有给出预期的结果，即占用所有可能显示图像的空间并成为能够在其中水平和垂直滚动

感谢您的帮助。

【问题讨论】：

标签： image react-native flexbox scrollview

【解决方案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>
);

【讨论】：