反应-内生-图像-查看
反应原生模式组件,用于将图像作为滑动画廊来查看.
- iOS 和 Android 的缩放
- iOS 和 Android 的双接相放大
- 支持刷新到关闭动画
- QQCustom 页眉和页脚组件
- 虚拟化 列表以优化图像加载和渲染
试看博览会:https://expo.io/@antonkalinin/react-inative-image-viewing
安装
yarn add react-native-image-viewing
或者说
npm install --save react-native-image-viewing
使用量
import ImageView from "react-native-image-viewing";
const images = [
{
uri: "https://images.unsplash.com/photo-1571501679680-de32f1e7aad4",
},
{
uri: "https://images.unsplash.com/photo-1573273787173-0eb81a833b34",
},
{
uri: "https://images.unsplash.com/photo-1569569970363-df7b6160d111",
},
];
const [visible, setIsVisible] = useState(false);
<ImageView
images={images}
imageIndex={0}
visible={visible}
onRequestClose={() => setIsVisible(false)}
/>
见示例
道具
| 专利名称 | 说明 | 类型 | 需求 |
|---|---|---|---|
images | 要显示的图像阵列 | 图像来源 [] | 真实 |
keyExtractor | 任意识别每个图像 | (图像Src:图像来源,索引:数字)QQ字符串 | 虚假 |
imageIndex | 当前要显示的图像索引 | 编号 | 真实 |
visible | 是否显示模式 | 布尔 | 真实 |
onRequestClose | 关闭模式的函数 | 函数 | 真实 |
onImageIndexChange | 当图像索引被更改时调用的函数 | 函数 | 虚假 |
onLongPress | 图像按久时调用函数 | 函数( 事件: GestureResponderEvent, 图像: 图像来源) | 虚假 |
delayLongPress | 延迟 ms, 在 LongPress 上出现前叫做: 默认 800 | 编号 | 虚假 |
animationType | 显示的动画模式: 默认 fade | none, (中文(简体) ), fade, (中文(简体) ), slide | 虚假 |
presentationStyle | 模块演示文稿样式: 默认 : fullScreen 机器人: 使用 overFullScreen 隐藏状态栏 | fullScreen, (中文(简体) ), pageSheet, (中文(简体) ), formSheet, (中文(简体) ), overFullScreen | 虚假 |
backgroundColor | HEX 模式的背景颜色 (# 000000EE) | 字符串 | 虚假 |
swipeToCloseEnabled | 关闭上下刷新模式: 默认 true | 布尔 | 虚假 |
doubleTapToZoomEnabled | 用双拍放大图像: 默认 true | 布尔 | 虚假 |
HeaderComponent | 页眉组件, 获取当前 imageIndex 作为道具 | 组件, 函数 | 虚假 |
FooterComponent | 页脚组件, 获取当前 imageIndex 作为道具 | 组件, 函数 | 虚假 |
- 类型 图像来源 = 图像 URI 来源 = 图像需求来源
捐款
要开始复制这个 repo 然后在内部运行 react-native-image-viewing 文件夹 :
yarn
那就进去吧 example 文件夹并运行 :
yarn & yarn start
这将启动 expo 的包装器, 以便您更改 /src/ImageViewing 并查看 expo 示例应用程序的更改.