React Native 图片查看组件的方法

前端之家收集整理的这篇文章主要介绍了React Native 图片查看组件的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

效果

安装方法

使用示例

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

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

); } }

主要参数说明

  1. imageUrls 图片URL地址的数组
  2. enableImageZoom 是否允许缩放
  3. failImageSource 加载失败时显示图片
  4. loadingRender 加载loading
  5. renderHeader 头部样式
  6. renderFooter 底部样式
  7. renderIndicator 页码指示器样式

完整示例

完整代码https://github.com/forrest23/ReactNativeComponents 本次示例代码在 Component06文件夹中。

组件地址:https://github.com/ascoders/react-native-image-viewer

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/33458.html

猜你在找的JavaScript相关文章