react-native android 上面的阴影问题

image.png

style={[
          t.absolute,
          // t.bgWhite,
          t.bottom0,
          t.wFull,
          t.shadowMd,
          t.roundedTLg,
          {
            height: itemHeight,
          }
        ]}

android上必须设置shadowColor以及elevation，最终代码：

 const androidStyle: StyleProp<ViewStyle> = {
    // To round image corners
    shadowColor: "grey",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.6,
    shadowRadius: 2,
    elevation: 4,
    paddingTop: 8,
  };

<View
        style={[
          t.absolute,
          // t.bgWhite,
          t.bottom0,
          t.wFull,
          t.shadowMd,
          t.roundedTLg,
          {
            height: itemHeight,
          },
          isAndroid() && { ...androidStyle },
        ]}
      >

image.png
下面这个库我用起来也不错，react-native-shadow-2,比如我自定义bottom-sheet的handle效果：
image.png
效果基本能一致，用起来也超级简单：

// SheetHandle.tsx

import React, { FC } from "react";
import { StyleSheet, View } from "react-native";
import { Shadow } from "react-native-shadow-2";
import { color } from "react-native-tailwindcss";
import { isAndroid } from "../../utils/screen";

const RADIUS = 28;

const SheetHandle: FC = () => {
  return (
    <Shadow
      sides={["top"]}
      corners={["topLeft", "topRight"]}
      radius={RADIUS}
      startColor={
        isAndroid() ? "rgba(227, 229, 235, 0.5)" : "rgba(227, 229, 235, 0.05)"
      }
      viewStyle={styles.shadowContainer}
      distance={10}
    >
      <View style={styles.handleContainer}>
        <View style={styles.handle} />
      </View>
    </Shadow>
  );
};

const styles = StyleSheet.create({
  shadowContainer: {
    width: "100%",
  },
  handleContainer: {
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 12,
    borderTopLeftRadius: RADIUS,
    borderTopRightRadius: RADIUS,
  },
  handle: {
    width: 30,
    height: 4,
    backgroundColor: "gray",
    borderRadius: 4,
  },
});

export default SheetHandle;