React Native中View组件阴影效果异常问题求助

在iPhone设备上开发React Native应用时，给按钮和输入框组件添加阴影效果显示正常，但给View组件应用相同阴影样式时出现异常。

阴影样式代码 #

export const globalSheet = StyleSheet.create({
  shadowBox: {
    shadowColor: '#000',
    shadowOffset: { width: 4, height: 4 },
    shadowOpacity: 1,
    shadowRadius: 0,
    elevation: 2,  // for Android
    borderWidth: 2,
    borderColor: 'black'
  }
});

正常工作的按钮组件代码 #

export const GenericButtonContainer = styled.Pressable<
  GenericButtonProps
>`
  background-color: ${p => {
      const mainColor = p.pressed
        ? globalStyles.purple
        : globalStyles.button.backgroundColor

      return p.unavailabe
        ? '#75757B'
        : mainColor
    }
  };
  
  border-radius: ${globalStyles.borderRadius}px;
  align-items: center;
  justify-content: center;

  padding-left: ${globalStyles.button.paddingHorizontal}px;
  padding-right: ${globalStyles.button.paddingHorizontal}px;
  padding-top: ${globalStyles.button.paddingVertical}px;
  padding-bottom: ${globalStyles.button.paddingVertical}px;

  opacity: ${p => p.unavailabe ? 0.4 : 1};

  border: 2px solid black;
`

export default function GenericButton({ children, unavailabe, style, ...pressableProps }: Props) {
  const [pressed, setPressed] = React.useState(false);

  return (
    <GenericButtonContainer
      {...pressableProps}
      style={({ pressed }: PressableStateCallbackType) => [
        globalSheet.shadowBox,
        ...[(typeof style === 'function' ? style({ pressed }) : style)],
      ]}
      disabled={unavailabe}
      unavailabe={unavailabe}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
      pressed={pressed}
    >
      {children}
    </GenericButtonContainer>
  )
}

出现异常的View组件代码 #

import { globalStyles } from "src/components/globals/styles";
import { styled } from "styled-components/native";

export const Container = styled.View`
  flex-grow: 1;
`

export const ContentContainer = styled.View`
  flex-direction: row;
  align-items: center;
  padding: 5px;
  border: 2px solid black;
  border-radius: ${globalStyles.borderRadius}px;
`

export default function ProfileMatches() {
  return (
    <Container>
      <MyText H4>Partidas</MyText>
      <ContentContainer style={globalSheet.shadowBox}>
        <Controller />
        <MyText>0</MyText>
      </ContentContainer>
    </Container>
  )
}

关联的MyText组件代码 #

export default function MyText({
  H1: useH1,
  H2: useH2,
  H3: useH3,
  H4: useH4,
  HP: useHP,
  truncate: shouldTruncate,
  size,
  children,
  ...props
}: Props) {
  const truncateSize = size ? size : 13

  const data = truncate
    ? truncate(children as string, truncateSize)
    : children

  if (useH1) return <H1 {...props}>{data}</H1>

  if (useH2) return <H2 {...props}>{data}</H2>

  if (useH3) return <H3 {...props}>{data}</H3>

  if (useH4) return <H4 {...props}>{data}</H4>

  if (useHP) return <HP {...props}>{data}</HP>

  return <Text {...props}>{data}</Text>
}

注：每个HX都是经过样式处理的Text组件，即使使用无样式的基础Text组件，问题依然存在。

问题原因及解决方案 #

核心原因 #

1. iOS平台下，React Native的阴影渲染依赖组件的backgroundColor属性。如果View组件未设置背景色，阴影会出现显示不全、形状怪异等异常；而按钮组件因明确设置了backgroundColor，所以阴影正常。
2. ContentContainer的styled样式已定义边框，同时shadowBox中也重复设置了borderWidth和borderColor，导致边框样式叠加，进一步干扰阴影渲染。

解决方案 #

1. 给View组件添加背景色
   修改ContentContainer的styled样式，添加符合设计需求的背景色：

   export const ContentContainer = styled.View`
     flex-direction: row;
     align-items: center;
     padding: 5px;
     border: 2px solid black;
     border-radius: ${globalStyles.borderRadius}px;
     background-color: #fff; /* 添加背景色 */
   `
   

2. 移除重复的边框样式
   删除shadowBox中的边框定义，避免样式冲突：

   export const globalSheet = StyleSheet.create({
     shadowBox: {
       shadowColor: '#000',
       shadowOffset: { width: 4, height: 4 },
       shadowOpacity: 1,
       shadowRadius: 0,
       elevation: 2,  // for Android
       // 移除borderWidth和borderColor
     }
   });
   

3. 确保阴影适配圆角
   若组件使用了borderRadius，背景色的设置会让iOS自动渲染适配圆角的阴影，这一步是阴影正常显示的关键。

完成以上调整后，View组件的阴影即可和按钮组件一样正常显示。

内容的提问来源于stack exchange，提问作者Gabriel Lüders