React Native 图片缩放组件：让交互体验更上一层楼

import React, { useState } from 'react';
import { View, Image, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
 
const ImageZoom = ({ image }) => {
  const [isZoomed, setIsZoomed] = useState(false);
 
  const toggleZoom = () => {
    setIsZoomed(!isZoomed);
  };
 
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={toggleZoom}>
        <Image style={isZoomed ? styles.zoomedImage : styles.image} source={{ uri: image }} />
      </TouchableOpacity>
      {isZoomed && (
        <View style={styles.zoomControls}>
          <Icon name="zoom-out" size={30} color="white" onPress={toggleZoom} />
        </View>
      )}
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 300,
    height: 200,
    resizeMode: 'contain',
  },
  zoomedImage: {
    width: '100%',
    height: '100%',
    resizeMode: 'contain',
  },
  zoomControls: {
    position: 'absolute',
    bottom: 20,
    right: 20,
    zIndex: 100,
  },
});
 
export default ImageZoom;

这个代码示例展示了如何在React Native应用中创建一个图片缩放组件。它使用了TouchableOpacity来包裹Image组件，并允许用户点击图片进行缩放。同时，它还包括了一个简单的缩放控制按钮，允许用户返回正常大小的视图。这个示例简洁明了，并且使用了React Hooks来管理组件状态，这是React Native中推荐的做法。