ããã«ã¡ã¯ãFindyã§ã¢ãã€ã«ã¢ããªéçºãæ
åœããŠããå è€ãšäž»èšã§ãã Findyåã®ã¢ãã€ã«ã¢ããªãFindy Eventsãã«ã€ããŠã¯ãå
æ¥ React Nativeéžå®ã®çµç·¯ãšç«ã¡äžãã®å
šäœå ãå
¬éããŸããã åèšäºã§ã¯UIã©ã€ãã©ãªåšãã«ã¯æ·±ãèžã¿èŸŒããªãã£ãã®ã§ãä»åã¯ãã®ç¶ç·šã§ããUIã©ã€ãã©ãªã®éžå®ãšå®è£
ãã¿ãŒã³ã«çµã£ãŠãå±ãããŸãã å
·äœçã«ã¯ãåœåæ¡çšããŠããTamaguiããHeroUI Native + react-native-unistylesã«ä¹ãæãããŸã§ã®å€æãšãWrapper Componentã軞ã«ããUIæ§ç¯ã®é²ãæ¹ãäžå¿ã§ãã ãªããæ¬èšäºã§é¡æã«ããŠããFindy Eventsã¯ã App Store ãš Google Play ã§å
¬éããŠããŸãã Tamaguiæ¡çšã®èæ¯ Tamaguiã䜿ã£ãŠã¿ãŠèŠããŠããèª²é¡ Android宿©åºæã®æå Sheet衚瀺çŽåŸã®ã¿ãããå¹ããªã Sheetå
ã®ScrollViewã§ã¹ã¯ããŒã«ãããšSheetãéãã Expo SDK 54察å¿ã®ã¿ã€ãã³ã° HeroUI Native + react-native-unistylesã«å€æŽã決ããçç± Î²çæ¡çšã®ãªã¹ã¯ãšãã®å¯Ÿçæ¹é å
·äœçãªã³ãŒãäŸ HeroUI Nativeã®Wrapper Component react-native-unistylesãšWrapper Componentãçµã¿åãããUI Componentã®å®è£
ãŸãšã Tamaguiæ¡çšã®èæ¯ Findyã®ã¢ãã€ã«ã¢ããªéçºã§ãåœåUIã©ã€ãã©ãªãšããŠæ¡çšããŠããã®ã¯ Tamagui ã éžå®æã®åè£ã¯ gluestack-ui ãšTamaguiã®2ã€ã§ãæçµçã«Tamaguiãéžã³ãŸããã æ±ºãæãšãªã£ãçç±ã¯å€§ãã3ã€ãããŸãã 1ã€ç®ã¯ãã©ã€ãã©ãªãšããŠã®ä¿¡é Œæ§ãšæ
å ±éã§ãã Tamaguiã¯v0.1.0ã2021幎3æã«ãªãªãŒã¹ããã5幎以äžã«ããã£ãŠéçºãç¶ããŠããOSSã§ãã GitHubã®ã¹ã¿ãŒæ°ãæäŸãããComponentæ°ã®å
å®åºŠãããæ¬çªãããã¯ãã«æ¡çšããŠã倧ããå€ããªããšå€æããŸãããæŽå²ãããåããããäžã®èšäºãæ¯èŒçå€ããéçºæã®èª¿æ»ã³ã¹ããæããããç¹ãåŸæŒãææã§ãã 2ã€ç®ã¯ãiOSãšã³ãžãã¢ãšããŠã®éçºçµéšãšã®èŠªåæ§ã§ãã iOSéçºã§ã¯OSSãšããŠæäŸãããUIããã®ãŸãŸå©çšããããããã¯èš±å®¹ç¯å²ã§æ¹å€ããã¢ãããŒããäžè¬çã§ãTamaguiã¯ãã®ã¡ã³ã¿ã«ã¢ãã«ã«åèŽããŠããŸããã SwiftUIãšåã宣èšçUIã®ææ³ãæã¡ã瞊æ¹åã«äžŠã¹ãSwiftUIã® VStack ãTamaguiã® YStack ã«å¯Ÿå¿ããããã«ãåèŠçŽ ã軞æ¹åã«ç©ã¿äžããŠã¬ã€ã¢ãŠããçµã¿ç«ãŠãèãæ¹ãå
±éããŠããç¹ã銎æã¿ããããã€ã³ãã§ãã äžæ¹ã®gluestack-uiã¯ãshadcn/uiãšåæ§ã«CLIã§Componentã®ã³ãŒããèªåã®ãªããžããªã«çæããå¿
èŠã«å¿ããŠç·šéããŠäœ¿ãæ¹åŒãæ¡ã£ãŠããŸããTailwindã©ã€ã¯ãªã¯ã©ã¹æå®ãšåãããŠãã¢ãã€ã«ãšã³ãžãã¢åºèº«ã®èªåã«ã¯ããåã£ä»ãã«ããæããŸããã 3ã€ç®ã¯ãPropsããŒã¹ã§çŽæçã«ã¹ã¿ã€ãªã³ã°ã§ããããšã§ãã <Stack m="$2" p="$2" backgroundColor="$background"> ã®ããã«ãComponentã«å¯ŸããŠPropsçµç±ã§ãã¶ã€ã³ããŒã¯ã³ãçŽæ¥åœãŠãããæèŠãšããŠã¯æãªããã®CSSãSwiftUIã®modifierã«è¿ãæžãå³ã§æ±ããŸãã ãã¶ã€ã³ããŒã¯ã³ã«ããããŒã管çã§ã©ã€ã/ããŒã¯ããŒãã®åãæ¿ãã容æãªç¹ã決ãæã«ãªããŸããã Tamaguiã䜿ã£ãŠã¿ãŠèŠããŠããèª²é¡ Tamaguiãæ¡çšããŠã¢ããªãéçºããäžã§ã幟ã€ãèŠããŠãã課é¡ããããŸãããHeroUI Nativeãžã®ä¹ãæãã倿ããèæ¯ã§ããããããããã§ççŽã«å
±æããŸãã Android宿©åºæã®æå iOSã·ãã¥ã¬ãŒã¿ãAndroidãšãã¥ã¬ãŒã¿ã§ã¯åé¡ãªããã®ã®ãAndroid宿©ã§ã®ã¿èµ·ããæåã«å¹Ÿã€ãã¶ã€ãããŸãããããã§ã¯å°è±¡ã«æ®ã£ã2ã€ã®ã±ãŒã¹ããå®ã³ãŒããšåãããŠç޹ä»ããŸãã Sheet衚瀺çŽåŸã®ã¿ãããå¹ããªã ã¡ãã¥ãŒã確èªãã€ã¢ãã°ãšã㊠Sheet ã衚瀺ããçŽåŸã«ãå
éšã®ãã¿ã³ãã¿ããããŠãåå¿ããªãããšããããŸããã æåã¯ããã«ã¿ãããå¿
èŠãªã®ããšæããŸããããå°ãæéããããšåå¿ãããããUIã¢ãã¡ãŒã·ã§ã³ã®å®äºãŸã§ã¿ãããåãä»ããããŠããªããšæšæž¬ããŸãããããã©ã«ãã®ã¢ãã¡ãŒã·ã§ã³ã¯å®äºãŸã§ã«æéããããããã®éã¿ãããåãããŒããŠããããã§ãã ããã§ Sheet ã« animation="200ms" ã®ããã«çãæéã®ã¢ãã¡ãŒã·ã§ã³ãæç€ºçã«æå®ãããšããã衚瀺å®äºãŸã§ã®æéãçããªãã衚瀺çŽåŸã®ã¿ããã«ãããåå¿ããããã«ãªã£ãŠè§£æ¶ããŸããã <Sheet modal open = { open } onOpenChange= { setOpen } snapPoints= {[ 50 ]} animation= "200ms" // æç€ºããªããšAndroid宿©ã§è¡šç€ºçŽåŸã®ã¿ãããå¹ããªã > < Sheet . Overlay /> < Sheet . Frame padding = "$4" > < Button onPress = { handleConfirm } > 確å®ãã </ Button > </ Sheet . Frame > </Sheet> Sheetå
ã®ScrollViewã§ã¹ã¯ããŒã«ãããšSheetãéãã éžæè¢ãå€ãé
ç®ãéžã°ããUIãšããŠãéžæè¢äžèЧã ScrollView ã§è¡šç€ºãã Sheet ãåºããŠããã®ã§ãããPixel 10ã§åäœç¢ºèªããŠãããšããã Sheet å
ãã¹ã¯ããŒã«ããããšãããšãã®ãŸãŸ Sheet ããšéããŠããŸãäºè±¡ãçºçããŸããã 該åœç®æã¯ããããæ¬¡ã®ãããªæ§æã§ãã import { ScrollView } from "react-native" ; import { Sheet } from "tamagui" ; < Sheet modal open = { open } onOpenChange = { setOpen } snapPoints = { [ 80 ] } > < Sheet . Overlay /> < Sheet . Frame > < ScrollView > { options. map (( option ) => ( < Option key = { option. id } option = { option } /> )) } </ ScrollView > </ Sheet . Frame > </ Sheet > Sheet å
ã® ScrollView ã§ã®ã¹ã¯ããŒã«æäœãã Sheet ãéããããã®ãã©ãã°ãžã§ã¹ãã£ãšè¡çªããŠããã®ãåå ãšæšæž¬ããŠããŸãã æ«å®å¯Ÿå¿ãšã㊠Sheet åŽã« disableDrag ãæå®ãããšãããã¹ã¯ããŒã«æã« Sheet ãéããäºè±¡ã¯è§£æ¶ãããŸããã <Sheet modal open = { open } onOpenChange= { setOpen } snapPoints= {[ 80 ]} disableDrag // ãã©ãã°ã§Sheetãéããæåãç¡å¹åããScrollViewã®ã¹ã¯ããŒã«ãšè¡çªããªãããã«ãã > < Sheet . Overlay /> < Sheet . Frame > < ScrollView > { options. map (( option ) => ( < Option key = { option. id } option = { option } /> )) } </ ScrollView > </ Sheet . Frame > </Sheet> ãã ã disableDrag ãæå®ãããšãæ¬æ¥ãã©ãã°ã§éããããã¯ãã® Sheet ãéããããªããªããUXäžã®åŠ¥åãçºçããŠããŸããŸãã Sheet åšãã¯Android宿©ã§ã®æåãå®å®ããªãã±ãŒã¹ãç¶ããããšããããæ ¹æ¬çã«ã¯Tamaguiã® Sheet èªäœã®å©çšãèŠçŽãå¿
èŠããããšæãã¯ãããåŸã«HeroUI Nativeãžã®ä¹ãæããæ€èšããäžå ã«ããªããŸããã Expo SDK 54察å¿ã®ã¿ã€ãã³ã° Expoã¯React Nativeã§ã¯ãã¹ãã©ãããã©ãŒã ã®ã¢ããªãéçºããããã®ãã¬ãŒã ã¯ãŒã¯ã§ãã¢ãã€ã«ã¢ããªã®èšŒææžåšããç°¡åã«æ±ããä»çµã¿ããæ§ã
ãªäŸ¿å©æ©èœãSDKãšããŠæäŸããŠããŸãããã®Expo SDK 54ã¯2025幎9æ11æ¥ã«ãªãªãŒã¹ãããTamaguiã®GitHubäžã§ã察å¿ã«åããWIP Pull Requestãè°è«ãåããŠããŸããã äžæ¹ã§ãTamaguiåŽã®å¯Ÿå¿çããªãªãŒã¹ãããã®ã¯2025幎11æ15æ¥ã§ã察å¿çãªãªãŒã¹æ¥ã®ã¢ããŠã³ã¹ã¯äºåã«ã¯ãªãã£ããšèšæ¶ããŠããŸãã 5幎以äžã®æŽå²ãæã€ã©ã€ãã©ãªã§ãå
éšã«å€ãã®å®è£
ãæ±ããŠããåãææ°Expo SDKãžã®è¿œåŸã¯ç°¡åã§ã¯ãªãã®ã ãããšæšæž¬ããŠããŸããOSSã©ã€ãã©ãªãæ¡çšãã以äžããããã远åŸã³ã¹ããšã¯ãã¬ãŒããªãã ãšæ¹ããŠæããåºæ¥äºã§ããã HeroUI Native + react-native-unistylesã«å€æŽã決ããçç± ãããŸã§èŠãŠãã課é¡ãèžãŸããæ¬¡ã®UIåºç€ãšããŠHeroUI Nativeãšreact-native-unistylesãçµã¿åãããæ§æãéžã³ãŸããã HeroUI Nativeãéžãã çç±ã¯ãComponentã®å®æåºŠãé«ããç»é¢å®è£
ã®ã¹ããŒããäžãããããšèããããã§ããããã©ã«ãã®èŠãç®ãæŽç·ŽãããŠãããã¢ãã¡ãŒã·ã§ã³ãã€ã³ã¿ã©ã¯ã·ã§ã³ãäœã蟌ãŸããŠããããã现ãã調æŽãå ããªããŠããã®ãŸãŸç»é¢ãçµã¿ç«ãŠãããŸããFindy Eventsã¯ãŸã æ©èœãå¢ãããŠããæ®µéã«ãããå¿
èŠãªç»é¢ãçŽ æ©ã圢ã«ã§ããããšã¯ãUIã©ã€ãã©ãªã«åŒ·ãæ±ããŠããç¹ã§ããã ã¹ã¿ã€ãªã³ã°ã«react-native-unistylesãæ¡çšããã®ã¯ãã¹ã¿ã€ã«å®çŸ©ãæšæºã®APIã«å¯ãããã£ãããã§ããHeroUI Nativeèªäœã¯å
éšã®ã¹ã¿ã€ãªã³ã°ã«UniwindïŒTailwind v4ããŒã¹ã®ä»çµã¿ïŒã䜿ã£ãŠããŸããããããã¯ãåŽã®ã¹ã¿ã€ã«ã¯ãReact Nativeæšæºã®StyleSheet APIã«è¿ãæžãå³ã§æ±ããããšèããŸãããreact-native-unistylesãªã StyleSheet.create ãèµ·ç¹ã«ãè²ãfontSizeãspacingãradiusãšãã£ãããŒã¯ã³ãå®çŸ©ã§ããã¢ãã€ã«ãšã³ãžãã¢ã«ãšã£ãŠã銎æã¿ãããæžãå³ã«ãªããŸãã Î²çæ¡çšã®ãªã¹ã¯ãšãã®å¯Ÿçæ¹é äžæ¹ã§ãHeroUI Nativeã®æ¡çšã«ã¯ãªã¹ã¯ããããŸããã æ€èšããŠããåœæã®HeroUI Nativeã¯ãŸã Î²çæ®µéã®ã©ã€ãã©ãªã§ãããæ£åŒçã®v1.0.0ã¯2026幎3æ19æ¥ã«ãªãªãŒã¹ãããFindy Eventsã®ã¢ããªãªãªãŒã¹æç¹ã§ã¯v1.0ç³»ã«å°éããŠããŸãããã ãæ¡çšã倿ããæç¹ã§ã¯ãŸã æ£åŒçåã®ã©ã€ãã©ãªã§ããÎ²çæ®µéã®ã©ã€ãã©ãªãæ¬çªãããã¯ãã®åå°ã«æ®ãã以äžãç¹ã«ç Žå£ç倿Žã«ã¯æ³šæãå¿
èŠã§ãããAPIããŸã åºãŸããã£ãŠããããããŒãžã§ã³ã¢ããã®ãã³ã«å©çšåŽã®ã³ãŒãä¿®æ£ãè¿«ãããå¯èœæ§ãããããã§ãã ããã§ãHeroUI Nativeã®Componentã¯ç»é¢ããçŽæ¥äœ¿ãããå¿
ãWrapper Componentãæãã§å©çšããæ¹éã«ããŸãããWrapper Componentãšããå¢çã1ææãããšã§ãHeroUI NativeåŽã®APIãå€ãã£ãŠããä¿®æ£ãPrimitiveå±€ã«éã蟌ããããŸãã ãã®æ¹éã¯ãç Žå£ç倿Žãžã®åãã§ãããšåæã«ãå°æ¥çã«HeroUI Nativeã®Componentãèªåãã¡ã®ç¬èªå®è£
ãžåãæ¿ããããªã£ãå Žåã«ãå¹ããŸããå©çšåŽã¯Wrapper Componentçµç±ã§ããComponentã«è§ŠããŠããªããããå
åŽã®å®è£
ãHeroUI Nativeããç¬èªå®è£
ãžå·®ãæ¿ããŠããç»é¢åŽã®ã³ãŒãã«åœ±é¿ãåºããã«ç§»è¡ã§ããŸãã å
·äœçãªã³ãŒãäŸ ããã§ã¯ãHeroUI Nativeã®ComponentãWrapper ComponentãšããŠå®çŸ©ããreact-native-unistylesãšçµã¿åãããŠç»é¢ãæ§ç¯ãããŸã§ã®æµãã玹ä»ããŸãã HeroUI Nativeã®Wrapper Component ãŸããæãã·ã³ãã«ãªäŸãšããŠã Skeleton ã®Wrapper Componentã®ã³ãŒããèŠãŠãããŸãããã // src/components/primitives/skeleton/skeleton.component.tsx import type { SkeletonProps } from "heroui-native" ; import type { PropsWithChildren } from "react" ; import { Skeleton as HeroUISkeleton } from "heroui-native" ; type Props = PropsWithChildren < Pick < SkeletonProps , "isLoading" | "style" > >; export const Skeleton = ( { isLoading = true , style , children } : Props ) => { return ( < HeroUISkeleton isLoading = { isLoading } variant = "shimmer" style = { style } > { children } </ HeroUISkeleton > ); } ; HeroUI Nativeã®Componentã¯å€ãã®Propsãæã£ãŠããŸãããã¢ããªå
ã§å®éã«äœ¿ãPropsã¯éãããŸãã Wrapper Componentãå®çŸ©ããæã«ã Pick<> ã§å¿
èŠãªPropsã ããå
¬éããããšã§ãå©çšåŽã®ã€ã³ã¿ãŒãã§ãŒã¹ãã·ã³ãã«ã«ä¿ã€ããšãã§ããŸãã ãŸãã variant ã®ããã«ã¢ããªå
šäœã§åºå®ãããèšå®å€ã¯Wrapper Componentå
ã§åã蟌ãããšã§ãå©çšåŽãæèããå¿
èŠããªããªããŸãã æ¬¡ã«ãããå°ãè€éãªäŸãšããŠã Button ã®Wrapper Componentã®ã³ãŒããèŠãŠã¿ãŸãããã HeroUI Nativeã«ã¯ Button.Label ã Card.Body ã®ããã«ããµãComponentãæã€Compound ComponentããããŸãã ã©ããããåŸã Button.Label ã®ãããªåŒã³åºãæ¹ãç¶æãããå Žåã¯ã Object.assign() ã䜿ã£ãŠèŠªComponentã«ãµãComponentãçŽä»ããŸãã // src/components/primitives/button/button.component.tsx import type { PropsWithChildren } from "react" ; import { Button as HeroUIButton } from "heroui-native" ; import type { ButtonLabelProps, ButtonRootProps } from "heroui-native" ; import { StyleSheet } from "react-native-unistyles" ; export type ButtonComponentProps = PropsWithChildren < Pick < ButtonRootProps , "style" | "size" | "onPress" | "isDisabled" | "animation" > >; export type ButtonLabelComponentProps = PropsWithChildren < Pick < ButtonLabelProps , "style" > >; const ButtonRoot = ( { children , style , size , onPress , isDisabled , animation , } : ButtonComponentProps ) => { return ( < HeroUIButton style = { style } size = { size } onPress = { onPress } isDisabled = { isDisabled } animation = { animation } > { children } </ HeroUIButton > ); } ; const ButtonLabel = ( { children , style } : ButtonLabelComponentProps ) => { return ( < HeroUIButton . Label style = { style } > { children } </ HeroUIButton . Label > ); } ; export const Button = Object . assign (ButtonRoot, { Label : ButtonLabel, } ); ãã®ããã« Button.Label ã®åœ¢ã§ã¢ã¯ã»ã¹ã§ãããããå©çšåŽã®ã³ãŒãã¯HeroUI Nativeã®å
ã®APIãšåã䜿ãå¿å°ãç¶æã§ããŸãã react-native-unistylesãšWrapper Componentãçµã¿åãããUI Componentã®å®è£
ç¶ããŠãå®çŸ©ããWrapper Componentãreact-native-unistylesãšçµã¿åãããŠãå®éã®ç»é¢ã§å©çšããUI ComponentãäœãäŸã玹ä»ããŸãã ãŸããã«ã©ãŒããŒã¯ã³ãå®çŸ©ãããã¡ã€ã«ãçšæããŸãã // src/styles/generated/primitive-colors.ts export const primitiveColors = { black : "#000000" , white : "#ffffff" , ... blue400 : "#377ecd" , blue500 : "#055ec1" , blue600 : "#044b9a" , ... } as const ; export type PrimitiveColors = typeof primitiveColors ; 次ã«ãreact-native-unistylesã§ãããŒãã«æ²¿ã£ãã¹ã¿ã€ãªã³ã°ãå¹ççã«è¡ããããã«ã StyleSheet.configure ã§ã¢ããªå
šäœã®ããŒãããŒã¯ã³ãå®çŸ©ããŸãã æ¬ã¢ããªã§ã¯ãè²ããã©ã³ããµã€ãºãspacingãè§äžžãªã©ãããŒã¯ã³ãšããŠç®¡çããŠãããComponentããšã®é
è²ãããã«éçŽããŠããŸãã // src/styles/index.ts import { StyleSheet } from "react-native-unistyles" ; import { primitiveColors } from "./generated/primitive-colors" ; const tokens = { colors : primitiveColors, fontSize : { xs : 11 , sm : 12 , md : 14 , lg : 16 , xl : 20 , "2xl" : 22 } , radius : { xs : 2 , sm : 4 , md : 6 , lg : 8 , xl : 12 } , space : { "2xs" : 4 , xs : 8 , sm : 12 , md : 16 , lg : 24 } , } as const ; const lightTheme = { // ã°ããŒãã«å®çŸ© background : primitiveColors.white, backgroundPress : primitiveColors.grey50, ... // Componentããšã®å®çŸ© button : { danger : { background : primitiveColors.red500, color : primitiveColors.white, backgroundPress : primitiveColors.red600, } , } , fontSize : tokens.fontSize, radius : tokens.radius, space : tokens.space, } as const ; const darkTheme = { ... } StyleSheet .configure( { themes : { light : lightTheme, dark : darkTheme } , } ); StyleSheet.create ã®ã³ãŒã«ããã¯é¢æ°ãããã®ããŒãããŒã¯ã³ã«ã¢ã¯ã»ã¹ã§ããããã«ã¹ã¿ã€ã«å®çŸ©èªäœã颿°ã«ããããšã§ãPropsã®å€ã«å¿ããåçãªã¹ã¿ã€ã«åãæ¿ããå®çŸã§ããŸãã ãããèžãŸããŠãå
çšã®Button Wrapper Componentãã«ã¹ã¿ãã€ãºãããDangerButtonãUI Componentã®äŸãèŠãŠã¿ãŸãããã // src/components/buttons/danger-button/danger-button.component.tsx import { StyleSheet , useUnistyles } from "react-native-unistyles" ; import { Button } from "@/components/primitives/button" ; import type { ButtonComponentProps, ButtonLabelComponentProps, } from "@/components/primitives/button" ; const DangerButtonRoot = ( { children , style , ... rest } : ButtonComponentProps ) => { const { theme } = useUnistyles(); return ( < Button style = { [ styles.root, style ] } animation = { { highlight: { backgroundColor: { value: theme.button.danger.backgroundPress } , }, }} { ...rest } > { children } </ Button > ); } ; const DangerButtonLabel = ( { children , style } : ButtonLabelComponentProps ) => { return < Button . Label style = { [ styles. label , style ] } > { children } </ Button . Label > ; } ; export const DangerButton = Object . assign (DangerButtonRoot, { Label : DangerButtonLabel, } ); const styles = StyleSheet .create(( theme ) => ( { root : { backgroundColor : theme.button.danger.background, } , label : { color : theme.button.danger.color, } , } )); ãã®ããã«ãHeroUI Nativeã® className ãªã©ãé èœãããããã¯ãåºæã®ã¹ã¿ã€ã«å®çŸ©ãreact-native-unistylesã§äžããŠãããHeroUI Nativeãšreact-native-unistylesã§è²¬åãåå²ããŠããŸãã ãŸãšã æ¬èšäºã§ã¯ãFindy Eventsã®éçºã§åœåæ¡çšããŠããTamaguiããHeroUI Native + react-native-unistylesãžä¹ãæãããŸã§ã®å€æãšãWrapper Componentã軞ã«ããUIå®è£
ãã¿ãŒã³ã玹ä»ããŸããã æ¯ãè¿ã£ãŠæ¹ããŠæããã®ã¯ãUIã©ã€ãã©ãªã®éžå®ã¯ãäžåºŠæ±ºããŠçµãããã§ã¯ãªããéçšããªããç¶ç¶çã«èŠçŽãåæã§åãåãã¹ãã ãšããããšã§ãã Tamaguiã¯éžå®æã®è©äŸ¡ãšããŠã¯åŠ¥åœãªåè£ã§ãæ¡çšåŸãå€ãã®å Žé¢ã§ååã«æ©èœããŠããŸãããäžæ¹ã§ãAndroid宿©ç¹æã®æåãExpo SDK远åŸãŸã§ã®ã¿ã€ã ã©ã°ãªã©ããããã¯ããšããŠé·ãè²ãŠãäžã§ç¡èŠã§ããªã課é¡ãèŠããŠããŸããβçãšããã¿ã€ãã³ã°ã掻ãããŠHeroUI Native + react-native-unistylesã«èžã¿èŸŒãã 倿ã¯ãéçºäœéšã®æ¹åãšãã圢ã§çŽ çŽã«å¹ããŠããŸãã å®è£
é¢ã§ã¯ãHeroUI Nativeããã®ãŸãŸUI ComponentãšããŠäœ¿ãã®ã§ã¯ãªããWrapper Componentçµç±ã§åã»Propsãçµããã¹ã¿ã€ã«å®çŸ©ã¯react-native-unistylesã«å¯ãã責ååé¢ãæ©èœããŸããããããã¯ãåºæã®ããŒããé
è²ãWrapper ComponentåŽã§åãæ¢ããããšã§ãUIã©ã€ãã©ãªæŽæ°ã®åœ±é¿ç¯å²ãæå°åãã€ã€ãç»é¢åŽã®ã³ãŒããã·ã³ãã«ã«ä¿ãŠãŠããŸãã Findyåã®ã¢ãã€ã«ã¢ããªãšããããšã§ãæè¡éžå®ãã¢ãŒããã¯ãã£ãææ¢ãã§é²ããéšåãå€ããããŸããããã®éœåºŠã®å€æãšæ¯ãè¿ããã®ãã®ã倧ããªè³ç£ã«ãªã£ãŠãããšæããŸããæ¬èšäºã®çµéšè«ããåããããªéžå®ãèšèšã«åãåã£ãŠããæ¹ã®å€æææã«ãªãã°å¬ããã§ãã ãã¡ã€ã³ãã£ã§ã¯äžç·ã«åãã¡ã³ããŒãåéããŠããŸããå°ãã§ãèå³ãæã£ãŠããã ããæ¹ã¯ããã²ãã¡ããã芧ãã ããïŒ herp.careers