React Native 中的 Box shadow

2025年1月8日 | 7 分钟阅读

在 React Native 中，应用盒子阴影并不容易。因为开发人员同时为 Android 和 iOS 平台构建，所以使用不同的平台特定的部署流程应用一致的盒子阴影会很繁琐。

在本教程中，我们学习在 Android 和 iOS 平台上 React Native 应用程序中实现盒子阴影。

要在 iOS 设备上创建阴影框，我们必须使用四个不同的 React Native 阴影属性。

第一种是shadowColor，它决定了盒子阴影的颜色。请注意，它是适用于 Android 设备的阴影附件。
第二个属性是shadowOffset，它接受包含数字值长度、宽度和高度的对象

因为它是由相对于应用了盒子阴影的元素的 X 和 Y 偏移量开发的，所以宽度属性将决定阴影的 X 偏移量。相反，高度属性将决定 Y 偏移量。

宽度和高度都支持正值和负值。

让我们使用这些属性在卡片组件上应用一个盒子阴影，代码如下

// when the return statement is   
  <View style={[styles.card, styles.shadowProp]}>
        <View>
          <Text style={styles.heading}>
            React Native Box Shadow (Shadow Props)
          </Text>
        </View>
        <Text>
Using the elevation style prop to apply box-shadow for iOS devices
        </Text>
      </View>

现在，导入 StyleSheet 以在卡片组件上应用样式

// import StyleSheet from react-native
const styles = StyleSheet.create({
  heading: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 13,
  },
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    paddingVertical: 45,
    paddingHorizontal: 25,
    width: '100%',
    marginVertical: 10,
  },
  shadowProp: {
    shadowOffset: {width: -2, height: 4},
    shadowColor: '#171717',
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
});

应用程序通过以下代码中的盒子阴影读取卡片。

为 Android 添加 styles.elevation 属性

使用 Android 的 elevation API，我们必须使用 elevation 小部件将盒子阴影添加到 Android。

只需将盒子阴影应用于卡片组件即可。注意：styles.elevation 属性与应用的 <View> 组件一起使用

// wherever your return statement is
<View style={[styles.card, styles.elevation]}>
        <View>
          <Text style={styles.heading}>
            React Native Box Shadow (Elevation)
          </Text>
        </View>
        <Text>
          By using the elevation style props to apply box-shadow for Android devices
        </Text>
</View>

之后，我们在此处导入 Style Sheet 以设置卡片的样式

// import StyleSheet from react-native
const styles = StyleSheet.create({
  heading: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 13,
  },
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    paddingVertical: 45,
    paddingHorizontal: 25,
    width: '100%',
    marginVertical: 10,
  },
  elevation: {
    shadowColor: '#52006A',
    elevation: 20,
  },
});

通过在 Shadow Color 中设置 elevation 20，我们在 Android 卡片选项上应用盒子阴影。

注意：无法控制盒子的不透明度、半径和阴影偏移量；我们必须控制阴影的颜色。

React Native 跨平台盒子阴影

它涵盖了阴影属性的样式属性，用于在 iOS 和 Android 设备中实现盒子阴影，以取代单独的流程。

现在，让我们创建调用函数 render 盒子阴影，基于用户设备的卡片组件，由 React Native Platform API。

我们从配置卡片开始

<View style={[styles.card, styles.boxShadow]}>
        <View>
          <Text style={styles.heading}>
            React Native cross-platform box shadow
          </Text>
        </View>
        <Text>Using the Platform API to conditionally render box shadow</Text>
</View>

让我们生成一个 generateBoxShadowStyle()，它将根据用户在样式对象中的操作系统应用盒子阴影

const generateBoxShadowStyle = (
  xOffset,
  yOffset,
  shadowColorIos,
  shadowOpacity,
  shadowRadius,
  elevation,
  shadowColorAndroid,
) => {
  if (Platform.OS === 'ios') {
    styles.boxShadow = {
      shadowColor: shadowColorIos,
shadowOpacity,
      shadowRadius,
      shadowOffset: {width: xOffset, height: yOffset},
   
    };
  } else if (Platform.OS === 'android') {
    styles.boxShadow = {   elevation,
      shadowColor: shadowColorAndroid,
    };
  } };

借助代码，我们实现了应用程序检查用户的设备平台并应用了适当的盒子阴影属性。

让我们调用 generateBoxShadowStyle() 并将阴影和属性的值作为参数传递

它呈现以下平台

跨平台盒子阴影限制

当我们控制盒子阴影的偏移、不透明度和模糊半径时，有很多用例。

