https://reactnative.cn/assets/js/1960ca85.fc56c548.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["13231"],{54389(e,t,n){n.r(t),n.d(t,{metadata:()=>i,default:()=>h,frontMatter:()=>s,contentTitle:()=>d,toc:()=>o,assets:()=>a});var i=JSON.parse('{"id":"intro-react-native-components","title":"\u6838\u5FC3\u7EC4\u4EF6\u4E0E\u539F\u751F\u7EC4\u4EF6","description":"React Native \u4F7F\u7528\u5B8C\u5168\u539F\u751F\u7684\u7EC4\u4EF6\u6765\u6784\u5EFA\u5E94\u7528\u754C\u9762\u3002\u5C24\u5176\u65B9\u4FBF\u7684\u662F\u5B83\u5DF2\u7ECF\u5185\u7F6E\u4E86\u5927\u91CF\u76F4\u63A5\u4E0A\u624B\u53EF\u7528\u7684\u6838\u5FC3\u7EC4\u4EF6\u3002","source":"@site/versioned_docs/version-0.76/intro-react-native-components.md","sourceDirName":".","slug":"/intro-react-native-components","permalink":"/docs/0.76/intro-react-native-components","draft":false,"unlisted":false,"editUrl":"https://github.com/reactnativecn/react-native-website/blob/production/cnwebsite/../cndocs/intro-react-native-components.md","tags":[],"version":"0.76","frontMatter":{"id":"intro-react-native-components","title":"\u6838\u5FC3\u7EC4\u4EF6\u4E0E\u539F\u751F\u7EC4\u4EF6","description":"React Native \u4F7F\u7528\u5B8C\u5168\u539F\u751F\u7684\u7EC4\u4EF6\u6765\u6784\u5EFA\u5E94\u7528\u754C\u9762\u3002\u5C24\u5176\u65B9\u4FBF\u7684\u662F\u5B83\u5DF2\u7ECF\u5185\u7F6E\u4E86\u5927\u91CF\u76F4\u63A5\u4E0A\u624B\u53EF\u7528\u7684\u6838\u5FC3\u7EC4\u4EF6\u3002"},"sidebar":"docs","previous":{"title":"\u7B80\u4ECB","permalink":"/docs/0.76/getting-started"},"next":{"title":"React \u57FA\u7840","permalink":"/docs/0.76/intro-react"}}'),c=n(62540),r=n(43023);let s={id:"intro-react-native-components",title:"\u6838\u5FC3\u7EC4\u4EF6\u4E0E\u539F\u751F\u7EC4\u4EF6",de

