Question

我有一个组件，当被调用时应该显示整个手机屏幕的图像。问题是我无法使图像居中。它大部分位于屏幕右侧，几乎看不见。如果有人知道我在做什么错，您的帮助将不胜感激。我正在使用react-native-image-zoom，因此可以放大图像并向下滑动以消失。

我的图像组件：

const FullPicture = (props) => {
  return (
    <View style={{ height: '100%', width: '100%' }}>
      <ImageZoom
        cropWidth={Dimensions.get('window').width}
        cropHeight={Dimensions.get('window').height}
        enableSwipeDown
        onSwipeDown={() => props.closeImage()}
      >
        <Image
          style={{ height: props.picture.height, width: props.picture.width }}
          resizeMode={'cover'}
          source={{ uri: props.picture.uri }}
        />
      </ImageZoom>
    </View>
  );
};

Answer 1

您需要使用Flexbox。尝试将flex: 1添加到图像的容器中：

<View style={{ flex: 1, height: '100%', width: '100%' }}>
  <ImageZoom> ... </ImageZoom>
</View>

Answer 2

尝试以下方法：

在容器视图中设置flex: 1
使用justifyContent: 'center'

签出this。

React Native如何使图像全屏显示？

2 个答案: