React-Native封装带阴影的Card组件

全局安装 react-native-create-library 命令工具，用于创建自定义组件模板。

npm install -g react-native-create-library

通过该命令工具我们创建一个组件项目，并指定平台为 android 和 ios ,指定 android 中的 package

react-native-create-library --package-identifier com.zhangyu.card --platforms android,ios card

将项目重命名为 react-native-zy-card 方便上传到 npm 库

mv card react-native-zy-card

可看到当前目录结构为

.
└── react-native-zy-card
    ├── README.md
    ├── android
    │   ├── build.gradle
    │   └── src
    │       └── main
    │           ├── AndroidManifest.xml
    │           └── java
    │               └── com
    │                   └── zhangyu
    │                       └── card
    │                           ├── RNCardModule.java
    │                           └── RNCardPackage.java
    ├── index.js
    ├── ios
    │   ├── RNCard.h
    │   ├── RNCard.m
    │   ├── RNCard.podspec
    │   ├── RNCard.xcodeproj
    │   │   └── project.pbxproj
    │   └── RNCard.xcworkspace
    │       └── contents.xcworkspacedata
    └── package.json

这里主要编写 android 部分的代码，因为只有安卓端比较特殊，RN设置的阴影颜色，阴影透明度，阴影偏移量在安卓端是无法生效的，只有在 ios 端才生效。所以我们需要桥接Android原生来实现自定义阴影的效果。

Android

用 Android Studio 打开 android 项目目录，会看到有 RNCardModule.java 和 RNCardPackage.java 两个文件

其中 RNCardModule.java 通过 getName 方法来定义模块名称

package com.zhangyu.card;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

public class RNCardModule extends ReactContextBaseJavaModule {

  private final ReactApplicationContext reactContext;

  public RNCardModule(ReactApplicationContext reactContext) {
    super(reactContext);
    this.reactContext = reactContext;
  }

  @Override
  public String getName() {
    return "RNCard";
  }
}

然后我们新建一个 RNCardManager.java 视图管理类，用于实现原生效果。

其中原生实现用到了一个非常强大的原生组件库 ShadowLayout 所以我们需要在 build.gradle 中引入

dependencies {
    compile 'com.facebook.react:react-native:+'
    compile 'com.github.lihangleo2:ShadowLayout:3.1.8'
}

然后实现原生样式

package com.zhangyu.card;

import android.graphics.Color;

import com.lihang.ShadowLayout;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.views.view.ReactViewGroup;
import com.facebook.react.uimanager.PixelUtil;
import com.facebook.react.uimanager.annotations.ReactProp;

public class RNCardManager extends ViewGroupManager<ShadowLayout> {

    @Override
    public String getName() {
        return "RNCard";
    }

    @Override
    public ShadowLayout createViewInstance(ThemedReactContext reactContext) {
        ShadowLayout cardView = new ShadowLayout(reactContext);
        cardView.setShadowHidden(false);
        ReactViewGroup reactViewGroup = new ReactViewGroup(reactContext);
        cardView.addView(reactViewGroup);
        return cardView;
    }

    // 设置卡片的圆角
    @ReactProp(name = "borderRadius", defaultInt = 0)
    public void setCornerRadius(ShadowLayout view, int borderRadius) {
        view.setCornerRadius(borderRadius);
    }

    // 设置阴影颜色
    @ReactProp(name = "borderShadowColor")
    public void setShadowColor(ShadowLayout view, String borderShadowColor){
        view.setShadowColor(Color.parseColor(borderShadowColor));
    }

    // 设置卡片颜色
    @ReactProp(name = "backgroundColor")
    public void setLayoutBackground(ShadowLayout view, String backgroundColor){
        view.setLayoutBackground(Color.parseColor(backgroundColor));
    }

    // 设置是否隐藏阴影
    @ReactProp(name = "shadowHidden")
    public void setShadowHidden(ShadowLayout view,boolean isHidden){
        view.setShadowHidden(isHidden);
    }

    // 设置阴影扩散区域
    @ReactProp(name = "shadowLimit",defaultInt = 0)
    public void setShadowLimit(ShadowLayout view,int limit){
        view.setShadowLimit(limit);
    }

    // 设置X轴偏移量
    @ReactProp(name = "shadowOffsetX",defaultFloat = 0)
    public void setShadowOffsetX(ShadowLayout view,float mDx){
        view.setShadowOffsetX(mDx);
    }

