探索React Native的光影艺术：阴影生成器

import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
 
export default function ShadowGenerator() {
  const [shadow, setShadow] = useState('');
 
  const handleShadow = (e) => {
    const x = e.nativeEvent.pageX - e.target.offsetLeft;
    const y = e.nativeEvent.pageY - e.target.offsetTop;
    const offsetX = x - e.target.clientWidth / 2;
    const offsetY = y - e.target.clientHeight / 2;
    const blurRadius = Math.max(Math.abs(offsetX), Math.abs(offsetY));
    const shadowValue = `${offsetX}px ${offsetY}px ${blurRadius}px rgba(0, 0, 0, 0.5)`;
    setShadow(shadowValue);
  };
 
  return (
    <View style={styles.container}>
      <View
        style={[styles.box, { boxShadow: shadow }]}
        onTouchMove={handleShadow}
      />
      <Text style={styles.text}>移动设备以生成阴影</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'white',
    borderRadius: 10,
  },
  text: {
    textAlign: 'center',
    marginTop: 10,
  },
});

这段代码使用React Native创建了一个简单的应用，用于根据用户在屏幕上的触摸位置生成阴影。通过计算触摸点相对于视图中心的偏移，并用这个偏移量和偏移量的绝对值来设定模糊半径，从而生成阴影。用户移动设备时，阴影随之变化，为设计师提供了一种创造性的工具。