From ec6361331baf047be4c6d65a4226a7db3886f863 Mon Sep 17 00:00:00 2001 From: mym0404 Date: Wed, 13 Mar 2024 14:31:22 +0900 Subject: [PATCH] Deploy website - based on 40680484d7bcbe950ea874d2aa83f70a6077fb52 --- 404.html | 2 +- assets/js/3f77e242.5ca2ace6.js | 1 - assets/js/3f77e242.8a861c24.js | 1 + ...e~main.5a6df145.js => runtime~main.8017d3c3.js} | 2 +- blog/archive/index.html | 2 +- blog/first-blog-post/index.html | 2 +- blog/index.html | 2 +- blog/long-blog-post/index.html | 2 +- blog/mdx-blog-post/index.html | 2 +- blog/tags/docusaurus/index.html | 2 +- blog/tags/facebook/index.html | 2 +- blog/tags/hello/index.html | 2 +- blog/tags/hola/index.html | 2 +- blog/tags/index.html | 2 +- blog/welcome/index.html | 2 +- docs/category/usage/index.html | 2 +- docs/intro/index.html | 2 +- docs/usage/component/index.html | 14 ++++++++++++-- docs/usage/configuration/index.html | 2 +- docs/usage/install/index.html | 2 +- docs/usage/style-parsing/index.html | 2 +- docs/usage/sx-props/index.html | 2 +- docs/usage/token/index.html | 2 +- docs/usage/typescript/index.html | 2 +- index.html | 2 +- ko/404.html | 2 +- ko/assets/js/048b097b.2a07c94b.js | 1 - ko/assets/js/048b097b.9e6a5cab.js | 1 + ...e~main.5ee05f52.js => runtime~main.89c316d1.js} | 2 +- ko/blog/archive/index.html | 2 +- ko/blog/first-blog-post/index.html | 2 +- ko/blog/index.html | 2 +- ko/blog/long-blog-post/index.html | 2 +- ko/blog/mdx-blog-post/index.html | 2 +- ko/blog/tags/docusaurus/index.html | 2 +- ko/blog/tags/facebook/index.html | 2 +- ko/blog/tags/hello/index.html | 2 +- ko/blog/tags/hola/index.html | 2 +- ko/blog/tags/index.html | 2 +- ko/blog/welcome/index.html | 2 +- ko/docs/category/usage/index.html | 2 +- ko/docs/intro/index.html | 2 +- ko/docs/usage/component/index.html | 11 +++++++++-- ko/docs/usage/configuration/index.html | 2 +- ko/docs/usage/install/index.html | 2 +- ko/docs/usage/style-parsing/index.html | 2 +- ko/docs/usage/sx-props/index.html | 2 +- ko/docs/usage/token/index.html | 2 +- ko/docs/usage/typescript/index.html | 2 +- ko/index.html | 2 +- ko/markdown-page/index.html | 2 +- markdown-page/index.html | 2 +- 52 files changed, 69 insertions(+), 52 deletions(-) delete mode 100644 assets/js/3f77e242.5ca2ace6.js create mode 100644 assets/js/3f77e242.8a861c24.js rename assets/js/{runtime~main.5a6df145.js => runtime~main.8017d3c3.js} (51%) delete mode 100644 ko/assets/js/048b097b.2a07c94b.js create mode 100644 ko/assets/js/048b097b.9e6a5cab.js rename ko/assets/js/{runtime~main.5ee05f52.js => runtime~main.89c316d1.js} (98%) diff --git a/404.html b/404.html index 4dd82ba2..d1847bdf 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ Page Not Found | React Native Styled System - + diff --git a/assets/js/3f77e242.5ca2ace6.js b/assets/js/3f77e242.5ca2ace6.js deleted file mode 100644 index 6065ac81..00000000 --- a/assets/js/3f77e242.5ca2ace6.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[4713],{4863:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>p,frontMatter:()=>i,metadata:()=>l,toc:()=>d});var s=t(4848),o=t(8453);const i={sidebar_position:3,title:"Component"},r="Component",l={id:"usage/component",title:"Component",description:"React Native Styled System does not create basic components internally.",source:"@site/docs/usage/component.mdx",sourceDirName:"usage",slug:"/usage/component",permalink:"/react-native-styled-system/docs/usage/component",draft:!1,unlisted:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/usage/component.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"Component"},sidebar:"tutorialSidebar",previous:{title:"Settings",permalink:"/react-native-styled-system/docs/usage/configuration"},next:{title:"Pass styles and parsing priorities",permalink:"/react-native-styled-system/docs/usage/style-parsing"}},c={},d=[{value:"StyledView example",id:"styledview-example",level:2},{value:"Example of refactoring an existing component",id:"example-of-refactoring-an-existing-component",level:2}];function a(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"component",children:"Component"}),"\n",(0,s.jsx)(n.p,{children:"React Native Styled System does not create basic components internally."}),"\n",(0,s.jsx)(n.p,{children:"Instead, you can define the components that will use your theme directly with a simple and extensible API."}),"\n",(0,s.jsx)(n.p,{children:"The mainly used APIs are as follows."}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"useSx(hook)"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"SxProps(type)"})}),"\n"]}),"\n",(0,s.jsxs)(n.h2,{id:"styledview-example",children:[(0,s.jsx)(n.code,{children:"StyledView"})," example"]}),"\n",(0,s.jsxs)(n.p,{children:["Let\u2019s create a component that can use React Native\u2019s ",(0,s.jsx)(n.code,{children:"View"})," component like a Styled System."]}),"\n",(0,s.jsxs)(n.p,{children:["How to use the completed ",(0,s.jsx)(n.code,{children:"StyledView"})," component is as follows."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://raw.githubusercontent.com/mym0404/image-archive/master/202403131245340.png",alt:"image.png"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"\n \n \n \n \n \n\n"})}),"\n",(0,s.jsx)(n.p,{children:"It can be defined as follows:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="StyledView.tsx"',children:"import { forwardRef, Ref, PropsWithChildren } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { SxProps, useSx } from 'react-native-themed-styled-system';\n\ntype StyledViewProps = PropsWithChildren;\nconst StyledView = forwardRef((props: StyledViewProps, ref: Ref) => {\n const { viewStyle, filteredProps } = useSx(props);\n return ;\n});\n\nexport { StyledView };\nexport type { StyledViewProps };\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"useSx"})," is responsible for receiving ",(0,s.jsx)(n.code,{children:"SxProps"})," and converting it to ",(0,s.jsx)(n.code,{children:"ViewStyle"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["You can call the ",(0,s.jsx)(n.code,{children:"viewStyle"})," function returned by ",(0,s.jsx)(n.code,{children:"useSx"})," and pass it to the ",(0,s.jsx)(n.code,{children:"style"})," prop of the desired view."]}),"\n",(0,s.jsxs)(n.admonition,{type:"warning",children:[(0,s.jsxs)(n.p,{children:["The prop type of a component containing the ",(0,s.jsx)(n.code,{children:"SxProps"})," type includes all the keys included in ",(0,s.jsx)(n.code,{children:"SxProps"}),"."]}),(0,s.jsxs)(n.p,{children:["Therefore, if all props from the parent are passed through object destruction like in the existing ",(0,s.jsx)(n.code,{children:"{...props}"}),", the keys do not overlap.\nYou need to be careful not to do so."]}),(0,s.jsxs)(n.p,{children:["Also, when using ",(0,s.jsx)(n.code,{children:"props"})," as is, it must always come before ",(0,s.jsx)(n.code,{children:"style"})," so as not to overwrite the ",(0,s.jsx)(n.code,{children:"style"})," of ",(0,s.jsx)(n.code,{children:"viewStyle()"}),"."]}),(0,s.jsxs)(n.p,{children:["To prevent this, you can use ",(0,s.jsx)(n.code,{children:"filteredProps"})," in the return value of ",(0,s.jsx)(n.code,{children:"useSx"}),"."]}),(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"filteredProps"})," represents a new prop that filters all style-related fields such as ",(0,s.jsx)(n.code,{children:"style"}),", ",(0,s.jsx)(n.code,{children:"sx"}),", ",(0,s.jsx)(n.code,{children:"w"}),", and ",(0,s.jsx)(n.code,{children:"width"}),"."]})]}),"\n",(0,s.jsx)(n.h2,{id:"example-of-refactoring-an-existing-component",children:"Example of refactoring an existing component"}),"\n",(0,s.jsx)(n.p,{children:"Let's look at how to refactor existing components as follows."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n};\nconst ExistComponent = ({\n style,\n title,\n body,\n}: Props) => {\n return (\n \n...\n"})}),"\n",(0,s.jsx)(n.p,{children:"This changes to:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n//highlight-next-line\n} &SxProps;\nconst ScreenErrorFallback = (props: Props) => {\n//highlight-next-line\n const { title, body } = props;\n//highlight-next-line\n const { viewStyle } = useSx(props);\n return (\n \n"})}),"\n",(0,s.jsx)(n.p,{children:"There are a few things to keep in mind."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"useSx"})," includes ",(0,s.jsx)(n.code,{children:"props.style"})," in the automatically created style output.\nThere is no need to add ",(0,s.jsx)(n.code,{children:"style"})," as a prop to ",(0,s.jsx)(n.code,{children:"style"})," of ",(0,s.jsx)(n.code,{children:"View"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:["Always pass all ",(0,s.jsx)(n.code,{children:"props"})," objects themselves to ",(0,s.jsx)(n.code,{children:"useSx"})," to avoid missing any properties. ",(0,s.jsx)(n.code,{children:"useSx"}),"\nProperties that are not used internally are ignored and not changed."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"viewStyle"})," can receive ",(0,s.jsx)(n.code,{children:"SxProps"})," as an argument and consider it in the result."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>l});var s=t(6540);const o={},i=s.createContext(o);function r(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3f77e242.8a861c24.js b/assets/js/3f77e242.8a861c24.js new file mode 100644 index 00000000..45f737ad --- /dev/null +++ b/assets/js/3f77e242.8a861c24.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[4713],{4863:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>p,frontMatter:()=>i,metadata:()=>l,toc:()=>d});var s=t(4848),o=t(8453);const i={sidebar_position:3,title:"Component"},r="Component",l={id:"usage/component",title:"Component",description:"React Native Styled System does not create basic components internally.",source:"@site/docs/usage/component.mdx",sourceDirName:"usage",slug:"/usage/component",permalink:"/react-native-styled-system/docs/usage/component",draft:!1,unlisted:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/usage/component.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"Component"},sidebar:"tutorialSidebar",previous:{title:"Settings",permalink:"/react-native-styled-system/docs/usage/configuration"},next:{title:"Pass styles and parsing priorities",permalink:"/react-native-styled-system/docs/usage/style-parsing"}},c={},d=[{value:"StyledView example",id:"styledview-example",level:2},{value:"Example of refactoring an existing component",id:"example-of-refactoring-an-existing-component",level:2},{value:"Example without Props destruction",id:"example-without-props-destruction",level:2}];function a(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"component",children:"Component"}),"\n",(0,s.jsx)(n.p,{children:"React Native Styled System does not create basic components internally."}),"\n",(0,s.jsx)(n.p,{children:"Instead, you can define the components that will use your theme directly with a simple and extensible API."}),"\n",(0,s.jsx)(n.p,{children:"The mainly used APIs are as follows."}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"useSx(hook)"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"SxProps(type)"})}),"\n"]}),"\n",(0,s.jsxs)(n.h2,{id:"styledview-example",children:[(0,s.jsx)(n.code,{children:"StyledView"})," example"]}),"\n",(0,s.jsxs)(n.p,{children:["Let\u2019s create a component that can use React Native\u2019s ",(0,s.jsx)(n.code,{children:"View"})," component like a Styled System."]}),"\n",(0,s.jsxs)(n.p,{children:["How to use the completed ",(0,s.jsx)(n.code,{children:"StyledView"})," component is as follows."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://raw.githubusercontent.com/mym0404/image-archive/master/202403131245340.png",alt:"image.png"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"\n \n \n \n \n \n\n"})}),"\n",(0,s.jsx)(n.p,{children:"It can be defined as follows:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="StyledView.tsx"',children:"import { forwardRef, Ref, PropsWithChildren } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { SxProps, useSx } from 'react-native-themed-styled-system';\n\ntype StyledViewProps = PropsWithChildren;\nconst StyledView = forwardRef((props: StyledViewProps, ref: Ref) => {\n const { viewStyle, filteredProps } = useSx(props);\n return ;\n});\n\nexport { StyledView };\nexport type { StyledViewProps };\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"useSx"})," is responsible for receiving ",(0,s.jsx)(n.code,{children:"SxProps"})," and converting it to ",(0,s.jsx)(n.code,{children:"ViewStyle"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["You can call the ",(0,s.jsx)(n.code,{children:"viewStyle"})," function returned by ",(0,s.jsx)(n.code,{children:"useSx"})," and pass it to the ",(0,s.jsx)(n.code,{children:"style"})," prop of the desired view."]}),"\n",(0,s.jsxs)(n.admonition,{type:"warning",children:[(0,s.jsxs)(n.p,{children:["The prop type of a component containing the ",(0,s.jsx)(n.code,{children:"SxProps"})," type includes all the keys included in ",(0,s.jsx)(n.code,{children:"SxProps"}),"."]}),(0,s.jsxs)(n.p,{children:["Therefore, if all props from the parent are passed through object destruction like in the existing ",(0,s.jsx)(n.code,{children:"{...props}"}),", the keys do not overlap.\nYou need to be careful not to do so."]}),(0,s.jsxs)(n.p,{children:["Also, when using ",(0,s.jsx)(n.code,{children:"props"})," as is, it must always come before ",(0,s.jsx)(n.code,{children:"style"})," so as not to overwrite the ",(0,s.jsx)(n.code,{children:"style"})," of ",(0,s.jsx)(n.code,{children:"viewStyle()"}),"."]}),(0,s.jsxs)(n.p,{children:["To prevent this, you can use ",(0,s.jsx)(n.code,{children:"filteredProps"})," in the return value of ",(0,s.jsx)(n.code,{children:"useSx"}),"."]}),(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"filteredProps"})," represents a new prop that filters all style-related fields such as ",(0,s.jsx)(n.code,{children:"style"}),", ",(0,s.jsx)(n.code,{children:"sx"}),", ",(0,s.jsx)(n.code,{children:"w"}),", and ",(0,s.jsx)(n.code,{children:"width"}),"."]})]}),"\n",(0,s.jsx)(n.h2,{id:"example-of-refactoring-an-existing-component",children:"Example of refactoring an existing component"}),"\n",(0,s.jsx)(n.p,{children:"Let's look at how to refactor existing components as follows."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n};\nconst ExistComponent = ({\n style,\n title,\n body,\n}: Props) => {\n return (\n \n...\n"})}),"\n",(0,s.jsx)(n.p,{children:"This changes to:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n//highlight-next-line\n} &SxProps;\nconst ScreenErrorFallback = (props: Props) => {\n//highlight-next-line\n const { title, body } = props;\n//highlight-next-line\n const { viewStyle } = useSx(props);\n return (\n \n"})}),"\n",(0,s.jsx)(n.p,{children:"There are a few things to keep in mind."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"useSx"})," includes ",(0,s.jsx)(n.code,{children:"props.style"})," in the automatically created style output.\nThere is no need to add ",(0,s.jsx)(n.code,{children:"style"})," as a prop to ",(0,s.jsx)(n.code,{children:"style"})," of ",(0,s.jsx)(n.code,{children:"View"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:["Always pass all ",(0,s.jsx)(n.code,{children:"props"})," objects themselves to ",(0,s.jsx)(n.code,{children:"useSx"})," to avoid missing any properties. ",(0,s.jsx)(n.code,{children:"useSx"}),"\nProperties that are not used internally are ignored and not changed."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"viewStyle"})," can receive ",(0,s.jsx)(n.code,{children:"SxProps"})," as an argument and consider it in the result."]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"example-without-props-destruction",children:"Example without Props destruction"}),"\n",(0,s.jsxs)(n.p,{children:["If you need a style object that can control multiple views in a component's props or do not want props destruction,\nYou can define a component using the ",(0,s.jsx)(n.code,{children:"sx"})," prop as follows."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="StyledScrollView.tsx"',children:"import { PropsWithChildren, forwardRef, Ref } from 'react';\nimport { ScrollViewProps, ScrollView } from 'react-native';\nimport { SxProps, useSx } from 'react-native-themed-styled-system';\n\ntype StyledScrollViewProps = PropsWithChildren<\n {\n contentContainerSx?: SxProps;\n } & Omit &\n SxProps\n>;\nconst StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref) => {\n const { viewStyle, filteredProps } = useSx(props);\n const { viewStyle: contentContainerStyle } = useSx(props.contentContainerSx ?? {});\n return (\n \n );\n});\n\nexport { StyledScrollView };\nexport type { StyledScrollViewProps };\n"})}),"\n",(0,s.jsxs)(n.p,{children:["This is a redefinition of ",(0,s.jsx)(n.code,{children:"ScrollView"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["In addition to ",(0,s.jsx)(n.code,{children:"style"}),", ",(0,s.jsx)(n.code,{children:"ScrollView"})," has one more style prop called ",(0,s.jsx)(n.code,{children:"contentContainerStyle"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Therefore, it is accepted as a field called ",(0,s.jsx)(n.code,{children:"contentContainerSx"})," as a ",(0,s.jsx)(n.code,{children:"SxProps"})," type, and the ",(0,s.jsx)(n.code,{children:"contentContainerStyle"})," of the original ",(0,s.jsx)(n.code,{children:"ScrollViewProps"})," is created using ",(0,s.jsx)(n.code,{children:"Omit"}),".\nBe prepared for any possible bugs."]}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:["I still feel like there is a lot of code that needs to be written in this example, so I recommend improving it to a simpler Helper API.\nWe also plan to support several props of ",(0,s.jsx)(n.code,{children:"ScrollView"})," separately."]})})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>l});var s=t(6540);const o={},i=s.createContext(o);function r(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.5a6df145.js b/assets/js/runtime~main.8017d3c3.js similarity index 51% rename from assets/js/runtime~main.5a6df145.js rename to assets/js/runtime~main.8017d3c3.js index 454c5f66..c0e903de 100644 --- a/assets/js/runtime~main.5a6df145.js +++ b/assets/js/runtime~main.8017d3c3.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,t,f,r,d={},c={};function b(e){var a=c[e];if(void 0!==a)return a.exports;var t=c[e]={id:e,loaded:!1,exports:{}};return d[e].call(t.exports,t,t.exports,b),t.loaded=!0,t.exports}b.m=d,b.c=c,e=[],b.O=(a,t,f,r)=>{if(!t){var d=1/0;for(i=0;i=r)&&Object.keys(b.O).every((e=>b.O[e](t[o])))?t.splice(o--,1):(c=!1,r0&&e[i-1][2]>r;i--)e[i]=e[i-1];e[i]=[t,f,r]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var r=Object.create(null);b.r(r);var d={};a=a||[null,t({}),t([]),t(t)];for(var c=2&f&&e;"object"==typeof c&&!~a.indexOf(c);c=t(c))Object.getOwnPropertyNames(c).forEach((a=>d[a]=()=>e[a]));return d.default=()=>e,b.d(r,d),r},b.d=(e,a)=>{for(var t in a)b.o(a,t)&&!b.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,t)=>(b.f[t](e,a),a)),[])),b.u=e=>"assets/js/"+({86:"a5779411",109:"41dde417",210:"d3412f58",293:"8a54d7e4",664:"a0ae11a7",732:"ed2d995c",1282:"d290f38e",1958:"456f6c74",1972:"73664a40",2160:"5c7a5d57",2213:"93eabb04",2285:"c2cf6db2",2490:"490f117b",2711:"9e4087bc",3249:"ccc49370",3637:"489a8646",3694:"8717b14a",3854:"dfd14b97",4134:"393be207",4583:"1df93b7f",4656:"c84e8b96",4713:"3f77e242",4813:"6875c492",5094:"70680c56",5104:"9d7ed022",5557:"d9f32620",6018:"f4f34a3a",6061:"1f391b9e",6903:"f8409a7e",6969:"14eb3368",7098:"a7bd4aaa",7316:"8b9508ed",7472:"814f3328",7643:"a6aa9e1f",8209:"01a85c17",8401:"17896441",8581:"935f2afb",8609:"925b3f96",8737:"7661071f",8837:"329ec17f",9048:"a94703ab",9325:"59362658",9328:"e273c56f",9594:"0d8bbc11",9647:"5e95c892",9851:"d80de2af"}[e]||e)+"."+{86:"7aded592",109:"ef00fc84",210:"2cb2b129",293:"25add0f6",664:"7761774a",732:"ade7e97c",1282:"54e387d4",1958:"5899fb70",1972:"cbbbc541",2160:"5790db72",2213:"12347dce",2237:"9f327e60",2285:"b66a13b2",2490:"220d3283",2711:"dfabb06b",3249:"e7a3b8d3",3637:"ed4a9756",3694:"76282bff",3854:"38dd965b",4134:"8a4cb9d5",4583:"456c7e87",4656:"5e39846c",4713:"5ca2ace6",4813:"ebebfc27",5094:"2cda945e",5104:"8731995a",5533:"c717b762",5557:"bcd50476",6018:"9fcc2d7f",6061:"df3efc6a",6903:"fc16f96d",6969:"4279be9b",7098:"ad7f231a",7316:"90f6fe51",7472:"57a737d2",7643:"249e747a",8209:"deb72329",8401:"307e8fbe",8581:"ff3e2168",8609:"98ab6f47",8737:"0a70061b",8747:"a256fe95",8837:"80651d03",9048:"4183e27f",9325:"7f17ea08",9328:"e4baef9f",9594:"67a601da",9647:"d2840d6b",9851:"3ddc0956"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),f={},r="my-website:",b.l=(e,a,t,d)=>{if(f[e])f[e].push(a);else{var c,o;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{c.onerror=c.onload=null,clearTimeout(s);var r=f[e];if(delete f[e],c.parentNode&&c.parentNode.removeChild(c),r&&r.forEach((e=>e(t))),a)return a(t)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=l.bind(null,c.onerror),c.onload=l.bind(null,c.onload),o&&document.head.appendChild(c)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/react-native-styled-system/",b.gca=function(e){return e={17896441:"8401",59362658:"9325",a5779411:"86","41dde417":"109",d3412f58:"210","8a54d7e4":"293",a0ae11a7:"664",ed2d995c:"732",d290f38e:"1282","456f6c74":"1958","73664a40":"1972","5c7a5d57":"2160","93eabb04":"2213",c2cf6db2:"2285","490f117b":"2490","9e4087bc":"2711",ccc49370:"3249","489a8646":"3637","8717b14a":"3694",dfd14b97:"3854","393be207":"4134","1df93b7f":"4583",c84e8b96:"4656","3f77e242":"4713","6875c492":"4813","70680c56":"5094","9d7ed022":"5104",d9f32620:"5557",f4f34a3a:"6018","1f391b9e":"6061",f8409a7e:"6903","14eb3368":"6969",a7bd4aaa:"7098","8b9508ed":"7316","814f3328":"7472",a6aa9e1f:"7643","01a85c17":"8209","935f2afb":"8581","925b3f96":"8609","7661071f":"8737","329ec17f":"8837",a94703ab:"9048",e273c56f:"9328","0d8bbc11":"9594","5e95c892":"9647",d80de2af:"9851"}[e]||e,b.p+b.u(e)},(()=>{var e={5354:0,1869:0};b.f.j=(a,t)=>{var f=b.o(e,a)?e[a]:void 0;if(0!==f)if(f)t.push(f[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var r=new Promise(((t,r)=>f=e[a]=[t,r]));t.push(f[2]=r);var d=b.p+b.u(a),c=new Error;b.l(d,(t=>{if(b.o(e,a)&&(0!==(f=e[a])&&(e[a]=void 0),f)){var r=t&&("load"===t.type?"missing":t.type),d=t&&t.target&&t.target.src;c.message="Loading chunk "+a+" failed.\n("+r+": "+d+")",c.name="ChunkLoadError",c.type=r,c.request=d,f[1](c)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,t)=>{var f,r,d=t[0],c=t[1],o=t[2],n=0;if(d.some((a=>0!==e[a]))){for(f in c)b.o(c,f)&&(b.m[f]=c[f]);if(o)var i=o(b)}for(a&&a(t);n{"use strict";var e,a,t,r,f,d={},c={};function o(e){var a=c[e];if(void 0!==a)return a.exports;var t=c[e]={id:e,loaded:!1,exports:{}};return d[e].call(t.exports,t,t.exports,o),t.loaded=!0,t.exports}o.m=d,o.c=c,e=[],o.O=(a,t,r,f)=>{if(!t){var d=1/0;for(i=0;i=f)&&Object.keys(o.O).every((e=>o.O[e](t[b])))?t.splice(b--,1):(c=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[t,r,f]},o.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return o.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,o.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);o.r(f);var d={};a=a||[null,t({}),t([]),t(t)];for(var c=2&r&&e;"object"==typeof c&&!~a.indexOf(c);c=t(c))Object.getOwnPropertyNames(c).forEach((a=>d[a]=()=>e[a]));return d.default=()=>e,o.d(f,d),f},o.d=(e,a)=>{for(var t in a)o.o(a,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce(((a,t)=>(o.f[t](e,a),a)),[])),o.u=e=>"assets/js/"+({86:"a5779411",109:"41dde417",210:"d3412f58",293:"8a54d7e4",664:"a0ae11a7",732:"ed2d995c",1282:"d290f38e",1958:"456f6c74",1972:"73664a40",2160:"5c7a5d57",2213:"93eabb04",2285:"c2cf6db2",2490:"490f117b",2711:"9e4087bc",3249:"ccc49370",3637:"489a8646",3694:"8717b14a",3854:"dfd14b97",4134:"393be207",4583:"1df93b7f",4656:"c84e8b96",4713:"3f77e242",4813:"6875c492",5094:"70680c56",5104:"9d7ed022",5557:"d9f32620",6018:"f4f34a3a",6061:"1f391b9e",6903:"f8409a7e",6969:"14eb3368",7098:"a7bd4aaa",7316:"8b9508ed",7472:"814f3328",7643:"a6aa9e1f",8209:"01a85c17",8401:"17896441",8581:"935f2afb",8609:"925b3f96",8737:"7661071f",8837:"329ec17f",9048:"a94703ab",9325:"59362658",9328:"e273c56f",9594:"0d8bbc11",9647:"5e95c892",9851:"d80de2af"}[e]||e)+"."+{86:"7aded592",109:"ef00fc84",210:"2cb2b129",293:"25add0f6",664:"7761774a",732:"ade7e97c",1282:"54e387d4",1958:"5899fb70",1972:"cbbbc541",2160:"5790db72",2213:"12347dce",2237:"9f327e60",2285:"b66a13b2",2490:"220d3283",2711:"dfabb06b",3249:"e7a3b8d3",3637:"ed4a9756",3694:"76282bff",3854:"38dd965b",4134:"8a4cb9d5",4583:"456c7e87",4656:"5e39846c",4713:"8a861c24",4813:"ebebfc27",5094:"2cda945e",5104:"8731995a",5533:"c717b762",5557:"bcd50476",6018:"9fcc2d7f",6061:"df3efc6a",6903:"fc16f96d",6969:"4279be9b",7098:"ad7f231a",7316:"90f6fe51",7472:"57a737d2",7643:"249e747a",8209:"deb72329",8401:"307e8fbe",8581:"ff3e2168",8609:"98ab6f47",8737:"0a70061b",8747:"a256fe95",8837:"80651d03",9048:"4183e27f",9325:"7f17ea08",9328:"e4baef9f",9594:"67a601da",9647:"d2840d6b",9851:"3ddc0956"}[e]+".js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},f="my-website:",o.l=(e,a,t,d)=>{if(r[e])r[e].push(a);else{var c,b;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{c.onerror=c.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],c.parentNode&&c.parentNode.removeChild(c),f&&f.forEach((e=>e(t))),a)return a(t)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=l.bind(null,c.onerror),c.onload=l.bind(null,c.onload),b&&document.head.appendChild(c)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.p="/react-native-styled-system/",o.gca=function(e){return e={17896441:"8401",59362658:"9325",a5779411:"86","41dde417":"109",d3412f58:"210","8a54d7e4":"293",a0ae11a7:"664",ed2d995c:"732",d290f38e:"1282","456f6c74":"1958","73664a40":"1972","5c7a5d57":"2160","93eabb04":"2213",c2cf6db2:"2285","490f117b":"2490","9e4087bc":"2711",ccc49370:"3249","489a8646":"3637","8717b14a":"3694",dfd14b97:"3854","393be207":"4134","1df93b7f":"4583",c84e8b96:"4656","3f77e242":"4713","6875c492":"4813","70680c56":"5094","9d7ed022":"5104",d9f32620:"5557",f4f34a3a:"6018","1f391b9e":"6061",f8409a7e:"6903","14eb3368":"6969",a7bd4aaa:"7098","8b9508ed":"7316","814f3328":"7472",a6aa9e1f:"7643","01a85c17":"8209","935f2afb":"8581","925b3f96":"8609","7661071f":"8737","329ec17f":"8837",a94703ab:"9048",e273c56f:"9328","0d8bbc11":"9594","5e95c892":"9647",d80de2af:"9851"}[e]||e,o.p+o.u(e)},(()=>{var e={5354:0,1869:0};o.f.j=(a,t)=>{var r=o.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var f=new Promise(((t,f)=>r=e[a]=[t,f]));t.push(r[2]=f);var d=o.p+o.u(a),c=new Error;o.l(d,(t=>{if(o.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var f=t&&("load"===t.type?"missing":t.type),d=t&&t.target&&t.target.src;c.message="Loading chunk "+a+" failed.\n("+f+": "+d+")",c.name="ChunkLoadError",c.type=f,c.request=d,r[1](c)}}),"chunk-"+a,a)}},o.O.j=a=>0===e[a];var a=(a,t)=>{var r,f,d=t[0],c=t[1],b=t[2],n=0;if(d.some((a=>0!==e[a]))){for(r in c)o.o(c,r)&&(o.m[r]=c[r]);if(b)var i=b(o)}for(a&&a(t);n Archive | React Native Styled System - + diff --git a/blog/first-blog-post/index.html b/blog/first-blog-post/index.html index 683b7bd5..2416ed66 100644 --- a/blog/first-blog-post/index.html +++ b/blog/first-blog-post/index.html @@ -5,7 +5,7 @@ First Blog Post | React Native Styled System - + diff --git a/blog/index.html b/blog/index.html index fd882d1b..12d830d7 100644 --- a/blog/index.html +++ b/blog/index.html @@ -5,7 +5,7 @@ Blog | React Native Styled System - + diff --git a/blog/long-blog-post/index.html b/blog/long-blog-post/index.html index 54e942ed..97130a15 100644 --- a/blog/long-blog-post/index.html +++ b/blog/long-blog-post/index.html @@ -5,7 +5,7 @@ Long Blog Post | React Native Styled System - + diff --git a/blog/mdx-blog-post/index.html b/blog/mdx-blog-post/index.html index 701791ef..efea46bb 100644 --- a/blog/mdx-blog-post/index.html +++ b/blog/mdx-blog-post/index.html @@ -5,7 +5,7 @@ MDX Blog Post | React Native Styled System - + diff --git a/blog/tags/docusaurus/index.html b/blog/tags/docusaurus/index.html index b48f0436..f8291bf8 100644 --- a/blog/tags/docusaurus/index.html +++ b/blog/tags/docusaurus/index.html @@ -5,7 +5,7 @@ 4 posts tagged with "docusaurus" | React Native Styled System - + diff --git a/blog/tags/facebook/index.html b/blog/tags/facebook/index.html index f0ff76a8..cd525bc1 100644 --- a/blog/tags/facebook/index.html +++ b/blog/tags/facebook/index.html @@ -5,7 +5,7 @@ One post tagged with "facebook" | React Native Styled System - + diff --git a/blog/tags/hello/index.html b/blog/tags/hello/index.html index 1c53b3ac..d68770f4 100644 --- a/blog/tags/hello/index.html +++ b/blog/tags/hello/index.html @@ -5,7 +5,7 @@ 2 posts tagged with "hello" | React Native Styled System - + diff --git a/blog/tags/hola/index.html b/blog/tags/hola/index.html index d669d779..79cecd23 100644 --- a/blog/tags/hola/index.html +++ b/blog/tags/hola/index.html @@ -5,7 +5,7 @@ One post tagged with "hola" | React Native Styled System - + diff --git a/blog/tags/index.html b/blog/tags/index.html index 04ae6776..259f3429 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -5,7 +5,7 @@ Tags | React Native Styled System - + diff --git a/blog/welcome/index.html b/blog/welcome/index.html index 99c45260..fc8c96b4 100644 --- a/blog/welcome/index.html +++ b/blog/welcome/index.html @@ -5,7 +5,7 @@ Welcome | React Native Styled System - + diff --git a/docs/category/usage/index.html b/docs/category/usage/index.html index 2c442dad..26bd6da4 100644 --- a/docs/category/usage/index.html +++ b/docs/category/usage/index.html @@ -5,7 +5,7 @@ Usage | React Native Styled System - + diff --git a/docs/intro/index.html b/docs/intro/index.html index 25b77cd8..4af07b01 100644 --- a/docs/intro/index.html +++ b/docs/intro/index.html @@ -5,7 +5,7 @@ Getting Started | React Native Styled System - + diff --git a/docs/usage/component/index.html b/docs/usage/component/index.html index ae82951c..0f94b5cd 100644 --- a/docs/usage/component/index.html +++ b/docs/usage/component/index.html @@ -5,7 +5,7 @@ Component | React Native Styled System - + @@ -40,6 +40,16 @@

Edit this page
+ +

Example without Props destruction​

+

If you need a style object that can control multiple views in a component's props or do not want props destruction, +You can define a component using the sx prop as follows.

+
StyledScrollView.tsx
import { PropsWithChildren, forwardRef, Ref } from 'react';
import { ScrollViewProps, ScrollView } from 'react-native';
import { SxProps, useSx } from 'react-native-themed-styled-system';

type StyledScrollViewProps = PropsWithChildren<
  {
    contentContainerSx?: SxProps;
  } & Omit<ScrollViewProps, 'contentContainerStyle'> &
    SxProps
>;
const StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref<ScrollView>) => {
  const { viewStyle, filteredProps } = useSx(props);
  const { viewStyle: contentContainerStyle } = useSx(props.contentContainerSx ?? {});
  return (
    <ScrollView ref={ref} style={viewStyle()} contentContainerStyle={contentContainerStyle()} {...filteredProps} />
  );
});

export { StyledScrollView };
export type { StyledScrollViewProps };
+

This is a redefinition of ScrollView.

+

In addition to style, ScrollView has one more style prop called contentContainerStyle.

+

Therefore, it is accepted as a field called contentContainerSx as a SxProps type, and the contentContainerStyle of the original ScrollViewProps is created using Omit. +Be prepared for any possible bugs.

+
info

I still feel like there is a lot of code that needs to be written in this example, so I recommend improving it to a simpler Helper API. +We also plan to support several props of ScrollView separately.

\ No newline at end of file diff --git a/docs/usage/configuration/index.html b/docs/usage/configuration/index.html index 58228ecc..44276457 100644 --- a/docs/usage/configuration/index.html +++ b/docs/usage/configuration/index.html @@ -5,7 +5,7 @@ Settings | React Native Styled System - + diff --git a/docs/usage/install/index.html b/docs/usage/install/index.html index 9410b26d..7b052e30 100644 --- a/docs/usage/install/index.html +++ b/docs/usage/install/index.html @@ -5,7 +5,7 @@ Install | React Native Styled System - + diff --git a/docs/usage/style-parsing/index.html b/docs/usage/style-parsing/index.html index c853b84c..6185df3f 100644 --- a/docs/usage/style-parsing/index.html +++ b/docs/usage/style-parsing/index.html @@ -5,7 +5,7 @@ Pass styles and parsing priorities | React Native Styled System - + diff --git a/docs/usage/sx-props/index.html b/docs/usage/sx-props/index.html index 61b3a121..d1c841c3 100644 --- a/docs/usage/sx-props/index.html +++ b/docs/usage/sx-props/index.html @@ -5,7 +5,7 @@ SxProps References | React Native Styled System - + diff --git a/docs/usage/token/index.html b/docs/usage/token/index.html index 9a5d3b1c..f9218c84 100644 --- a/docs/usage/token/index.html +++ b/docs/usage/token/index.html @@ -5,7 +5,7 @@ Theme Token References | React Native Styled System - + diff --git a/docs/usage/typescript/index.html b/docs/usage/typescript/index.html index abbac601..39ed66f7 100644 --- a/docs/usage/typescript/index.html +++ b/docs/usage/typescript/index.html @@ -5,7 +5,7 @@ TypeScript | React Native Styled System - + diff --git a/index.html b/index.html index 97346e39..69fbf086 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ React Native Styled System | React Native Styled System - + diff --git a/ko/404.html b/ko/404.html index bb99b09f..8f248ea9 100644 --- a/ko/404.html +++ b/ko/404.html @@ -5,7 +5,7 @@ 페이지를 찾을 수 없습니다. | React Native Styled System - + diff --git a/ko/assets/js/048b097b.2a07c94b.js b/ko/assets/js/048b097b.2a07c94b.js deleted file mode 100644 index 4acf6026..00000000 --- a/ko/assets/js/048b097b.2a07c94b.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[1015],{5894:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>i,metadata:()=>l,toc:()=>c});var t=s(4848),r=s(8453);const i={sidebar_position:3,title:"\ucef4\ud3ec\ub10c\ud2b8"},o="\ucef4\ud3ec\ub10c\ud2b8",l={id:"usage/component",title:"\ucef4\ud3ec\ub10c\ud2b8",description:"React Native Styled System\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c \uae30\ubcf8 Component\ub97c \ub9cc\ub4e4\uc5b4\ub450\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4.",source:"@site/i18n/ko/docusaurus-plugin-content-docs/current/usage/component.mdx",sourceDirName:"usage",slug:"/usage/component",permalink:"/react-native-styled-system/ko/docs/usage/component",draft:!1,unlisted:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/usage/component.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"\ucef4\ud3ec\ub10c\ud2b8"},sidebar:"tutorialSidebar",previous:{title:"\uc124\uc815\ud558\uae30",permalink:"/react-native-styled-system/ko/docs/usage/configuration"},next:{title:"\uc2a4\ud0c0\uc77c\uc744 \uc804\ub2ec\ud558\ub294 \ubc29\uc2dd\uacfc \ud30c\uc2f1 \uc6b0\uc120\uc21c\uc704",permalink:"/react-native-styled-system/ko/docs/usage/style-parsing"}},d={},c=[{value:"StyledView \uc608\uc2dc",id:"styledview-\uc608\uc2dc",level:2},{value:"\uae30\uc874 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9ac\ud329\ud130\ub9c1\ud558\ub294 \uc608\uc2dc",id:"\uae30\uc874-\ucef4\ud3ec\ub10c\ud2b8\ub97c-\ub9ac\ud329\ud130\ub9c1\ud558\ub294-\uc608\uc2dc",level:2},{value:"Props destruction\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \uc608\uc2dc",id:"props-destruction\uc744-\uc0ac\uc6a9\ud558\uc9c0-\uc54a\ub294-\uc608\uc2dc",level:2}];function p(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"\ucef4\ud3ec\ub10c\ud2b8",children:"\ucef4\ud3ec\ub10c\ud2b8"}),"\n",(0,t.jsx)(n.p,{children:"React Native Styled System\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c \uae30\ubcf8 Component\ub97c \ub9cc\ub4e4\uc5b4\ub450\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4."}),"\n",(0,t.jsxs)(n.p,{children:["\ub300\uc2e0, ",(0,t.jsx)(n.strong,{children:"\ub2e8\uc21c\ud558\uace0 \ud655\uc7a5\uac00\ub2a5\ud55c API\ub85c \uc9c1\uc811 \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud560 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758"}),"\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,t.jsx)(n.p,{children:"\uc8fc\ub85c \uc4f0\ub294 API\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"useSx(hook)"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"SxProps(type)"})}),"\n"]}),"\n",(0,t.jsxs)(n.h2,{id:"styledview-\uc608\uc2dc",children:[(0,t.jsx)(n.code,{children:"StyledView"})," \uc608\uc2dc"]}),"\n",(0,t.jsxs)(n.p,{children:["React Native\uc758 ",(0,t.jsx)(n.code,{children:"View"})," \ucef4\ud3ec\ub10c\ud2b8\ub97c Styled System\ucc98\ub7fc \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4\ubd05\uc2dc\ub2e4."]}),"\n",(0,t.jsxs)(n.p,{children:["\uc644\uc131\ub41c ",(0,t.jsx)(n.code,{children:"StyledView"})," \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0ac\uc6a9\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4."]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://raw.githubusercontent.com/mym0404/image-archive/master/202403131245340.png",alt:"image.png"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"\n \n \n \n \n \n\n"})}),"\n",(0,t.jsx)(n.p,{children:"\ub2e4\uc74c\uacfc \uac19\uc774 \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",metastring:'title="StyledView.tsx"',children:"import { forwardRef, Ref, PropsWithChildren } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { SxProps, useSx } from 'react-native-themed-styled-system';\n\ntype StyledViewProps = PropsWithChildren;\nconst StyledView = forwardRef((props: StyledViewProps, ref: Ref) => {\n const { viewStyle, filteredProps } = useSx(props);\n return ;\n});\n\nexport { StyledView };\nexport type { StyledViewProps };\n"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"useSx"}),"\ub294 ",(0,t.jsx)(n.code,{children:"SxProps"}),"\ub97c \ubc1b\uc544 \uc774\ub97c ",(0,t.jsx)(n.code,{children:"ViewStyle"}),"\ub85c \ubcc0\ud658\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"useSx"}),"\uac00 \ubc18\ud658\ud558\ub294 ",(0,t.jsx)(n.code,{children:"viewStyle"})," \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc6d0\ud558\ub294 \ubdf0\uc758 ",(0,t.jsx)(n.code,{children:"style"})," prop\uc5d0 \uc804\ub2ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,t.jsxs)(n.admonition,{type:"warning",children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"SxProps"})," \ud0c0\uc785\uc744 \ud3ec\ud568\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc758 prop type\uc740 ",(0,t.jsx)(n.code,{children:"SxProps"}),"\uc5d0 \ud3ec\ud568\ub418\ub294 \ud0a4\ub4e4\uc774 \ubaa8\ub450 \ud3ec\ud568\ub429\ub2c8\ub2e4."]}),(0,t.jsxs)(n.p,{children:["\ub530\ub77c\uc11c \uae30\uc874\uc5d0 ",(0,t.jsx)(n.code,{children:"{...props}"})," \ucc98\ub7fc object destruction\uc744 \ud1b5\ud574 \ubd80\ubaa8\ub85c\ubd80\ud130\uc758 prop\uc774 \ubaa8\ub450 \uc804\ub2ec\ub418\ub294 \uacbd\uc6b0 \ud0a4\uac00 \uacb9\uce58\uc9c0\n\uc54a\ub294\uc9c0 \uc8fc\uc758\uac00 \ud544\uc694\ud569\ub2c8\ub2e4."]}),(0,t.jsxs)(n.p,{children:["\ub610\ud55c ",(0,t.jsx)(n.code,{children:"props"}),"\ub97c \uadf8\ub300\ub85c \uc4f8 \uc2dc, ",(0,t.jsx)(n.code,{children:"style"}),"\ubcf4\ub2e4 \ud56d\uc0c1 \uc774\uc804\uc5d0 \uc640\uc11c ",(0,t.jsx)(n.code,{children:"viewStyle()"}),"\uc758 ",(0,t.jsx)(n.code,{children:"style"}),"\uc744 \ub36e\uc5b4\uc50c\uc6b0\uc9c0 \uc54a\uac8c \ud574\uc57c\ud569\ub2c8\ub2e4."]}),(0,t.jsxs)(n.p,{children:["\uc774\uac83\uc744 \ubc29\uc9c0\ud558\ub824\uba74 ",(0,t.jsx)(n.code,{children:"useSx"}),"\uc758 \ubc18\ud658\uac12 \uc911 ",(0,t.jsx)(n.code,{children:"filteredProps"}),"\ub97c \uc0ac\uc6a9\ud558\uba74 \ub429\ub2c8\ub2e4."]}),(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"filteredProps"}),"\ub294 ",(0,t.jsx)(n.code,{children:"style"}),", ",(0,t.jsx)(n.code,{children:"sx"}),", ",(0,t.jsx)(n.code,{children:"w"}),", ",(0,t.jsx)(n.code,{children:"width"}),"\ub4f1 \uc2a4\ud0c0\uc77c\uacfc \uad00\ub828\ub41c \ud544\ub4dc\ub4e4\uc744 \ubaa8\ub450 \ud544\ud130\ub9c1\ud55c \uc0c8\ub85c\uc6b4 prop\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4."]})]}),"\n",(0,t.jsx)(n.h2,{id:"\uae30\uc874-\ucef4\ud3ec\ub10c\ud2b8\ub97c-\ub9ac\ud329\ud130\ub9c1\ud558\ub294-\uc608\uc2dc",children:"\uae30\uc874 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9ac\ud329\ud130\ub9c1\ud558\ub294 \uc608\uc2dc"}),"\n",(0,t.jsx)(n.p,{children:"\ub2e4\uc74c\uacfc \uac19\uc774 \uae30\uc874\uc5d0 \uc788\ub358 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9ac\ud329\ud130\ub9c1 \ud558\ub294 \ubc29\uc2dd\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n};\nconst ExistComponent = ({\n style,\n title,\n body,\n}: Props) => {\n return (\n \n...\n"})}),"\n",(0,t.jsx)(n.p,{children:"\uc774\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\ud569\ub2c8\ub2e4."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n// highlight-next-line\n} & SxProps;\nconst ScreenErrorFallback = (props: Props) => {\n// highlight-next-line\n const { title, body } = props;\n// highlight-next-line\n const { viewStyle } = useSx(props);\n return (\n \n"})}),"\n",(0,t.jsx)(n.p,{children:"\ub208\uc5ec\uaca8 \ubcfc \uc810\uc774 \uba87\uac00\uc9c0 \uc788\uc2b5\ub2c8\ub2e4."}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"useSx"}),"\ub294 ",(0,t.jsx)(n.code,{children:"props.style"}),"\ub3c4 \uc790\ub3d9\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc9c0\ub294 style\uc758 \uacb0\uacfc\ubb3c\uc5d0 \ud3ec\ud568\ud558\uae30 \ub54c\ubb38\uc5d0\n",(0,t.jsx)(n.code,{children:"View"}),"\uc758 ",(0,t.jsx)(n.code,{children:"style"}),"\uc5d0 prop\uc73c\ub85c \ub4e4\uc5b4\uc628 ",(0,t.jsx)(n.code,{children:"style"}),"\ub3c4 \uac19\uc774 \ub123\uc5b4\uc904 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4."]}),"\n",(0,t.jsxs)(n.li,{children:["\ub204\ub77d\ub418\ub294 \uc18d\uc131\uc774 \uc5c6\uac8c \ud56d\uc0c1 \ubaa8\ub4e0 ",(0,t.jsx)(n.code,{children:"props"})," \uac1d\uccb4 \uc790\uccb4\ub97c ",(0,t.jsx)(n.code,{children:"useSx"}),"\ub85c \ub118\uae30\ub3c4\ub85d \ud569\ub2c8\ub2e4. ",(0,t.jsx)(n.code,{children:"useSx"}),"\ub294\n\ub0b4\ubd80\uc801\uc73c\ub85c \uc4f0\uc774\uc9c0 \uc54a\ub294 \uc18d\uc131\ub4e4\uc740 \ubb34\uc2dc\ud558\uace0 \ubcc0\uacbd\uc2dc\ud0a4\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"viewStyle"}),"\uc740 ",(0,t.jsx)(n.code,{children:"SxProps"}),"\ub97c \uc778\uc790\ub85c \ubc1b\uc544 \uacb0\uacfc\uc5d0 \uace0\ub824\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"props-destruction\uc744-\uc0ac\uc6a9\ud558\uc9c0-\uc54a\ub294-\uc608\uc2dc",children:"Props destruction\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \uc608\uc2dc"}),"\n",(0,t.jsxs)(n.p,{children:["\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc758 Prop\uc5d0 \uc5ec\ub7ec\uac00\uc9c0 \ubdf0\ub97c \ucee8\ud2b8\ub864\ud560 \uc218 \uc788\ub294 \uc2a4\ud0c0\uc77c \uac1d\uccb4\uac00 \ud544\uc694\ud558\uac70\ub098 Props destruction\uc744 \uc6d0\ud558\uc9c0 \uc54a\ub294 \uacbd\uc6b0,\n\ub2e4\uc74c\uacfc \uac19\uc774 ",(0,t.jsx)(n.code,{children:"sx"})," prop\uc744 \ud65c\uc6a9\ud558\uc5ec \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>l});var t=s(6540);const r={},i=t.createContext(r);function o(e){const n=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/ko/assets/js/048b097b.9e6a5cab.js b/ko/assets/js/048b097b.9e6a5cab.js new file mode 100644 index 00000000..2e8a74c7 --- /dev/null +++ b/ko/assets/js/048b097b.9e6a5cab.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[1015],{5894:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>x,frontMatter:()=>i,metadata:()=>l,toc:()=>d});var s=t(4848),r=t(8453);const i={sidebar_position:3,title:"\ucef4\ud3ec\ub10c\ud2b8"},o="\ucef4\ud3ec\ub10c\ud2b8",l={id:"usage/component",title:"\ucef4\ud3ec\ub10c\ud2b8",description:"React Native Styled System\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c \uae30\ubcf8 Component\ub97c \ub9cc\ub4e4\uc5b4\ub450\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4.",source:"@site/i18n/ko/docusaurus-plugin-content-docs/current/usage/component.mdx",sourceDirName:"usage",slug:"/usage/component",permalink:"/react-native-styled-system/ko/docs/usage/component",draft:!1,unlisted:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/usage/component.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"\ucef4\ud3ec\ub10c\ud2b8"},sidebar:"tutorialSidebar",previous:{title:"\uc124\uc815\ud558\uae30",permalink:"/react-native-styled-system/ko/docs/usage/configuration"},next:{title:"\uc2a4\ud0c0\uc77c\uc744 \uc804\ub2ec\ud558\ub294 \ubc29\uc2dd\uacfc \ud30c\uc2f1 \uc6b0\uc120\uc21c\uc704",permalink:"/react-native-styled-system/ko/docs/usage/style-parsing"}},c={},d=[{value:"StyledView \uc608\uc2dc",id:"styledview-\uc608\uc2dc",level:2},{value:"\uae30\uc874 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9ac\ud329\ud130\ub9c1\ud558\ub294 \uc608\uc2dc",id:"\uae30\uc874-\ucef4\ud3ec\ub10c\ud2b8\ub97c-\ub9ac\ud329\ud130\ub9c1\ud558\ub294-\uc608\uc2dc",level:2},{value:"Props destruction\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \uc608\uc2dc",id:"props-destruction\uc744-\uc0ac\uc6a9\ud558\uc9c0-\uc54a\ub294-\uc608\uc2dc",level:2}];function p(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"\ucef4\ud3ec\ub10c\ud2b8",children:"\ucef4\ud3ec\ub10c\ud2b8"}),"\n",(0,s.jsx)(n.p,{children:"React Native Styled System\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c \uae30\ubcf8 Component\ub97c \ub9cc\ub4e4\uc5b4\ub450\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4."}),"\n",(0,s.jsxs)(n.p,{children:["\ub300\uc2e0, ",(0,s.jsx)(n.strong,{children:"\ub2e8\uc21c\ud558\uace0 \ud655\uc7a5\uac00\ub2a5\ud55c API\ub85c \uc9c1\uc811 \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud560 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758"}),"\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,s.jsx)(n.p,{children:"\uc8fc\ub85c \uc4f0\ub294 API\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4."}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"useSx(hook)"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"SxProps(type)"})}),"\n"]}),"\n",(0,s.jsxs)(n.h2,{id:"styledview-\uc608\uc2dc",children:[(0,s.jsx)(n.code,{children:"StyledView"})," \uc608\uc2dc"]}),"\n",(0,s.jsxs)(n.p,{children:["React Native\uc758 ",(0,s.jsx)(n.code,{children:"View"})," \ucef4\ud3ec\ub10c\ud2b8\ub97c Styled System\ucc98\ub7fc \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4\ubd05\uc2dc\ub2e4."]}),"\n",(0,s.jsxs)(n.p,{children:["\uc644\uc131\ub41c ",(0,s.jsx)(n.code,{children:"StyledView"})," \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0ac\uc6a9\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://raw.githubusercontent.com/mym0404/image-archive/master/202403131245340.png",alt:"image.png"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"\n \n \n \n \n \n\n"})}),"\n",(0,s.jsx)(n.p,{children:"\ub2e4\uc74c\uacfc \uac19\uc774 \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="StyledView.tsx"',children:"import { forwardRef, Ref, PropsWithChildren } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { SxProps, useSx } from 'react-native-themed-styled-system';\n\ntype StyledViewProps = PropsWithChildren;\nconst StyledView = forwardRef((props: StyledViewProps, ref: Ref) => {\n const { viewStyle, filteredProps } = useSx(props);\n return ;\n});\n\nexport { StyledView };\nexport type { StyledViewProps };\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"useSx"}),"\ub294 ",(0,s.jsx)(n.code,{children:"SxProps"}),"\ub97c \ubc1b\uc544 \uc774\ub97c ",(0,s.jsx)(n.code,{children:"ViewStyle"}),"\ub85c \ubcc0\ud658\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"useSx"}),"\uac00 \ubc18\ud658\ud558\ub294 ",(0,s.jsx)(n.code,{children:"viewStyle"})," \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc6d0\ud558\ub294 \ubdf0\uc758 ",(0,s.jsx)(n.code,{children:"style"})," prop\uc5d0 \uc804\ub2ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.admonition,{type:"warning",children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"SxProps"})," \ud0c0\uc785\uc744 \ud3ec\ud568\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc758 prop type\uc740 ",(0,s.jsx)(n.code,{children:"SxProps"}),"\uc5d0 \ud3ec\ud568\ub418\ub294 \ud0a4\ub4e4\uc774 \ubaa8\ub450 \ud3ec\ud568\ub429\ub2c8\ub2e4."]}),(0,s.jsxs)(n.p,{children:["\ub530\ub77c\uc11c \uae30\uc874\uc5d0 ",(0,s.jsx)(n.code,{children:"{...props}"})," \ucc98\ub7fc object destruction\uc744 \ud1b5\ud574 \ubd80\ubaa8\ub85c\ubd80\ud130\uc758 prop\uc774 \ubaa8\ub450 \uc804\ub2ec\ub418\ub294 \uacbd\uc6b0 \ud0a4\uac00 \uacb9\uce58\uc9c0\n\uc54a\ub294\uc9c0 \uc8fc\uc758\uac00 \ud544\uc694\ud569\ub2c8\ub2e4."]}),(0,s.jsxs)(n.p,{children:["\ub610\ud55c ",(0,s.jsx)(n.code,{children:"props"}),"\ub97c \uadf8\ub300\ub85c \uc4f8 \uc2dc, ",(0,s.jsx)(n.code,{children:"style"}),"\ubcf4\ub2e4 \ud56d\uc0c1 \uc774\uc804\uc5d0 \uc640\uc11c ",(0,s.jsx)(n.code,{children:"viewStyle()"}),"\uc758 ",(0,s.jsx)(n.code,{children:"style"}),"\uc744 \ub36e\uc5b4\uc50c\uc6b0\uc9c0 \uc54a\uac8c \ud574\uc57c\ud569\ub2c8\ub2e4."]}),(0,s.jsxs)(n.p,{children:["\uc774\uac83\uc744 \ubc29\uc9c0\ud558\ub824\uba74 ",(0,s.jsx)(n.code,{children:"useSx"}),"\uc758 \ubc18\ud658\uac12 \uc911 ",(0,s.jsx)(n.code,{children:"filteredProps"}),"\ub97c \uc0ac\uc6a9\ud558\uba74 \ub429\ub2c8\ub2e4."]}),(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"filteredProps"}),"\ub294 ",(0,s.jsx)(n.code,{children:"style"}),", ",(0,s.jsx)(n.code,{children:"sx"}),", ",(0,s.jsx)(n.code,{children:"w"}),", ",(0,s.jsx)(n.code,{children:"width"}),"\ub4f1 \uc2a4\ud0c0\uc77c\uacfc \uad00\ub828\ub41c \ud544\ub4dc\ub4e4\uc744 \ubaa8\ub450 \ud544\ud130\ub9c1\ud55c \uc0c8\ub85c\uc6b4 prop\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4."]})]}),"\n",(0,s.jsx)(n.h2,{id:"\uae30\uc874-\ucef4\ud3ec\ub10c\ud2b8\ub97c-\ub9ac\ud329\ud130\ub9c1\ud558\ub294-\uc608\uc2dc",children:"\uae30\uc874 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9ac\ud329\ud130\ub9c1\ud558\ub294 \uc608\uc2dc"}),"\n",(0,s.jsx)(n.p,{children:"\ub2e4\uc74c\uacfc \uac19\uc774 \uae30\uc874\uc5d0 \uc788\ub358 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9ac\ud329\ud130\ub9c1 \ud558\ub294 \ubc29\uc2dd\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n};\nconst ExistComponent = ({\n style,\n title,\n body,\n}: Props) => {\n return (\n \n...\n"})}),"\n",(0,s.jsx)(n.p,{children:"\uc774\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\ud569\ub2c8\ub2e4."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n// highlight-next-line\n} & SxProps;\nconst ScreenErrorFallback = (props: Props) => {\n// highlight-next-line\n const { title, body } = props;\n// highlight-next-line\n const { viewStyle } = useSx(props);\n return (\n \n"})}),"\n",(0,s.jsx)(n.p,{children:"\ub208\uc5ec\uaca8 \ubcfc \uc810\uc774 \uba87\uac00\uc9c0 \uc788\uc2b5\ub2c8\ub2e4."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"useSx"}),"\ub294 ",(0,s.jsx)(n.code,{children:"props.style"}),"\ub3c4 \uc790\ub3d9\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc9c0\ub294 style\uc758 \uacb0\uacfc\ubb3c\uc5d0 \ud3ec\ud568\ud558\uae30 \ub54c\ubb38\uc5d0\n",(0,s.jsx)(n.code,{children:"View"}),"\uc758 ",(0,s.jsx)(n.code,{children:"style"}),"\uc5d0 prop\uc73c\ub85c \ub4e4\uc5b4\uc628 ",(0,s.jsx)(n.code,{children:"style"}),"\ub3c4 \uac19\uc774 \ub123\uc5b4\uc904 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.li,{children:["\ub204\ub77d\ub418\ub294 \uc18d\uc131\uc774 \uc5c6\uac8c \ud56d\uc0c1 \ubaa8\ub4e0 ",(0,s.jsx)(n.code,{children:"props"})," \uac1d\uccb4 \uc790\uccb4\ub97c ",(0,s.jsx)(n.code,{children:"useSx"}),"\ub85c \ub118\uae30\ub3c4\ub85d \ud569\ub2c8\ub2e4. ",(0,s.jsx)(n.code,{children:"useSx"}),"\ub294\n\ub0b4\ubd80\uc801\uc73c\ub85c \uc4f0\uc774\uc9c0 \uc54a\ub294 \uc18d\uc131\ub4e4\uc740 \ubb34\uc2dc\ud558\uace0 \ubcc0\uacbd\uc2dc\ud0a4\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"viewStyle"}),"\uc740 ",(0,s.jsx)(n.code,{children:"SxProps"}),"\ub97c \uc778\uc790\ub85c \ubc1b\uc544 \uacb0\uacfc\uc5d0 \uace0\ub824\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"props-destruction\uc744-\uc0ac\uc6a9\ud558\uc9c0-\uc54a\ub294-\uc608\uc2dc",children:"Props destruction\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \uc608\uc2dc"}),"\n",(0,s.jsxs)(n.p,{children:["\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc758 Prop\uc5d0 \uc5ec\ub7ec\uac00\uc9c0 \ubdf0\ub97c \ucee8\ud2b8\ub864\ud560 \uc218 \uc788\ub294 \uc2a4\ud0c0\uc77c \uac1d\uccb4\uac00 \ud544\uc694\ud558\uac70\ub098 Props destruction\uc744 \uc6d0\ud558\uc9c0 \uc54a\ub294 \uacbd\uc6b0,\n\ub2e4\uc74c\uacfc \uac19\uc774 ",(0,s.jsx)(n.code,{children:"sx"})," prop\uc744 \ud65c\uc6a9\ud558\uc5ec \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="StyledScrollView.tsx"',children:"import { PropsWithChildren, forwardRef, Ref } from 'react';\nimport { ScrollViewProps, ScrollView } from 'react-native';\nimport { SxProps, useSx } from 'react-native-themed-styled-system';\n\ntype StyledScrollViewProps = PropsWithChildren<\n {\n contentContainerSx?: SxProps;\n } & Omit &\n SxProps\n>;\nconst StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref) => {\n const { viewStyle, filteredProps } = useSx(props);\n const { viewStyle: contentContainerStyle } = useSx(props.contentContainerSx ?? {});\n return (\n \n );\n});\n\nexport { StyledScrollView };\nexport type { StyledScrollViewProps };\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"ScrollView"}),"\ub97c \uc7ac\uc815\uc758\ud55c \ubc29\uc2dd\uc785\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"ScrollView"}),"\ub294 ",(0,s.jsx)(n.code,{children:"style"}),"\uacfc \ub354\ubd88\uc5b4 ",(0,s.jsx)(n.code,{children:"contentContainerStyle"}),"\ub77c\ub294 style prop\uc744 \ud55c \uac00\uc9c0 \ub354 \uac00\uc9d1\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.p,{children:["\ub530\ub77c\uc11c \uc774\ub97c ",(0,s.jsx)(n.code,{children:"contentContainerSx"})," \ub77c\ub294 \ud544\ub4dc\ub85c ",(0,s.jsx)(n.code,{children:"SxProps"}),"\ud0c0\uc785\uc73c\ub85c \ubc1b\uc544\uc8fc\uace0 \uc6d0\ub798 ",(0,s.jsx)(n.code,{children:"ScrollViewProps"}),"\uc758 ",(0,s.jsx)(n.code,{children:"contentContainerStyle"}),"\uc740 ",(0,s.jsx)(n.code,{children:"Omit"}),"\uc744 \uc774\uc6a9\ud574\n\ud639\uc2dc\ub77c\ub3c4 \ubaa8\ub97c \ubc84\uadf8\uc5d0 \ub300\ube44\ud569\ub2c8\ub2e4."]}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:["\uc544\uc9c1 \uc774 \uc608\uc2dc\ub294 \uc870\uae08 \uc791\uc131\ud574\uc57c \ud558\ub294 \ucf54\ub4dc\uac00 \ub9ce\ub2e4\uace0 \ub290\uaef4\uc838\uc11c \uc880\ub354 \ub2e8\uc21c\ud55c Helper API\ub85c \uac1c\uc120\ud558\uac70\ub098\n",(0,s.jsx)(n.code,{children:"ScrollView"}),"\uc758 \uc5ec\ub7ec Prop\ub3c4 \ub530\ub85c \uc9c0\uc6d0\uc744 \ud560 \uacc4\ud68d\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4."]})})]})}function x(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>l});var s=t(6540);const r={},i=s.createContext(r);function o(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/ko/assets/js/runtime~main.5ee05f52.js b/ko/assets/js/runtime~main.89c316d1.js similarity index 98% rename from ko/assets/js/runtime~main.5ee05f52.js rename to ko/assets/js/runtime~main.89c316d1.js index 86be0be8..581a9a04 100644 --- a/ko/assets/js/runtime~main.5ee05f52.js +++ b/ko/assets/js/runtime~main.89c316d1.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,t,r,f,c={},d={};function b(e){var a=d[e];if(void 0!==a)return a.exports;var t=d[e]={id:e,loaded:!1,exports:{}};return c[e].call(t.exports,t,t.exports,b),t.loaded=!0,t.exports}b.m=c,b.c=d,e=[],b.O=(a,t,r,f)=>{if(!t){var c=1/0;for(i=0;i=f)&&Object.keys(b.O).every((e=>b.O[e](t[o])))?t.splice(o--,1):(d=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[t,r,f]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);b.r(f);var c={};a=a||[null,t({}),t([]),t(t)];for(var d=2&r&&e;"object"==typeof d&&!~a.indexOf(d);d=t(d))Object.getOwnPropertyNames(d).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,b.d(f,c),f},b.d=(e,a)=>{for(var t in a)b.o(a,t)&&!b.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,t)=>(b.f[t](e,a),a)),[])),b.u=e=>"assets/js/"+({86:"a5779411",109:"41dde417",293:"8a54d7e4",732:"ed2d995c",913:"b6eb1aa2",1015:"048b097b",1748:"1e69db97",1785:"681500a1",1872:"a041444e",1972:"73664a40",2160:"5c7a5d57",2704:"6287a270",2711:"9e4087bc",2847:"3d87cf63",3249:"ccc49370",3358:"26bb5d86",3637:"f4f34a3a",3694:"8717b14a",4134:"393be207",4583:"1df93b7f",4813:"6875c492",5557:"d9f32620",5704:"b24931aa",5734:"9e0c064f",5828:"6faa0ec5",5989:"17e0ea3b",6061:"1f391b9e",6321:"dcad1dc8",6929:"8f2ba8cb",6969:"14eb3368",7098:"a7bd4aaa",7344:"5cc6f172",7472:"814f3328",7643:"a6aa9e1f",7649:"97d992ee",8082:"748fb901",8209:"01a85c17",8401:"17896441",8581:"935f2afb",8609:"925b3f96",8737:"7661071f",9048:"a94703ab",9325:"59362658",9328:"e273c56f",9647:"5e95c892",9899:"38bb2458"}[e]||e)+"."+{86:"1174efc1",109:"ef00fc84",293:"25add0f6",732:"3d50fb60",913:"4b775e60",1015:"2a07c94b",1748:"81f40fca",1785:"9a4565ff",1872:"5bea4acb",1972:"f8a30bee",2160:"5790db72",2237:"9f327e60",2704:"9b7c24be",2711:"dfabb06b",2847:"cae04d9d",3249:"e7a3b8d3",3358:"8886ab27",3637:"bcb36f8e",3694:"5799b99e",4134:"786ac056",4583:"456c7e87",4813:"ebebfc27",5533:"c717b762",5557:"d20ba0c8",5704:"1a046904",5734:"672e2306",5828:"2a46873e",5989:"0d0d866f",6061:"df3efc6a",6321:"ef2242e6",6929:"aa00993d",6969:"4279be9b",7098:"ad7f231a",7344:"c802319c",7472:"eb6a447d",7643:"249e747a",7649:"91979103",8082:"768bc6e9",8209:"deb72329",8401:"307e8fbe",8581:"1d535f51",8609:"0941d89c",8737:"4619ae41",8747:"a256fe95",9048:"4183e27f",9325:"5e8f3533",9328:"b1bd5e6f",9647:"d2840d6b",9899:"b1aa0833"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},f="my-website:",b.l=(e,a,t,c)=>{if(r[e])r[e].push(a);else{var d,o;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{d.onerror=d.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],d.parentNode&&d.parentNode.removeChild(d),f&&f.forEach((e=>e(t))),a)return a(t)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=l.bind(null,d.onerror),d.onload=l.bind(null,d.onload),o&&document.head.appendChild(d)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/react-native-styled-system/ko/",b.gca=function(e){return e={17896441:"8401",59362658:"9325",a5779411:"86","41dde417":"109","8a54d7e4":"293",ed2d995c:"732",b6eb1aa2:"913","048b097b":"1015","1e69db97":"1748","681500a1":"1785",a041444e:"1872","73664a40":"1972","5c7a5d57":"2160","6287a270":"2704","9e4087bc":"2711","3d87cf63":"2847",ccc49370:"3249","26bb5d86":"3358",f4f34a3a:"3637","8717b14a":"3694","393be207":"4134","1df93b7f":"4583","6875c492":"4813",d9f32620:"5557",b24931aa:"5704","9e0c064f":"5734","6faa0ec5":"5828","17e0ea3b":"5989","1f391b9e":"6061",dcad1dc8:"6321","8f2ba8cb":"6929","14eb3368":"6969",a7bd4aaa:"7098","5cc6f172":"7344","814f3328":"7472",a6aa9e1f:"7643","97d992ee":"7649","748fb901":"8082","01a85c17":"8209","935f2afb":"8581","925b3f96":"8609","7661071f":"8737",a94703ab:"9048",e273c56f:"9328","5e95c892":"9647","38bb2458":"9899"}[e]||e,b.p+b.u(e)},(()=>{var e={5354:0,1869:0};b.f.j=(a,t)=>{var r=b.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var f=new Promise(((t,f)=>r=e[a]=[t,f]));t.push(r[2]=f);var c=b.p+b.u(a),d=new Error;b.l(c,(t=>{if(b.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var f=t&&("load"===t.type?"missing":t.type),c=t&&t.target&&t.target.src;d.message="Loading chunk "+a+" failed.\n("+f+": "+c+")",d.name="ChunkLoadError",d.type=f,d.request=c,r[1](d)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,t)=>{var r,f,c=t[0],d=t[1],o=t[2],n=0;if(c.some((a=>0!==e[a]))){for(r in d)b.o(d,r)&&(b.m[r]=d[r]);if(o)var i=o(b)}for(a&&a(t);n{"use strict";var e,a,t,r,f,c={},d={};function b(e){var a=d[e];if(void 0!==a)return a.exports;var t=d[e]={id:e,loaded:!1,exports:{}};return c[e].call(t.exports,t,t.exports,b),t.loaded=!0,t.exports}b.m=c,b.c=d,e=[],b.O=(a,t,r,f)=>{if(!t){var c=1/0;for(i=0;i=f)&&Object.keys(b.O).every((e=>b.O[e](t[o])))?t.splice(o--,1):(d=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[t,r,f]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);b.r(f);var c={};a=a||[null,t({}),t([]),t(t)];for(var d=2&r&&e;"object"==typeof d&&!~a.indexOf(d);d=t(d))Object.getOwnPropertyNames(d).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,b.d(f,c),f},b.d=(e,a)=>{for(var t in a)b.o(a,t)&&!b.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,t)=>(b.f[t](e,a),a)),[])),b.u=e=>"assets/js/"+({86:"a5779411",109:"41dde417",293:"8a54d7e4",732:"ed2d995c",913:"b6eb1aa2",1015:"048b097b",1748:"1e69db97",1785:"681500a1",1872:"a041444e",1972:"73664a40",2160:"5c7a5d57",2704:"6287a270",2711:"9e4087bc",2847:"3d87cf63",3249:"ccc49370",3358:"26bb5d86",3637:"f4f34a3a",3694:"8717b14a",4134:"393be207",4583:"1df93b7f",4813:"6875c492",5557:"d9f32620",5704:"b24931aa",5734:"9e0c064f",5828:"6faa0ec5",5989:"17e0ea3b",6061:"1f391b9e",6321:"dcad1dc8",6929:"8f2ba8cb",6969:"14eb3368",7098:"a7bd4aaa",7344:"5cc6f172",7472:"814f3328",7643:"a6aa9e1f",7649:"97d992ee",8082:"748fb901",8209:"01a85c17",8401:"17896441",8581:"935f2afb",8609:"925b3f96",8737:"7661071f",9048:"a94703ab",9325:"59362658",9328:"e273c56f",9647:"5e95c892",9899:"38bb2458"}[e]||e)+"."+{86:"1174efc1",109:"ef00fc84",293:"25add0f6",732:"3d50fb60",913:"4b775e60",1015:"9e6a5cab",1748:"81f40fca",1785:"9a4565ff",1872:"5bea4acb",1972:"f8a30bee",2160:"5790db72",2237:"9f327e60",2704:"9b7c24be",2711:"dfabb06b",2847:"cae04d9d",3249:"e7a3b8d3",3358:"8886ab27",3637:"bcb36f8e",3694:"5799b99e",4134:"786ac056",4583:"456c7e87",4813:"ebebfc27",5533:"c717b762",5557:"d20ba0c8",5704:"1a046904",5734:"672e2306",5828:"2a46873e",5989:"0d0d866f",6061:"df3efc6a",6321:"ef2242e6",6929:"aa00993d",6969:"4279be9b",7098:"ad7f231a",7344:"c802319c",7472:"eb6a447d",7643:"249e747a",7649:"91979103",8082:"768bc6e9",8209:"deb72329",8401:"307e8fbe",8581:"1d535f51",8609:"0941d89c",8737:"4619ae41",8747:"a256fe95",9048:"4183e27f",9325:"5e8f3533",9328:"b1bd5e6f",9647:"d2840d6b",9899:"b1aa0833"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},f="my-website:",b.l=(e,a,t,c)=>{if(r[e])r[e].push(a);else{var d,o;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{d.onerror=d.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],d.parentNode&&d.parentNode.removeChild(d),f&&f.forEach((e=>e(t))),a)return a(t)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=l.bind(null,d.onerror),d.onload=l.bind(null,d.onload),o&&document.head.appendChild(d)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/react-native-styled-system/ko/",b.gca=function(e){return e={17896441:"8401",59362658:"9325",a5779411:"86","41dde417":"109","8a54d7e4":"293",ed2d995c:"732",b6eb1aa2:"913","048b097b":"1015","1e69db97":"1748","681500a1":"1785",a041444e:"1872","73664a40":"1972","5c7a5d57":"2160","6287a270":"2704","9e4087bc":"2711","3d87cf63":"2847",ccc49370:"3249","26bb5d86":"3358",f4f34a3a:"3637","8717b14a":"3694","393be207":"4134","1df93b7f":"4583","6875c492":"4813",d9f32620:"5557",b24931aa:"5704","9e0c064f":"5734","6faa0ec5":"5828","17e0ea3b":"5989","1f391b9e":"6061",dcad1dc8:"6321","8f2ba8cb":"6929","14eb3368":"6969",a7bd4aaa:"7098","5cc6f172":"7344","814f3328":"7472",a6aa9e1f:"7643","97d992ee":"7649","748fb901":"8082","01a85c17":"8209","935f2afb":"8581","925b3f96":"8609","7661071f":"8737",a94703ab:"9048",e273c56f:"9328","5e95c892":"9647","38bb2458":"9899"}[e]||e,b.p+b.u(e)},(()=>{var e={5354:0,1869:0};b.f.j=(a,t)=>{var r=b.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var f=new Promise(((t,f)=>r=e[a]=[t,f]));t.push(r[2]=f);var c=b.p+b.u(a),d=new Error;b.l(c,(t=>{if(b.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var f=t&&("load"===t.type?"missing":t.type),c=t&&t.target&&t.target.src;d.message="Loading chunk "+a+" failed.\n("+f+": "+c+")",d.name="ChunkLoadError",d.type=f,d.request=c,r[1](d)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,t)=>{var r,f,c=t[0],d=t[1],o=t[2],n=0;if(c.some((a=>0!==e[a]))){for(r in d)b.o(d,r)&&(b.m[r]=d[r]);if(o)var i=o(b)}for(a&&a(t);n 게시물 목록 | React Native Styled System - + diff --git a/ko/blog/first-blog-post/index.html b/ko/blog/first-blog-post/index.html index dfd1d673..8661c694 100644 --- a/ko/blog/first-blog-post/index.html +++ b/ko/blog/first-blog-post/index.html @@ -5,7 +5,7 @@ First Blog Post | React Native Styled System - + diff --git a/ko/blog/index.html b/ko/blog/index.html index 1f0499bb..1236e8bf 100644 --- a/ko/blog/index.html +++ b/ko/blog/index.html @@ -5,7 +5,7 @@ Blog | React Native Styled System - + diff --git a/ko/blog/long-blog-post/index.html b/ko/blog/long-blog-post/index.html index 18e4165b..2ca6ee33 100644 --- a/ko/blog/long-blog-post/index.html +++ b/ko/blog/long-blog-post/index.html @@ -5,7 +5,7 @@ Long Blog Post | React Native Styled System - + diff --git a/ko/blog/mdx-blog-post/index.html b/ko/blog/mdx-blog-post/index.html index edf1898c..ee2e52e2 100644 --- a/ko/blog/mdx-blog-post/index.html +++ b/ko/blog/mdx-blog-post/index.html @@ -5,7 +5,7 @@ MDX Blog Post | React Native Styled System - + diff --git a/ko/blog/tags/docusaurus/index.html b/ko/blog/tags/docusaurus/index.html index 8a83c74c..79bdfb0b 100644 --- a/ko/blog/tags/docusaurus/index.html +++ b/ko/blog/tags/docusaurus/index.html @@ -5,7 +5,7 @@ "docusaurus" 태그로 연결된 4개 게시물개의 게시물이 있습니다. | React Native Styled System - + diff --git a/ko/blog/tags/facebook/index.html b/ko/blog/tags/facebook/index.html index 5993979f..59641e06 100644 --- a/ko/blog/tags/facebook/index.html +++ b/ko/blog/tags/facebook/index.html @@ -5,7 +5,7 @@ "facebook" 태그로 연결된 1개 게시물개의 게시물이 있습니다. | React Native Styled System - + diff --git a/ko/blog/tags/hello/index.html b/ko/blog/tags/hello/index.html index 7a6fc32c..a325004d 100644 --- a/ko/blog/tags/hello/index.html +++ b/ko/blog/tags/hello/index.html @@ -5,7 +5,7 @@ "hello" 태그로 연결된 2개 게시물개의 게시물이 있습니다. | React Native Styled System - + diff --git a/ko/blog/tags/hola/index.html b/ko/blog/tags/hola/index.html index dec09a5a..2300a25d 100644 --- a/ko/blog/tags/hola/index.html +++ b/ko/blog/tags/hola/index.html @@ -5,7 +5,7 @@ "hola" 태그로 연결된 1개 게시물개의 게시물이 있습니다. | React Native Styled System - + diff --git a/ko/blog/tags/index.html b/ko/blog/tags/index.html index cb0d20c5..a3de153e 100644 --- a/ko/blog/tags/index.html +++ b/ko/blog/tags/index.html @@ -5,7 +5,7 @@ 태그 | React Native Styled System - + diff --git a/ko/blog/welcome/index.html b/ko/blog/welcome/index.html index 5eef4773..37163fc0 100644 --- a/ko/blog/welcome/index.html +++ b/ko/blog/welcome/index.html @@ -5,7 +5,7 @@ Welcome | React Native Styled System - + diff --git a/ko/docs/category/usage/index.html b/ko/docs/category/usage/index.html index 1ef0a4bc..bb55f572 100644 --- a/ko/docs/category/usage/index.html +++ b/ko/docs/category/usage/index.html @@ -5,7 +5,7 @@ 사용법 | React Native Styled System - + diff --git a/ko/docs/intro/index.html b/ko/docs/intro/index.html index d6713a68..ace85477 100644 --- a/ko/docs/intro/index.html +++ b/ko/docs/intro/index.html @@ -5,7 +5,7 @@ 시작하기 | React Native Styled System - + diff --git a/ko/docs/usage/component/index.html b/ko/docs/usage/component/index.html index 46062e4f..b04d0d4b 100644 --- a/ko/docs/usage/component/index.html +++ b/ko/docs/usage/component/index.html @@ -5,7 +5,7 @@ 컴포넌트 | React Native Styled System - + @@ -43,6 +43,13 @@

Props destruction을 사용하지 않는 예시​

한 컴포넌트의 Prop에 여러가지 뷰를 컨트롤할 수 있는 스타일 객체가 필요하거나 Props destruction을 원하지 않는 경우, -다음과 같이 sx prop을 활용하여 컴포넌트를 정의할 수 있습니다.

+다음과 같이 sx prop을 활용하여 컴포넌트를 정의할 수 있습니다.

+
StyledScrollView.tsx
import { PropsWithChildren, forwardRef, Ref } from 'react';
import { ScrollViewProps, ScrollView } from 'react-native';
import { SxProps, useSx } from 'react-native-themed-styled-system';

type StyledScrollViewProps = PropsWithChildren<
  {
    contentContainerSx?: SxProps;
  } & Omit<ScrollViewProps, 'contentContainerStyle'> &
    SxProps
>;
const StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref<ScrollView>) => {
  const { viewStyle, filteredProps } = useSx(props);
  const { viewStyle: contentContainerStyle } = useSx(props.contentContainerSx ?? {});
  return (
    <ScrollView ref={ref} style={viewStyle()} contentContainerStyle={contentContainerStyle()} {...filteredProps} />
  );
});

