问题

以下是您要翻译的部分：

"The print-screens are from how it looks in my iPhone

Im trying to add shadowbox effects to my react native app. I managed to add it to buttons and inputs just fine, they look like this:

But for some reason, every time I try to add it to a view, this happens:

Shaddow Effect:

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

Button Component:

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

Bugged component:

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

Here, Controller is just the imported svg and MyText is the following:

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>
}

Where each HX is just a styled text component. It didnt work when MyText was just a text component without styles as well."

请注意，我已经翻译了代码的部分，其他部分都保持原文。

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

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

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>
}

答案1

得分: 1

如上所述，唯一缺少的是背景颜色。