它可能包括

添加与 Android 和 iOS 平台兼容的自定义盒子阴影设计
将盒子阴影应用于 <flat list> 或 <squeezable> 组件，并在块中应用自定义样式。

在当前的实现中，此处不可能实现设计灵活性。但是，我们可以通过 react-native-drop-shadow 来克服这些限制。

使用 react-native-drop-shadow 应用盒子阴影

react-native-drop-shadow 是一个视图组件，它接受嵌套组件并创建一个位图表示，模糊或着色样式的阴影值，类似于 iOS 输入中的阴影属性。

通过下面给出的命令安装 react-native-drop-shadow 包

yarn add react-native-drop-shadow
#or
npm i react-native-drop-shadow

如果安装完成，同步 Android Gradle 工具包会构建以重新启动开发服务器。

然后，您必须导入该包

您可以使用 <pressable> 组件生成一个自定义按钮，并将其包装到我们导入它的下拉阴影组件中。

请注意 iOS 平台和 Android 平台之间的一致性。

下拉阴影组件是 <pressable> 组件的父组件，它的样式与按钮完全一样。如果我们想将下拉阴影应用于我们的按钮

// wherever your return statement is
// Don't forget to import the Pressable component 
<DropShadow style={styles.shadowProp}>
          <Pressable
            style={styles.button}
            onPress={() => console.log('pressed')}>
            <Text style={(styles.text, styles.buttonText)}>See more</Text>
          </Pressable>
</DropShadow>

将下拉阴影添加到下拉阴影组件，使 <pressable> 组件看起来完全像一个按钮，该按钮来自下面给出的样式表

const styles =StyleSheet.create({
shadowProp:{
shadowOffset:{width:0, height:3},
shadowColor:'#171717',
    shadowOpacity:0.4,
    shadowRadius:2,
},
  button:{
    backgroundColor:'#4830D3',

    justifyContent:'center',
alignItems:'center',
    height:42,
    borderRadius:4,
    marginTop:30,
},
  buttonText:{
    color:'#fff',
},
  text:{
    fontSize:16,
        fontWeight:'bold',
lineHeight:21,
    letterSpacing:0.25,
},
});

使用 React-Native-shadow-2

react-native-shadow-2 包是 react-native-shadow 的更新版本，它声明功能、类型和支持，并且从头开始编写以最大限度地减少性能影响依赖项。

与使用 react-native-drop-shadow 的下拉阴影实现不同的是，它会创建子组件的位图表示；react-native-shadow-2 用于在 Android 上持久实现，并使用插件 react-Native-SVG 的 iOS 平台阴影。

npm i react-native-SVG react-native-shadow-2
or 
yarn add react-native-SVG react-native-shadow-2

为了确保在 iOS 上运行，请将 iOS 目录复制并运行 pod install 以同步我们安装的包

// import the package right at the top
import {Shadow} from 'react-native-shadow-2';

// wherever your return statement is
<Shadow
        distance={5}
        startColor={'#00000010'}
        containerViewStyle={{marginVertical: 20}}
        radius={8}>
        <View style={[styles.card, {marginVertical: 0}]}>
          <View>
            <Text style={styles.heading}>
              React Native cross-platform box shadow
            </Text>
          </View>
          <Text style={styles.boxShadow}>
            Using the Platform API to conditionally render box shadow
          </Text>
          <DropShadow style={styles.shadowProp}>
            <Pressable
              style={styles.button}
              onPress={() => console.log('pressed')}>
              <Text style={(styles.text, styles.buttonText)}>See more</Text>
            </Pressable>
          </DropShadow>
        </View>
      </Shadow>

代码生成以下给定的输出

阴影属性

通过使用 react-native 文档中推荐的阴影属性。

shadowColor：它设置下拉阴影颜色。
shadowOffset：它设置下拉阴影偏移量。
shadowOpacity：它设置下拉阴影的不透明度（乘以颜色 alpha 分量）。
阴影半径：它设置模糊半径中的下拉阴影。

如果使用样式组件，则使用 React Native 的阴影属性存在一个问题：阴影设置在元素之上，并且无法移动。

这是一个没有任何解决方案的问题，因此您必须使用以下代码

盒子阴影

通过使用 CSS 盒子阴影属性

插入：如果未指定（默认），则阴影将作为下拉阴影提及（例如，悬停在盒子内容上）。
Offset-x，offset-y：它指定垂直和水平距离。
模糊半径 - 值越大，模糊越大，阴影越亮，半径越好。
扩散半径：正值会扩展和扩大阴影，负值会缩小阴影。
颜色：如果未指定，则使用的颜色框取决于浏览器。

