一:项目结构
二:关键代码Webview html方式实现图片缩放
render() { //图片url const imgUrl = 'http://rsshb-com.oss-cn-shenzhen.aliyuncs.com/47657A34041B4BB29AA13DE397C29B3B.JPG_400x400'; //WebView html const html = `<img src="${imgUrl}" style="width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"/>`; return ( <View style={styles.container}> <WebView source={{ html: html, baseUrl: '' }}/> </View> ); }
三:完整代码WebViewZoom.js
import React, {Component} from 'react'; import {StyleSheet, View, WebView} from 'react-native'; type Props = {}; export default class WebViewZoom extends Component<Props> { render() { //图片url const imgUrl = 'http://rsshb-com.oss-cn-shenzhen.aliyuncs.com/47657A34041B4BB29AA13DE397C29B3B.JPG_400x400'; //WebView html const html = `<img src="${imgUrl}" style="width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"/>`; return ( <View style={styles.container}> <WebView source={{ html: html, baseUrl: '' }}/> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, });