使用React中的Native实现图片查看组件

亚连
Lepaskan: 2018-06-02 11:11:50
asal
2220 orang telah melayarinya

这篇文章主要介绍了React Native 图片查看组件的方法,现在分享给大家,也给大家做个参考。

React Native 图片查看组件:react-native-image-viewer,纯JS组件,小巧快速的图标查看组件。支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能。

效果图

安装方法

npm i react-native-image-zoom-viewer --save
Salin selepas log masuk

使用示例

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

export default class Component06 extends Component {
 constructor(props) {
  super(props);
 }

 render() {
  return (
   <View style={{ flex: 1 }}>
    <ImageViewer
     imageUrls={images}
     failImageSource={{
      url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
      width: Dimensions.get(&#39;window&#39;).width,
      height: Dimensions.get(&#39;window&#39;).width,
     }}
    />
   </View>
  );
 }
}
Salin selepas log masuk

主要参数说明

  1. imageUrls 图片url地址的数组

  2. enableImageZoom 是否允许缩放

  3. failImageSource 加载失败时显示的图片

  4. loadingRender 加载loading

  5. renderHeader 头部样式

  6. renderFooter 底部样式

  7. renderIndicator 页码指示器样式

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

vue与vue-i18n结合实现后台数据的多语言切换方法

JQuery选中select组件被选中的值方法

vue.js中$set与数组更新方法_vue.js

Atas ialah kandungan terperinci 使用React中的Native实现图片查看组件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan