React Native ImageViewing

react-native-image-viewing 是一个 React Native 组件，用于查看全屏图片并支持手势缩放。

安装

npm install react-native-image-viewing

用法

import ImageView from 'react-native-image-viewing';

function MyComponent() {
  const images = [
    { uri: 'https://picsum.photos/id/1018/1000/1000' },
    { uri: 'https://picsum.photos/id/1015/1000/1000' },
    { uri: 'https://picsum.photos/id/1019/1000/1000' },
  ];
  const [visible, setIsVisible] = useState(false);
  const [index, setIndex] = useState(0);

  return (
    <TouchableOpacity onPress={() => setIsVisible(true)}>
      <Image
        source={{ uri: 'https://picsum.photos/id/1018/200/200' }}
        style={{ width: 200, height: 200 }}
      />
      <ImageView
        images={images}
        imageIndex={index}
        visible={visible}
        onRequestClose={() => setIsVisible(false)}
        onIndexChange={setIndex}
      />
    </TouchableOpacity>
  );
}

以上代码将创建一个点击图片时显示全屏图片，并且支持手势缩放的视图。

属性

| 属性 | 类型 | 描述 | | ------------- | ------------- | --------------------------------------------------- | | images | array | 一个包含图片 URL 或本地文件路径的对象数组 | | imageIndex | number | 初始显示的图片下标 | | visible | boolean | 控制是否显示呈现器 | | onRequestClose | function | 当用户按下关闭按钮或使用系统返回按钮时，将触发此函数 | | onIndexChange | function | 每当用户在呈现器中切换图像时，都会触发此回调函数。更新图像索引 | | presentationStyle | modal or sheet | 定义呈现器的展示方式，在 iOS 上使用默认 modal，在 Android 上可以设置为 sheet | | backgroundColor | string | 定义背景颜色，默认为黑色 |

贡献

如有任何 bug 或功能请求，请访问 GitHub 并创建一个 issue。

授权

此项目根据 MIT License 授权。