Question

以下是我对本机应用代码的反应代码。但是它没有显示图像。 i将容器样式从滚动视图移到以错误的方式显示的图像。

<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

这是因为您使用百分比配置了图像的高度和重量

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

尝试将其设置为确切的数字，百分比只能使用一个宽度或高度，而不能同时使用两者

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

Answer 2

不要在flex:1中使用ScrollView，如果不能解决问题，请尝试设置其他人建议的特定宽度和高度

<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
},

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>

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

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

3 个答案: