英文:
Weird shadow effect on react native
问题
以下是您要翻译的部分：
"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 AndroidborderWidth: 2,borderColor: 'black'}});
Button Component:
export const GenericButtonContainer = styled.Pressable<GenericButtonProps>`background-color: ${p => {const mainColor = p.pressed? globalStyles.purple: globalStyles.button.backgroundColorreturn 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 : 13const data = truncate? truncate(children as string, truncateSize): childrenif (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."
请注意，我已经翻译了代码的部分，其他部分都保持原文。
英文:
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 AndroidborderWidth: 2,borderColor: 'black'}});
Button Component:
export const GenericButtonContainer = styled.Pressable<GenericButtonProps>`background-color: ${p => {const mainColor = p.pressed? globalStyles.purple: globalStyles.button.backgroundColorreturn 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 : 13const data = truncate? truncate(children as string, truncateSize): childrenif (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.
答案1
得分: 1
如上所述，唯一缺少的是背景颜色。
英文:
As commented above, all that was missing was a background color.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论