React Native 点击图片变大，查看图片

在React Native中，可以使用TouchableWithoutFeedback组件来响应图片的点击事件，并使用Animated组件来实现图片放大的动画效果。以下是一个简单的示例代码：

import React, { useState } from 'react';
import {
  Image,
  Animated,
  TouchableWithoutFeedback,
  StyleSheet,
  View,
} from 'react-native';
 
const ImageViewer = ({ imageUrl }) => {
  const [scale] = useState(new Animated.Value(1));
 
  const handlePress = () => {
    Animated.spring(scale, {
      toValue: 3,
      useNativeDriver: true,
    }).start();
  };
 
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={handlePress}>
        <Animated.Image
          style={[styles.image, { transform: [{ scale: scale }] }]}
          source={{ uri: imageUrl }}
        />
      </TouchableWithoutFeedback>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 300,
    height: 200,
    resizeMode: 'contain',
  },
});
 
export default ImageViewer;

在这个示例中，我们创建了一个名为ImageViewer的组件，它接收一个名为imageUrl的属性，该属性包含图片资源的URL。组件内部，我们使用了useState钩子来初始化一个Animated.Value，它将用于控制图片的缩放。

handlePress函数会在图片被点击时调用，使用Animated.spring来执行图片缩放的动画。动画结束后，图片会放大3倍原大小。

使用此组件时，只需传入图片的URL即可：

<ImageViewer imageUrl="http://example.com/image.jpg" />

确保你的应用有足够的权限去加载远程图片，如果是在开发环境中，你可能还需要在android/app/src/main/AndroidManifest.xml文件中添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />