React Native 图片查看组件的方法

React Native 图片查看组件的方法

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

效果图

安装方法

npm i react-native-image-zoom-viewer --save

使用示例

const imageswnxbq = [

{

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 (

imageUrls={images}

failImageSource={{

url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',

width: Dimensions.get('window').width,

height: Dimensions.get('window').width,

}}

/>

);

}

}

主要参数说明

imageUrls 图片url地址的数组

enableImageZoom 是否允许缩放

failImageSouhttp://rce 加载失败时显示的图片

loadingRender 加载loading

renderHeader 头部样式

renderFooter 底部样式

renderIndicator 页码指示器样式

完整示例

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

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

imageUrls={images}

failImageSource={{

url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',

width: Dimensions.get('window').width,

height: Dimensions.get('window').width,

}}

/>

);

}

}

主要参数说明

imageUrls 图片url地址的数组

enableImageZoom 是否允许缩放

failImageSouhttp://rce 加载失败时显示的图片

loadingRender 加载loading

renderHeader 头部样式

renderFooter 底部样式

renderIndicator 页码指示器样式

完整示例

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。