export { StyledScrollView };
export type { StyledScrollViewProps };
+

ScrollView를 재정의한 방식입니다.

+

ScrollView는 style과 더불어 contentContainerStyle라는 style prop을 한 가지 더 가집니다.

+

따라서 이를 contentContainerSx 라는 필드로 SxProps타입으로 받아주고 원래 ScrollViewProps의 contentContainerStyle은 Omit을 이용해 +혹시라도 모를 버그에 대비합니다.

+
정보

아직 이 예시는 조금 작성해야 하는 코드가 많다고 느껴져서 좀더 단순한 Helper API로 개선하거나 +ScrollView의 여러 Prop도 따로 지원을 할 계획을 가지고 있습니다.

\ No newline at end of file diff --git a/ko/docs/usage/configuration/index.html b/ko/docs/usage/configuration/index.html index 45f0ef4e..a14c5537 100644 --- a/ko/docs/usage/configuration/index.html +++ b/ko/docs/usage/configuration/index.html @@ -5,7 +5,7 @@ 설정하기 | React Native Styled System - + diff --git a/ko/docs/usage/install/index.html b/ko/docs/usage/install/index.html index 9b41101d..99f03071 100644 --- a/ko/docs/usage/install/index.html +++ b/ko/docs/usage/install/index.html @@ -5,7 +5,7 @@ 설치하기 | React Native Styled System - + diff --git a/ko/docs/usage/style-parsing/index.html b/ko/docs/usage/style-parsing/index.html index 19641698..472d7ec1 100644 --- a/ko/docs/usage/style-parsing/index.html +++ b/ko/docs/usage/style-parsing/index.html @@ -5,7 +5,7 @@ 스타일을 전달하는 방식과 파싱 우선순위 | React Native Styled System - + diff --git a/ko/docs/usage/sx-props/index.html b/ko/docs/usage/sx-props/index.html index eae9c112..a2671918 100644 --- a/ko/docs/usage/sx-props/index.html +++ b/ko/docs/usage/sx-props/index.html @@ -5,7 +5,7 @@ SxProps References | React Native Styled System - + diff --git a/ko/docs/usage/token/index.html b/ko/docs/usage/token/index.html index da8c3e29..c92fa89d 100644 --- a/ko/docs/usage/token/index.html +++ b/ko/docs/usage/token/index.html @@ -5,7 +5,7 @@ Theme Token References | React Native Styled System - + diff --git a/ko/docs/usage/typescript/index.html b/ko/docs/usage/typescript/index.html index 305f7670..468d73c6 100644 --- a/ko/docs/usage/typescript/index.html +++ b/ko/docs/usage/typescript/index.html @@ -5,7 +5,7 @@ TypeScript | React Native Styled System - + diff --git a/ko/index.html b/ko/index.html index 96fb9f7a..d66501ee 100644 --- a/ko/index.html +++ b/ko/index.html @@ -5,7 +5,7 @@ React Native Styled System | React Native Styled System - + diff --git a/ko/markdown-page/index.html b/ko/markdown-page/index.html index 1396e87b..d2905fdd 100644 --- a/ko/markdown-page/index.html +++ b/ko/markdown-page/index.html @@ -5,7 +5,7 @@ Markdown page example | React Native Styled System - + diff --git a/markdown-page/index.html b/markdown-page/index.html index 1b48fb68..bea882ad 100644 --- a/markdown-page/index.html +++ b/markdown-page/index.html @@ -5,7 +5,7 @@ Markdown page example | React Native Styled System - +