反应本机滚动视图未显示图像

Question

以下是我的React本机应用程序代码的代码。但是它没有显示图像。我将容器样式从滚动视图移动到图像以不正确的方式显示的图像。

<ScrollView vertical={true} style={styles.container} >
  <Image
    style={{ width: '100%', height: '100%' }}
    source={{ uri: this.props.navigation.state.params.PassedURL }}>
  </Image>
</ScrollView>

这里的容器样式

container: {
  flex: 1,
  backgroundColor: 'gray',
  padding: 10
},

屏幕上没有其他渲染

Answer 1

不要在ScrollView中使用flex:1，如果未解决的话，请尝试设置特定的宽度和高度

<ScrollView vertical={true} style={styles.container} >
   <Image
     style={{ width: 200, height: 200 }}
     source={{ uri: this.props.navigation.state.params.PassedURL }}>
    />
</ScrollView>

容器样式

container: {
  backgroundColor: 'gray',
  padding: 10
},

编辑：

如果您希望将其填充到全宽度，则将宽度设置为100％，并且高度将相应地将宽度设置为相应的，并且可以放置ResizeMode ='contand'或"封面"根据您的需要

Answer 2

这是因为您以百分比配置图像高度和权重

<Image
    style={{ width: '100%', height: '100%' }}
    source={{ uri: this.props.navigation.state.params.PassedURL }}>
</Image>

尝试使用确切的数字设置它，百分比仅使用一个宽度或Heigth而不是两个

<Image
    style={{ width: 100, height: 100 }}
    source={{ uri: this.props.navigation.state.params.PassedURL }}>
</Image>

Answer 3

这就是我的做法：

function getAspectRatio(img) {
    const data = Image.resolveAssetSource(img);
    return data.width / data.height;
}
...
<ScrollView horizontal={true} >
    <Image source={img} resizeMode='contain' 
        style={{ 
            height: '100%', 
            width: undefined, 
            aspectRatio: getAspectRatio(img) 
        }}
    />
</ScrollView>

它具有视图的高度并保留图像的纵横比。