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 = {
    // To round image corners
    shadowColor: "grey",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.6,
    shadowRadius: 2,
    elevation: 4,
    paddingTop: 8,
  };

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 (
    
      
        
      
    
  );
};

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;