React Native 插入阴影效果

使用React Native为移动应用程序添加阴影效果是一种常见的需求。阴影效果可以提供更加真实和立体的界面体验，使应用程序的元素在屏幕上更加突出和有深度感。在本文中，我们将探讨如何在React Native中实现插入阴影效果的方法，并提供一个案例代码来演示。

javascript
import React from 'react';
import { View, StyleSheet } from 'react-native';
const App = () => {
  return (
    
      
    
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'white',
    elevation: 5, // 设置阴影深度
  },
});
export default App;

javascript
import React from 'react';
import { View, StyleSheet } from 'react-native';
const App = () => {
  return (
    
      
    
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'white',
    shadowColor: 'black', // 阴影颜色
    shadowOffset: { width: 0, height: 2 }, // 阴影偏移量
    shadowOpacity: 0.3, // 阴影透明度
    shadowRadius: 5, // 阴影半径
  },
});
export default App;