如何在 Android 平台上应用阴影

在 Android 上，我们可以使用 react-native 的高度样式属性来添加阴影。

升级：它通过使用 Android 的内置升级 API 来设置场景的升级。它添加了一个下拉阴影来影响重叠场景的 z 顺序。

没有其他属性可以自定义阴影的外观。

Android 上圆形按钮的阴影非常柔和，但很难欣赏，但如果我们把按钮变得很大，那么高度属性的确切值看起来非常好。

其他多平台替代方案

react-native-shadow 可以像 iOS 一样管理 Android 阴影，但由于某些用户意见，其性能很差。阴影不适用于 Android 中的 React Native。视图获取子项，创建位图表示，对其进行模糊处理，并像 iOS 中的阴影值一样为其着色。

安装

局限性

Android 的位图限制为 2048x2048，但它取决于 API 版本。

如果阴影和动画持续渲染，它使用位图渲染来模拟性能中的重阴影。

用途

import DropShadow from "react-native-drop-shadow";  
export default function usage() {  
  return (  
    <DropShadow  
      style={{  
        shadowColor: "#000",  
        shadowOffset: {  
          width: 0,  
          height: 0,  
        },  
        shadowOpacity: 1,  
        shadowRadius: 5,  
      }}  
    >  
      ...  
    </DropShadow>  
  );  
}  

与 FlatList 一起使用

export default function withFlatList() {  
  return (  
    <FlatList  
      data={[""]}  
      keyExtractor={(item, index) => "List-" + index}  
      CellRendererComponent={DropShadow} // <==== add line  
      renderItem={({ item, index }) => (  
        <DropShadow  
          style={{  
            shadowColor: "#000",  
            shadowOffset: {  
              width: 0,  
              height: 0,  
            },  
            shadowOpacity: 1,  
            shadowRadius: 5,  
          }}  
        >  
          ...  
        </DropShadow>  
      )}  
    />  
  );  
}  

与动画视图一起使用

我们使用 animated.createAnimatedComponent 来创建下拉阴影的任何可动画版本，以使工作而不是动画视图。

例如

const AnimatedDropShadow = Animated.createAnimatedComponent(DropShadow);  
  
export default function withAnimatedViews() {  
  return (  
    <AnimatedDropShadow  
      style={{  
        shadowColor: "#000",  
        shadowOffset: {  
          width: 0,  
          height: 0,  
        },  
        shadowOpacity: 1,  
        shadowRadius: 5,  
      }}  
    >  
      ...  
    </AnimatedDropShadow>  
  );  
}  

我们使用 AnimatedDropShadow 代替 Animated 视图。

结论

它不会在 Android 应用程序中使用。这是 React Native 中阴影属性的一个大问题。

我们通过使用 react-native-drop-shadow 和 react-native-shadow-2 在 Android 或 iOS 平台上实现 React Native 应用程序中的持久盒子阴影。

下一个主题React Native IAP

← 上一个下一个 →

React Native 中的 Box shadow

为 Android 添加 styles.elevation 属性

注意：无法控制盒子的不透明度、半径和阴影偏移量；我们必须控制阴影的颜色。

React Native 跨平台盒子阴影

跨平台盒子阴影限制

使用 react-native-drop-shadow 应用盒子阴影

请注意 iOS 平台和 Android 平台之间的一致性。

使用 React-Native-shadow-2

阴影属性

盒子阴影

如何在 Android 平台上应用阴影

其他多平台替代方案

安装

局限性

用途

与 FlatList 一起使用

与动画视图一起使用

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native 中的 Box shadow

为 Android 添加 styles.elevation 属性

注意：无法控制盒子的不透明度、半径和阴影偏移量；我们必须控制阴影的颜色。

React Native 跨平台盒子阴影

跨平台盒子阴影限制

使用 react-native-drop-shadow 应用盒子阴影

请注意 iOS 平台和 Android 平台之间的一致性。

使用 React-Native-shadow-2

阴影属性

盒子阴影

如何在 Android 平台上应用阴影

其他多平台替代方案

安装

局限性

用途

与 FlatList 一起使用

与动画视图一起使用

结论

相关帖子

React Native 启动画面

React Native Sound

React-Native 本地化

React Native Toast

React Native vs Swift

React Native Vector Icons

React Native vs. Xamarin

React Native vs Flutter

React Native vs React

React Native IAP

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器