1scription:"React Native \u4F7F\u7528\u5B8C\u5168\u539F\u751F\u7684\u7EC4\u4EF6\u6765\u6784\u5EFA\u5E94\u7528\u754C\u9762\u3002\u5C24\u5176\u65B9\u4FBF\u7684\u662F\u5B83\u5DF2\u7ECF\u5185\u7F6E\u4E86\u5927\u91CF\u76F4\u63A5\u4E0A\u624B\u53EF\u7528\u7684\u6838\u5FC3\u7EC4\u4EF6\u3002"},d,a={},o=[{value:"\u89C6\u56FE\uFF08Views\uFF09\u4E0E\u79FB\u52A8\u5F00\u53D1",id:"\u89C6\u56FEviews\u4E0E\u79FB\u52A8\u5F00\u53D1",level:2},{value:"\u539F\u751F\u7EC4\u4EF6",id:"\u539F\u751F\u7EC4\u4EF6",level:2},{value:"\u6838\u5FC3\u7EC4\u4EF6",id:"\u6838\u5FC3\u7EC4\u4EF6",level:2}];function l(e){let t={a:"a",code:"code",div:"div",h2:"h2",hr:"hr",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.R)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(t.p,{children:["React Native \u662F\u4E00\u4E2A\u4F7F\u7528",(0,c.jsx)(t.a,{href:"https://zh-hans.reactjs.org/",children:"React"}),"\u548C\u5E94\u7528\u5E73\u53F0\u7684\u539F\u751F\u529F\u80FD\u6765\u6784\u5EFA Android \u548C iOS \u5E94\u7528\u7684\u5F00\u6E90\u6846\u67B6\u3002\u901A\u8FC7 React Native\uFF0C\u60A8\u53EF\u4EE5\u4F7F\u7528 JavaScript \u6765\u8BBF\u95EE\u79FB\u52A8\u5E73\u53F0\u7684 API\uFF0C\u4EE5\u53CA\u4F7F\u7528 React \u7EC4\u4EF6\u6765\u63CF\u8FF0 UI \u7684\u5916\u89C2\u548C\u884C\u4E3A\uFF1A\u4E00\u7CFB\u5217\u53EF\u91CD\u7528\u3001\u53EF\u5D4C\u5957\u7684\u4EE3\u7801\u3002\u4F60\u53EF\u4EE5\u5728\u4E0B\u4E00\u8282\u4E86\u89E3\u66F4\u591A\u5173\u4E8E React \u7684\u4FE1\u606F\u3002\u4F46\u9996\u5148\uFF0C\u8BA9\u6211\u4EEC\u4ECB\u7ECD\u4E00\u4E0B\u7EC4\u4EF6\u5728 React Native \u4E2D\u662F\u5982\u4F55\u5DE5\u4F5C\u7684\u3002"]}),"\n",(0,c.jsx)(t.h2,{id:"\u89C6\u56FEviews\u4E0E\u79FB\u52A8\u5F00\u53D1",children:"\u89C6\u56FE\uFF08Views\uFF09\u4E0E\u79FB\u52A8\u5F00\u53D1"}),"\n",(0,c.jsxs)(t.p,{children:["\u5728 Android \u548C iOS \u5F00\u53D1\u4E2D\uFF0C\u4E00\u4E2A",(0,c.jsx)(t.strong,{children:"\u89C6\u56FE"}),"\u662F UI \u7684\u57FA\u672C\u7EC4\u6210\u90E8\u5206\uFF1A\u5C4F\u5E55\u4E0A\u7684\u4E00\u4E2A\u5C0F\u77E9\u5F62\u5143\u7D20\u3001\u53EF\u7528\u4E8E\u663E\u793A\u6587\u672C\u3001\u56FE\u50CF\u6216\u54CD\u5E94\u7528\u6237\u8F93\u5165\u3002\u751A\u81F3\u5E94\u7528\u7A0B\u5E8F\u6700\u5C0F\u7684\u89C6\u89C9\u5143\u7D20\uFF08\u4F8B\u5982\u4E00\u884C\u6587\u672C\u6216\u4E00\u4E2A\u6309\u94AE\uFF09\u4E5F\u90FD\u662F\u5404\u79CD\u89C6\u56FE\u3002\u67D0\u4E9B\u7C7B\u578B\u7684\u89C6\u56FE\u53EF\u4EE5\u5305\u542B\u5176\u4ED6\u89C6\u56FE\u3002\u5168\u90E8\u90FD\u662F\u89C6\u56FE\u3002"]}),"\n",(0,c.jsxs)("figure",{children:[(0,c.jsx)("img",{src:"https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/diagram_ios-android-views.svg",width:"1000",alt:"Diagram of Android and iOS app showing them both built on top of atomic elements called views."}),(0,c.jsx)("figcaption",{children:"Android\u548CiOS\u5E94\u7528\u4E2D\u591A\u79CD\u89C6\u56FE\u7684\u4E00\u4E9B\u793A\u4F8B\u3002"})]}),"\n",(0,c.jsx)(t.h2,{id:"\u539F\u751F\u7EC4\u4EF6",children:"\u539F\u751F\u7EC4\u4EF6"}),"\n",(0,c.jsxs)(t.p,{children:["\u5728 Android \u5F00\u53D1\u4E2D\u662F\u4F7F\u7528 Kotlin \u6216 Java \u6765\u7F16\u5199\u89C6\u56FE\uFF1B\u5728 iOS \u5F00\u53D1\u4E2D\u662F\u4F7F\u7528 Swift \u6216 Objective-C \u6765\u7F16\u5199\u89C6\u56FE\u3002\u5728 React Native \u4E2D\uFF0C\u5219\u4F7F\u7528 React \u7EC4\u4EF6\u901A\u8FC7 JavaScript \u6765\u8C03\u7528\u8FD9\u4E9B\u89C6\u56FE\u3002\u5728\u8FD0\u884C\u65F6\uFF0CReact Native \u4E3A\u8FD9\u4E9B\u7EC4\u4EF6\u521B\u5EFA\u76F8\u5E94\u7684 Android \u548C iOS \u89C6\u56FE\u3002\u7531\u4E8E React Native \u7EC4\u4EF6\u5C31\u662F\u5BF9\u539F\u751F\u89C6\u56FE\u7684\u5C01\u88C5\uFF0C\u56E0\u6B64\u4F7F\u7528 React Native \u7F16\u5199\u7684\u5E94\u7528\u5916\u89C2\u3001\u611F\u89C9\u548C\u6027\u80FD\u4E0E\u5176\u4ED6\u4EFB\u4F55\u539F\u751F\u5E94\u7528\u4E00\u6837\u3002\u6211\u4EEC\u5C06\u8FD9\u4E9B\u5E73\u53F0\u652F\u6301\u7684\u7EC4\u4EF6\u79F0\u4E3A",(0,c.jsx)(t.strong,{children:"\u539F\u751F\u7EC4\u4EF6"}),"\u3002"]}),"\n",(0,c.jsxs)(t.p,{children:["React Native \u5141\u8BB8\u60A8\u4E3A Android \u548C iOS \u6784\u5EFA\u81EA\u5DF1\u7684 Native Components\uFF08\u539F\u751F\u7EC4\u4EF6\uFF09\uFF0C\u4EE5\u6EE1\u8DB3\u60A8\u5F00\u53D1\u5E94\u7528\u7A0B\u5E8F\u7684\u72EC\u7279\u9700\u6C42\u3002\u6211\u4EEC\u8FD8\u6709\u4E00\u4E2A\u7531\u793E\u533A\u8D21\u732E\u7684\u7E41\u8363\u751F\u6001\u7CFB\u7EDF\uFF0C\u60A8\u53EF\u4EE5\u5230",(0,c.jsx)(t.a,{href:"https://reactnative.directory/",children:"Native Directory"}),"\u6765\u67E5\u627E\u793E\u533A\u5DF2\u521B\u5EFA\u7684\u5185\u5BB9\u3002"]}),"\n",(0,c.jsxs)(t.p,{children:["React Native \u8FD8\u5305\u62EC\u4E00\u7EC4\u57FA\u672C\u7684\uFF0C\u968F\u65F6\u53EF\u7528\u7684\u539F\u751F\u7EC4\u4EF6\uFF0C\u60A8\u53EF\u4EE5\u4F7F\u7528\u5B83\u4EEC\u6765\u6784\u5EFA\u60A8\u7684\u5E94\u7528\u7A0B\u5E8F\u3002\u8FD9\u4E9B\u662F React Native \u7684",(0,c.jsx)(t.strong,{children:"\u6838\u5FC3\u7EC4\u4EF6"}),"\u3002"]}),"\n",(0,c.jsx)(t.h2,{id:"\u6838\u5FC3\u7EC4\u4EF6",children:"\u6838\u5FC3\u7EC4\u4EF6"}),"\n",(0,c.jsxs)(t.p,{children:["React Native \u5177\u6709\u8BB8\u591A\u6838\u5FC3\u7EC4\u4EF6\uFF0C\u4ECE\u8868\u5355\u63A7\u4

1EF6\u5230\u6D3B\u52A8\u6307\u793A\u5668\uFF0C\u5E94\u6709\u5C3D\u6709\u3002\u4F60\u53EF\u4EE5\u5728",(0,c.jsx)(t.a,{href:"components-and-apis",children:"API \u7AE0\u8282"}),"\u627E\u5230\u5B83\u4EEC\u3002\u60A8\u5C06\u4E3B\u8981\u4F7F\u7528\u4EE5\u4E0B\u6838\u5FC3\u7EC4\u4EF6\uFF1A"]}),"\n",(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:"React Native UI \u7EC4\u4EF6"}),(0,c.jsx)(t.th,{children:"Android \u539F\u751F\u89C6\u56FE"}),(0,c.jsx)(t.th,{children:"iOS \u539F\u751F\u89C6\u56FE"}),(0,c.jsx)(t.th,{children:"Web \u6807\u7B7E"}),(0,c.jsx)(t.th,{children:"\u8BF4\u660E"})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<View>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<ViewGroup>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<UIView>"})}),(0,c.jsxs)(t.td,{children:["A non-scrolling ",(0,c.jsx)(t.code,{children:"<div>"})]}),(0,c.jsx)(t.td,{children:"\u4E00\u4E2A\u652F\u6301\u4F7F\u7528flexbox\u5E03\u5C40\u3001\u6837\u5F0F\u3001\u4E00\u4E9B\u89E6\u6478\u5904\u7406\u548C\u65E0\u969C\u788D\u6027\u63A7\u4EF6\u7684\u5BB9\u5668"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<Text>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<TextView>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<UITextView>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<p>"})}),(0,c.jsx)(t.td,{children:"\u663E\u793A\u3001\u6837\u5F0F\u548C\u5D4C\u5957\u6587\u672C\u5B57\u7B26\u4E32\uFF0C\u751A\u81F3\u5904\u7406\u89E6\u6478\u4E8B\u4EF6"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<Image>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<ImageView>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<UIImageView>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<img>"})}),(0,c.jsx)(t.td,{children:"\u663E\u793A\u4E0D\u540C\u7C7B\u578B\u7684\u56FE\u7247"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<ScrollView>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<ScrollView>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<UIScrollView>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<div>"})}),(0,c.jsx)(t.td,{children:"\u4E00\u4E2A\u901A\u7528\u7684\u6EDA\u52A8\u5BB9\u5668\uFF0C\u53EF\u4EE5\u5305\u542B\u591A\u4E2A\u7EC4\u4EF6\u548C\u89C6\u56FE"})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<TextInput>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<EditText>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:"<UITextField>"})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:'<input type="text">'})}),(0,c.jsx)(t.td,{children:"\u4F7F\u7528\u6237\u53EF\u4EE5\u8F93\u5165\u6587\u672C"})]})]})]}),"\n",(0,c.jsx)(t.p,{children:"\u5728\u63A5\u4E0B\u6765\u7684\u7AE0\u8282\uFF0C\u60A8\u5C06\u5F00\u59CB\u7EC4\u5408\u8FD9\u4E9B\u6838\u5FC3\u7EC4\u4EF6\uFF0C\u6765\u4E86\u89E3 React \u7684\u5DE5\u4F5C\u65B9\u5F0F\u3002\u5148\u505A\u4E00\u4E9B\u70ED\u8EAB\u5427\uFF01"}),"\n",(0,c.jsx)(t.div,{className:"snack-player","data-snack-name":"Hello World","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%20from%20'react'%3B%5Cnimport%20%7B%20View%2C%20Text%2C%20Image%2C%20ScrollView%2C%20TextInput%20%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CScrollView%3E%5Cn%20%20%20%20%20%20%3CText%3ESome%20text%3C%2FText%3E%5Cn%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%3CText%3ESome%20more%20text%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3CImage%5Cn%20%20%20%20%20%20%20%20%20%20source%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Freactnative.dev%2Fdocs%2Fassets%2Fp_cat2.png'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%7D%5Cn%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20width%3A%20200%2C%20height%3A%20200%20%7D%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3CTextInput%5Cn%20%20%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%5Cn%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'gray'%2C%5Cn%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%5Cn%20%20%20%20%20%20%20%20%7D%7D%5Cn%20%20%20%20%20%20%20%20defaultValue%3D%5C%22You%20can%20type%20in%20me%5C%22%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%3C%2FScrollView%3E%5Cn%20%20)%3B%5Cn%7D%5Cn%5Cnexport%20default%20App%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-

1platform":"web","data-snack-supported-platforms":"ios,android,web","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"}),"\n",(0,c.jsx)(t.hr,{}),"\n",(0,c.jsxs)(t.p,{children:["\u7531\u4E8E React Native \u4F7F\u7528\u4E0E React \u7EC4\u4EF6\u76F8\u540C\u7684 API \u7ED3\u6784\uFF0C\u56E0\u6B64\u60A8\u9700\u8981\u4E86\u89E3 React \u7EC4\u4EF6 API \u624D\u80FD\u4E0A\u624B\u3002\u60A8\u53EF\u4EE5\u5728",(0,c.jsx)(t.a,{href:"intro-react",children:"\u4E0B\u4E00\u7AE0\u8282\u5B66\u4E60"}),"\u5230\u5173\u4E8E\u6B64\u7684\u7B80\u5355\u4ECB\u7ECD\u6216\u590D\u4E60\u76F8\u5173\u5185\u5BB9\u3002\u5982\u679C\u60A8\u5DF2\u7ECF\u719F\u6089 React\uFF0C\u8BF7\u60A8",(0,c.jsx)(t.a,{href:"handling-text-input",children:"\u968F\u65F6\u8DF3\u8FC7"}),"\u3002"]}),"\n",(0,c.jsx)("img",{src:"https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/diagram_react-native-components.svg",width:"1000",alt:"A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."})]})}function h(e={}){let{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(l,{...e})}):l(e)}},43023(e,t,n){n.d(t,{R:()=>s,x:()=>d});var i=n(63696);let c={},r=i.createContext(c);function s(e){let t=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:s(e.components),i.createElement(r.Provider,{value:t},e.children)}}}]);