在React Native中应用盒状阴影

在React Native应用中应用盒状阴影并不总是简单的。因为开发者必须同时为Android和iOS平台构建，用不同平台的特定实现过程来应用一致的盒式阴影可能会很繁琐。

在这篇文章中，我们将学习如何在React Native应用中实现跨Android和iOS平台的盒状阴影。

使用React Native的阴影道具实现iOS的盒子阴影

要为iOS设备创建阴影盒，我们可以使用四个React Native阴影道具。

第一个是shadowColor ，它决定了盒子阴影的颜色。请注意，这是唯一适用于Android设备的阴影道具。

第二个道具，shadowOffset ，接受包含宽度和高度属性的数值的对象。

{ width: number; height: number}

复制代码

因为它是通过相对于盒子阴影所应用的元素的X和Y偏移量来描述的，width 属性决定了阴影的X偏移量，而height 属性决定了Y偏移量。

宽度和高度道具都可以接受正值和负值。

第三个道具是shadowOpacity ，它设置了盒子阴影的透明度。该道具的值范围从0 到1 ，其中0 代表完全透明，1 代表完全不透明。

第四个道具是shadowRadius ，它接受一个数字作为它的值来设置组件的模糊半径。数值越大，模糊度越大，标志着阴影越大、越轻。这个道具不接受负值。

让我们使用这些道具，用下面的方法在卡片组件上应用一个盒状阴影。

// wherever your 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 ，给卡片组件应用多种样式。

// remember to 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: {
    shadowColor: '#171717',
    shadowOffset: {width: -2, height: 4},
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
});

复制代码

添加了代码后，应用程序渲染了一个带有盒子阴影的卡片。

为Android添加styles.elevation 道具

对于在安卓系统中添加盒状阴影，我们可以使用升降道具，它使用 安卓的升降API。

为了学习如何用这个方法来使用盒状阴影，让我们把盒状阴影应用到一个卡片组件上。注意，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>
          Using the elevation style prop to apply box-shadow for Android devices
        </Text>
</View>

复制代码

接下来，再次导入StyleSheet ，对卡片进行样式设置。

// remember to 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: {
    elevation: 20,
    shadowColor: '#52006A',
  },
});

复制代码

通过将海拔高度设置为20 ，再加上一个shadowColor ，我们就可以给我们的Android卡片组件应用一个盒状阴影。

请注意，我们无法控制盒状阴影的模糊半径、不透明度和偏移量；我们只能控制阴影的颜色。

React Native跨平台盒式阴影

在这一节中，我们将结合立面样式道具和阴影道具来实现Android和iOS设备的盒状阴影，而不是使用两个独立的过程。

使用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,
      shadowOffset: {width: xOffset, height: yOffset},
      shadowOpacity,
      shadowRadius,
    };
  } else if (Platform.OS === 'android') {
    styles.boxShadow = {
      elevation,
      shadowColor: shadowColorAndroid,
    };
  }
};

复制代码

有了我们刚刚实现的代码，我们的应用程序现在可以检查用户的设备平台，并应用适当的框影道具。

现在让我们调用generateBoxShadowStyle 函数，并将我们的阴影和高度道具的值作为参数传入。

generateBoxShadowStyle(-2, 4, '#171717', 0.2, 3, 4, '#171717');

复制代码

然后它将以下内容渲染到两个平台。

为了简化我们的工作流程，使用React Native Shadow Generator工具来生成盒子阴影的代码，并在Android和iOS上看到盒子阴影的预览。

跨平台盒式阴影的限制

虽然我们应用了一个标准的盒状阴影，但在有些用例中，我们可能需要完全控制盒状阴影的偏移、不透明度和模糊半径。这可能包括。

• 将盒式阴影应用于 [<FlatList>](https://reactnative.dev/docs/flatlist)或 [<Pressable>](https://reactnative.dev/docs/pressable)组件应用盒状阴影的自定义样式
• 添加一个在Andriod和iOS平台上一致的自定义盒子阴影设计

在目前的实现中，这种设计灵活性是不可能的。然而，我们可以通过以下方式克服这些限制 [react-native-drop-shadow](https://www.npmjs.com/package/react-native-drop-shadow).

应用盒状阴影与react-native-drop-shadow

react-native-drop-shadow 包是一个View 组件，它取其嵌套组件，创建一个位图表示，然后根据样式的阴影值进行模糊和着色，类似于在iOS中用阴影道具应用阴影。

要开始使用，请使用以下命令之一安装react-native-drop-shadow 包。

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

复制代码

一旦安装完成，重新同步Android Gradle构建工具包或重启开发服务器。

接下来，我们可以导入该包。

import DropShadow from "react-native-drop-shadow";

复制代码

现在，让我们使用<Pressable> 组件创建一个自定义按钮，并用我们刚刚导入的DropShadow 组件将其包裹起来。

下面截图中的按钮上的盒状阴影就是我们想要创建的。注意在Android和iOS平台上的一致性。

DropShadow 组件是我们的<Pressable> 组件的父组件，我们把它样式化为一个按钮的样子。我们希望它按这个顺序排列，因为我们想把下拉阴影应用到我们的按钮上，而不是按钮中的文本。

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

复制代码

为了使我们的<Pressable> 组件看起来像一个按钮，并为DropShadow 组件添加下拉阴影，添加以下样式表。

const styles = StyleSheet.create({
shadowProp: {
    shadowColor: '#171717',
    shadowOffset: {width: 0, height: 3},
    shadowOpacity: 0.4,
    shadowRadius: 2,
  },
  button: {
    backgroundColor: '#4830D3',
    alignItems: 'center',
    justifyContent: 'center',
    height: 42,
    borderRadius: 4,
    marginTop: 30,
  },
  buttonText: {
    color: '#fff',
  },
  text: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
  },
});

复制代码

使用react-native-shadow-2

该 [react-native-shadow-2](https://github.com/SrBrahma/react-native-shadow-2)包是一个改进版的 [react-native-shadow](https://github.com/879479119/react-native-shadow)的改进版，提供了更多的功能，支持Typescript，并从头开始编写，以减少影响性能的依赖性。

不像用react-native-drop-shadow ，它为它的子组件创建一个位图表示，react-native-shadow-2 使用react-native-svg阴影插件，在Android和iOS平台上实现一致。

要想开始，在项目目录根部安装这两个包。

yarn add react-native-svg react-native-shadow-2
#or 
npm i react-native-svg react-native-shadow-2

复制代码

为了确保在iOS上运行，CD进入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中影子道具的主要问题是，它们不能在Android应用程序中使用。

然而，通过使用react-native-drop-shadow 和react-native-shadow-2 ，我们可以很容易地在Android和iOS平台的React Native应用中实现一致的盒状阴影。

本教程中使用的完整代码可以在GitHub上找到。欢迎发表评论，让我知道你对这篇文章的看法。你也可以在Twitter和GitHub上找到我。谢谢你的阅读!

The postApplying box shadows in React Nativeappeared first onLogRocket Blog.