图像不适合在 iOS 中全屏显示

Question

我正在使用react-native-image-viewer 来渲染图像，代码看起来像这样

   <View style={{flex: 1}}>
        <ImageViewer 
             imageUrls={images}
             renderImage={() => <Image style={{height: '100%', width: '100%'}} resizeMode={'contain'} source={{uri:`${axios.defaults.baseURL}${url}`, headers}} />}
             enableImageZoom={true}
             backgroundColor={TEXT_HEADERBLACK}
             maxOverflow={0}
             renderIndicator={() => <></>}
        />
    </View>

这段代码在iOS中的结果如下

如您所见，图像不适合整个屏幕。但在 android 中它占据了整个屏幕。

我是否进行了任何样式更改以使其占据整个屏幕？

Answer 1

运行以下代码作为零食，在我的设备上看起来不错。虽然我删除了renderImage 属性。

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const images = [{
    // Simplest usage.
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',

    // width: number
    // height: number
    // Optional, if you know the image size, you can set the optimization performance

    // You can pass props to <Image />.
    props: {
        // headers: ...
    }
}, {
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
}]
// test

export default function App() {
  return (
   <View style={{flex: 1}}>
        <ImageViewer 
             imageUrls={images}
             enableImageZoom={true}
             backgroundColor={'#ffffff'}
             maxOverflow={0}
             renderIndicator={() => <></>}
        />
    </View>
  );
}

const styles = StyleSheet.create({

});

你可以链接你上面使用的图像吗？

Answer 2

我对 iOS 上<Image> 的理解需要绝对值而不是相对值。您还可以根据您的应用运行的平台添加条件渲染。

const {
  width: deviceWidth,
  height: deviceHeight,
} = Dimensions.get('window');

<Image
  style={{
    height: Platform.OS === 'ios' ? deviceHeight * 0.9 : '100%',
    width: Platform.OS === 'ios' ? deviceWidth * 0.9 : '100%'
  }}
  resizeMode={'contain'}
  source={{uri:`${axios.defaults.baseURL}${url}`, headers}}
/>