    // 设置Y轴偏移量
    @ReactProp(name = "shadowOffsetY",defaultFloat = 0)
    public void setShadowOffsetY(ShadowLayout view,float mDx){
        view.setShadowOffsetY(mDx);
    }

    // 设置是否隐藏上边阴影
    @ReactProp(name = "shadowHiddenTop")
    public void setShadowHiddenTop(ShadowLayout view,boolean isHidden){
        view.setShadowHiddenTop(isHidden);
    }

    // 设置是否隐藏右边阴影
    @ReactProp(name = "shadowHiddenRight")
    public void setShadowHiddenRight(ShadowLayout view,boolean isHidden){
        view.setShadowHiddenRight(isHidden);
    }

    // 设置是否隐藏下边阴影
    @ReactProp(name = "shadowHiddenBottom")
    public void setShadowHiddenBottom(ShadowLayout view,boolean isHidden){
        view.setShadowHiddenBottom(isHidden);
    }

    // 设置是否隐藏左边阴影
    @ReactProp(name = "shadowHiddenLeft")
    public void setShadowHiddenLeft(ShadowLayout view,boolean isHidden){
        view.setShadowHiddenLeft(isHidden);
    }
}

在 RNCardPackage.java 中注册刚才实现的 RNCardManager.java 视图管理类

package com.zhangyu.card;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.facebook.react.bridge.JavaScriptModule;
public class RNCardPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      return Arrays.<NativeModule>asList(new RNCardModule(reactContext));
    }

    // Deprecated from RN 0.47
    public List<Class<? extends JavaScriptModule>> createJSModules() {
      return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Arrays.<ViewManager>asList(new RNCardManager());//修改这里
    }
}

编辑 index.js 文件，实现一个桥接组件，提供给RN调用

import React from 'react';

import {requireNativeComponent,Platform,View} from 'react-native';

// 桥接Android暴露出来的RNCard
const RNCard = requireNativeComponent('RNCard');

class CardView extends React.Component {
  // 默认参数
  static defaultProps = {
    shadowHidden: true, // 隐藏阴影
    borderRadius: 0, // 边框圆角
    borderShadowColor: '#000000', // 阴影颜色
    backgroundColor: '#ffffff', // 背景颜色
    shadowLimit: 0, // 阴影扩散区域
    shadowOffsetX: 0, // 阴影的X轴偏移量
    shadowOffsetY: 0, // 阴影的Y轴偏移量
    shadowHiddenTop: false, // 隐藏上边阴影
    shadowHiddenRight: false, // 隐藏右边阴影
    shadowHiddenBottom: false, // 隐藏下边阴影
    shadowHiddenLeft: false // 隐藏左边阴影
  }
  render() {
    return Platform.OS === 'android' ? <RNCard {...this.props}>{this.props.children}</RNCard> : 
    <View style={this.props.style}>{this.props.children}</View>;
  }
}

export default CardView;

为了方便测试，可以将你的组件整体拷贝到RN项目的 node_modules 目录下

image.png

package.json 中手动引入

image.png

如果测试没有问题的话，再上传到 npm ，以后就可以通过命令来安装组件了

yarn add react-native-zy-card

使用示例

import React from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';
import CardView from 'react-native-zy-card';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.content}>
        <CardView style={styles.iosStyle} shadowHidden={false}>
          <Text>123</Text>
        </CardView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  iosStyle: {
    width: 100,
    height: 100,
    marginTop: 10,
    backgroundColor: '#fff',
    shadowColor: 'rgba(0,0,0,.03)',
    elevation: 10,
    borderRadius: 10,
    shadowOpacity: 0.03,
    shadowOffset: {
      width: 0,
      height: 0,
    },
    borderColor: 'red',
    borderWidth: 1,
  },
});

ios 的样式内容正常写到 style 中, android 的样式单独指定，主要有以下属性可设置

属性	默认值	说明
shadowHidden	true	是否隐藏阴影，默认隐藏
borderRadius	0	边框圆角
borderShadowColor	#000000	阴影颜色，可指定透明度如#00000070就是70%
backgroundColor	#ffffff	背景颜色
shadowLimit	0	阴影扩散区域
shadowOffsetX	0	阴影的X轴偏移量
shadowOffsetY	0	阴影的Y轴偏移量
shadowHiddenTop	false	隐藏上边阴影
shadowHiddenRight	false	隐藏右边阴影
shadowHiddenBottom	false	隐藏下边阴影
shadowHiddenLeft	false	隐藏左边阴影