8e17635f.dfbaa969.js

js reactnative.cn collected 2026-10-04 00:26:28 UTC 29,566 bytes, 2 lines download raw bytes

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["11647"],{64027(e,t,n){n.r(t),n.d(t,{metadata:()=>a,default:()=>h,frontMatter:()=>o,contentTitle:()=>d,toc:()=>p,assets:()=>u});var a=JSON.parse('{"id":"tutorial","title":"\u6838\u5FC3\u6982\u5FF5","description":"React Native \u770B\u8D77\u6765\u5F88\u50CF React\uFF0C\u53EA\u4E0D\u8FC7\u5B83\u4F7F\u7528\u539F\u751F\u7EC4\u4EF6\u800C\u975E Web \u7EC4\u4EF6\u4F5C\u4E3A\u6784\u5EFA\u6A21\u5757\u3002\u56E0\u6B64\uFF0C\u8981\u7406\u89E3 React Native \u5E94\u7528\u7684\u57FA\u672C\u7ED3\u6784\uFF0C\u4F60\u9700\u8981\u4E86\u89E3\u4E00\u4E9B React \u7684\u57FA\u7840\u6982\u5FF5\uFF0C\u4F8B\u5982 JSX\u3001\u7EC4\u4EF6\u3001state \u548C props\u3002\u5373\u4F7F\u4F60\u5DF2\u7ECF\u719F\u6089 React\uFF0C\u4ECD\u7136\u9700\u8981\u5B66\u4E60\u4E00\u4E9B React Native \u7279\u6709\u7684\u77E5\u8BC6\uFF0C\u6BD4\u5982\u539F\u751F\u7EC4\u4EF6\u7684\u4F7F\u7528\u3002\u672C\u6559\u7A0B\u9762\u5411\u6240\u6709\u8BFB\u8005\uFF0C\u65E0\u8BBA\u4F60\u662F\u5426\u6709 React \u7ECF\u9A8C\u3002","source":"@site/versioned_docs/version-0.86/tutorial.md","sourceDirName":".","slug":"/tutorial","permalink":"/docs/0.86/tutorial","draft":false,"unlisted":false,"editUrl":"https://github.com/reactnativecn/react-native-website/blob/production/cnwebsite/../cndocs/tutorial.md","tags":[],"version":"0.86","frontMatter":{"id":"tutorial","title":"\u6838\u5FC3\u6982\u5FF5"}}'),r=n(62540),s=n(43023),l=n(77779),c=n(98263),i=n(38469);let o={id:"tutorial",title:"\u6838\u5FC3\u6982\u5FF5"},d,u={},p=[{value:"Hello World",id:"hello-world",level:2},{value:"\u8FD9\u6BB5\u4EE3\u7801\u662F\u4EC0\u4E48\u610F\u601D\uFF1F",id:"\u8FD9\u6BB5\u4EE3\u7801\u662F\u4EC0\u4E48\u610F\u601D",level:2},{value:"\u7EC4\u4EF6",id:"\u7EC4\u4EF6",level:2},{value:"Props\uFF08\u5C5E\u6027\uFF09",id:"props\u5C5E\u6027",level:2},{value:"State\uFF08\u72B6\u6001\uFF09",id:"state\u72B6\u6001",level:2},{value:"React \u4E2D state \u548C props \u6709\u4EC0\u4E48\u533A\u522B\uFF1F",id:"react-\u4E2D-state-\u548C-props-\u6709\u4EC0\u4E48\u533A\u522B",level:4},{value:"React \u548C React Native \u5728\u5904\u7406 state \u4E0A\u6709\u533A\u522B\u5417\uFF1F",id:"react-\u548C-react-native-\u5728\u5904\u7406-state-\u4E0A\u6709\u533A\u522B\u5417",level:4}];function C(e){let t={a:"a",code:"code",div:"div",h2:"h2",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["React Native \u770B\u8D77\u6765\u5F88\u50CF React\uFF0C\u53EA\u4E0D\u8FC7\u5B83\u4F7F\u7528\u539F\u751F\u7EC4\u4EF6\u800C\u975E Web \u7EC4\u4EF6\u4F5C\u4E3A\u6784\u5EFA\u6A21\u5757\u3002\u56E0\u6B64\uFF0C\u8981\u7406\u89E3 React Native \u5E94\u7528\u7684\u57FA\u672C\u7ED3\u6784\uFF0C\u4F60\u9700\u8981\u4E86\u89E3\u4E00\u4E9B React \u7684\u57FA\u7840\u6982\u5FF5\uFF0C\u4F8B\u5982 JSX\u3001\u7EC4\u4EF6\u3001",(0,r.jsx)(t.code,{children:"state"})," \u548C ",(0,r.jsx)(t.code,{children:"props"}),"\u3002\u5373\u4F7F\u4F60\u5DF2\u7ECF\u719F\u6089 React\uFF0C\u4ECD\u7136\u9700\u8981\u5B66\u4E60\u4E00\u4E9B React Native \u7279\u6709\u7684\u77E5\u8BC6\uFF0C\u6BD4\u5982\u539F\u751F\u7EC4\u4EF6\u7684\u4F7F\u7528\u3002\u672C\u6559\u7A0B\u9762\u5411\u6240\u6709\u8BFB\u8005\uFF0C\u65E0\u8BBA\u4F60\u662F\u5426\u6709 React \u7ECF\u9A8C\u3002"]}),"\n",(0,r.jsx)(t.p,{children:"\u8BA9\u6211\u4EEC\u5F00\u59CB\u5427\u3002"}),"\n",(0,r.jsx)(t.h2,{id:"hello-world",children:"Hello World"}),"\n",(0,r.jsx)(t.p,{children:'\u6309\u7167\u6211\u4EEC\u60A0\u4E45\u7684\u4F20\u7EDF\uFF0C\u9996\u5148\u6765\u6784\u5EFA\u4E00\u4E2A\u53EA\u663E\u793A "Hello, world!" \u7684\u5E94\u7528\uFF1A'}),"\n",(0,r.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%20%7BText%2C%20View%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20HelloWorldApp%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%5Cn%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20%20%20%7D%7D%3E%5Cn%20%20%20%20%20%20%3CText%3EHello%2C%20world!%3C%2FText%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cnexport%20default%20HelloWorldApp%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,r.jsxs)(t.p,{children:["\u4F60\u53EF\u4EE5\u76F4\u63A5\u5728\u4E0A\u9762\u7684\u5728\u7EBF\u6A21\u62DF\u5668\u4E2D\u4FEE\u6539\u4EE3\u7801\u8BD5\u8BD5\u6548\u679C\u3002\u4E5F\u53EF\u4EE5\u5C06\u4EE3\u7801\u7C98\u8D34\u5230\u672C\u5730\u9879\u76EE\u7684 ",(0,r.jsx)(t.code,{children:"App.js"})," \u6587\u4EF6\u4E2D\u8FD0\u884C\u3002"]}),"\n",(0,r.jsx)(t.h2,{id:"\u8FD9\u6BB5\u4EE3\u7801\u662F\u4EC0\u4E48\u610F\u601D",children:"\u8FD9\u6BB5\u4EE3\u7801\u662F\u4EC0\u4E48\u610F\u601D\uFF1F"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\u9996\u5148\uFF0C\u6211\u4EEC\u9700\u8981\u5BFC\u5165 ",(0,r.jsx)(t.code,{children:"React"})," \u4EE5\u4F7F\u7528 ",(0,r.jsx)(t.code,{children:"JSX"}),"\uFF0CJSX \u4F1A\u88AB\u8F6C\u6362\u4E3A\u5404\u5E73\u53F0\u7684\u539F\u751F\u7EC4\u4EF6\u3002"]}),"\n",(0,r.jsxs)(t.li,{children:["\u5728\u7B2C\u4E8C\u884C\uFF0C\u6211\u4EEC\u4ECE ",(0,r.jsx)(t.code,{children:"react-native"})," \u4E2D\u5BFC\u5165\u4E86 ",(0,r.jsx)(t.code,{children:"Text"})," \u548C ",(0,r.jsx)(t.code,{children:"View"})," \u7EC4\u4EF6\u3002"]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["\u7136\u540E\u6211\u4EEC\u5B9A\u4E49\u4E86 ",(0,r.jsx)(t.code,{children:"HelloWorldApp"})," \u51FD\u6570\uFF0C\u8FD9\u662F\u4E00\u4E2A",(0,r.jsx)(t.a,{href:"https://react.dev/reference/react/Component",children:"\u51FD\u6570\u5F0F\u7EC4\u4EF6"}),"\uFF0C\u5176\u884C\u4E3A\u4E0E React Web \u4E2D\u7684\u5B8C\u5168\u4E00\u81F4\u3002\u8BE5\u51FD\u6570\u8FD4\u56DE\u4E00\u4E2A\u5E26\u6709\u6837\u5F0F\u7684 ",(0,r.jsx)(t.code,{children:"View"})," \u7EC4\u4EF6\uFF0C\u5176\u5B50\u5143\u7D20\u662F\u4E00\u4E2A ",(0,r.jsx)(t.code,{children:"Text"})," \u7EC4\u4EF6\u3002"]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Text"})," \u7EC4\u4EF6\u7528\u4E8E\u6E32\u67D3\u6587\u672C\uFF0C",(0,r.jsx)(t.code,{children:"View"})," \u7EC4\u4EF6\u7528\u4E8E\u6E32\u67D3\u5BB9\u5668\u3002\u8FD9\u4E2A\u5BB9\u5668\u5E94\u7528\u4E86\u51E0\u4E2A\u6837\u5F0F\uFF0C\u6211\u4EEC\u6765\u9010\u4E00\u5206\u6790\uFF1A"]}),"\n",(0,r.jsxs)(t.p,{children:["\u7B2C\u4E00\u4E2A\u6837\u5F0F\u662F ",(0,r.jsx)(t.code,{children:"flex: 1"}),"\uFF0C",(0,r.jsx)(t.a,{href:"layout-props#flex",children:(0,r.jsx)(t.code,{children:"flex"})}),' \u5C5E\u6027\u5B9A\u4E49\u4E86\u5B50\u5143\u7D20\u5982\u4F55\u6CBF\u4E3B\u8F74\u65B9\u5411"\u586B\u5145"\u53EF\u7528\u7A7A\u95F4\u3002\u7531\u4E8E\u6211\u4EEC\u53EA\u6709\u4E00\u4E2A\u5BB9\u5668\uFF0C\u5B83\u5C06\u5360\u636E\u7236\u7EC4\u4EF6\u7684\u6240\u6709\u53EF\u7528\u7A7A\u95F4\u3002\u5728\u672C\u4F8B\u4E2D\uFF0C\u5B83\u662F\u552F\u4E00\u7684\u7EC4\u4EF6\uFF0C\u56E0\u6B64\u4F1A\u5360\u636E\u6574\u4E2A\u5C4F\u5E55\u7A7A\u95F4\u3002']}),"\n",(0,r.jsxs)(t.p,{children:["\u63A5\u4E0B\u6765\u662F ",(0,r.jsx)(t.a,{href:"layout-props#justifycontent",children:(0,r.jsx)(t.code,{children:"justifyContent"})}),': "center"\uFF0C\u5B83\u5C06\u5BB9\u5668\u7684\u5B50\u5143\u7D20\u6CBF\u4E3B\u8F74\u5C45\u4E2D\u5BF9\u9F50\u3002\u6700\u540E\u662F ',(0,r.jsx)(t.a,{href:"layout-props#alignitems",children:(0,r.jsx)(t.code,{children:"alignItems"})}),': "center"\uFF0C\u5B83\u5C06\u5BB9\u5668\u7684\u5B50\u5143\u7D20\u6CBF\u4EA4\u53C9\u8F74\u5C45\u4E2D\u5BF9\u9F50\u3002']}),"\n",(0,r.jsx)(t.p,{children:'\u4E0A\u9762\u7684\u4EE3\u7801\u4E2D\u6709\u4E9B\u5730\u65B9\u770B\u8D77\u6765\u53EF\u80FD\u4E0D\u592A\u50CF JavaScript\u2014\u2014\u522B\u614C\uFF0C\u8FD9\u5C31\u662F"\u672A\u6765\u7684"JavaScript\u3002'}),"\n",(0,r.jsxs)(t.p,{children:["\u9996\u5148\uFF0CES2015\uFF08\u4E5F\u79F0\u4E3A ES6\uFF09\u662F\u4E00\u5957 JavaScript \u7684\u6539\u8FDB\u6807\u51C6\uFF0C\u73B0\u5728\u5DF2\u6210\u4E3A\u5B98\u65B9\u6807\u51C6\u7684\u4E00\u90E8\u5206\uFF0C\u4F46\u5C1A\u672A\u88AB\u6240\u6709\u6D4F\u89C8\u5668\u5B8C\u5168\u652F\u6301\uFF0C\u56E0\u6B64\u5728 Web \u5F00\u53D1\u4E2D\u8FD8\u672A\u88AB\u5E7F\u6CDB\u4F7F\u7528\u3002React Native \u5185\u7F6E\u4E86\u5BF9 ES2015 \u7684\u652F\u6301\uFF0C\u4F60\u53EF\u4EE5\u653E\u5FC3\u4F7F\u7528\uFF0C\u65E0\u9700\u62C5\u5FC3\u517C\u5BB9\u6027\u3002\u4E0A\u9762\u793A\u4F8B\u4E2D\u7684 ",(0,r.jsx)(t.code,{children:"import"}),"\u3001",(0,r.jsx)(t.code,{children:"export"}),"\u3001",(0,r.jsx)(t.code,{children:"const"})," \u548C\u7BAD\u5934\u51FD\u6570 ",(0,r.jsx)(t.code,{children:"from"})," \u90FD\u662F ES2015 \u7684\u7279\u6027\u3002\u5982\u679C\u4F60\u4E0D\u719F\u6089 ES2015\uFF0C\u53EF\u4EE5\u901A\u8FC7\u9605\u8BFB\u672C\u6559\u7A0B\u4E2D\u7684\u793A\u4F8B\u4EE3\u7801\u6765\u719F\u6089\u3002\u5982\u679C\u9700\u8981\u66F4\u7CFB\u7EDF\u7684\u5B66\u4E60\uFF0C",(0,r.jsx)(t.a,{href:"https://babeljs.io/learn-es2015/",children:"\u8FD9\u4E2A\u9875\u9762"}),"\u63D0\u4F9B\u4E86 ES2015 \u7279\u6027\u7684\u5168\u9762\u6982\u8FF0\u3002"]}

1),"\n",(0,r.jsxs)(t.p,{children:["\u4EE3\u7801\u4E2D\u53E6\u4E00\u4E2A\u770B\u8D77\u6765\u4E0D\u592A\u5E38\u89C4\u7684\u90E8\u5206\u662F ",(0,r.jsx)(t.code,{children:"<View><Text>Hello world!</Text></View>"}),"\u3002\u8FD9\u662F JSX\u2014\u2014\u4E00\u79CD\u5728 JavaScript \u4E2D\u5D4C\u5165 XML \u7684\u8BED\u6CD5\u3002\u5F88\u591A\u6846\u67B6\u4F7F\u7528\u4E13\u95E8\u7684\u6A21\u677F\u8BED\u8A00\u5728\u6807\u8BB0\u4E2D\u5D4C\u5165\u4EE3\u7801\uFF0C\u800C React \u6070\u597D\u53CD\u5176\u9053\u884C\u4E4B\u3002JSX \u8BA9\u4F60\u5728\u4EE3\u7801\u4E2D\u7F16\u5199\u6807\u8BB0\u3002\u5B83\u770B\u8D77\u6765\u5F88\u50CF Web \u4E0A\u7684 HTML\uFF0C\u533A\u522B\u5728\u4E8E\u4F60\u4F7F\u7528\u7684\u4E0D\u662F ",(0,r.jsx)(t.code,{children:"<div>"})," \u6216 ",(0,r.jsx)(t.code,{children:"<span>"})," \u7B49 Web \u5143\u7D20\uFF0C\u800C\u662F React \u7EC4\u4EF6\u3002\u8FD9\u91CC ",(0,r.jsx)(t.code,{children:"<Text>"})," \u662F\u4E00\u4E2A\u7528\u4E8E\u663E\u793A\u6587\u672C\u7684",(0,r.jsx)(t.a,{href:"intro-react-native-components",children:"\u6838\u5FC3\u7EC4\u4EF6"}),"\uFF0C",(0,r.jsx)(t.code,{children:"View"})," \u5219\u7C7B\u4F3C\u4E8E ",(0,r.jsx)(t.code,{children:"<div>"})," \u6216 ",(0,r.jsx)(t.code,{children:"<span>"}),"\u3002"]}),"\n",(0,r.jsx)(t.h2,{id:"\u7EC4\u4EF6",children:"\u7EC4\u4EF6"}),"\n",(0,r.jsxs)(t.p,{children:["\u4E0A\u9762\u7684\u4EE3\u7801\u5B9A\u4E49\u4E86 ",(0,r.jsx)(t.code,{children:"HelloWorldApp"}),"\u2014\u2014\u4E00\u4E2A\u65B0\u7684 ",(0,r.jsx)(t.code,{children:"\u7EC4\u4EF6"}),"\u3002\u5728\u6784\u5EFA React Native \u5E94\u7528\u65F6\uFF0C\u4F60\u4F1A\u9891\u7E41\u5730\u521B\u5EFA\u65B0\u7EC4\u4EF6\u3002\u5C4F\u5E55\u4E0A\u770B\u5230\u7684\u4EFB\u4F55\u4E1C\u897F\u90FD\u662F\u67D0\u79CD\u7EC4\u4EF6\u3002"]}),"\n",(0,r.jsx)(t.h2,{id:"props\u5C5E\u6027",children:"Props\uFF08\u5C5E\u6027\uFF09"}),"\n",(0,r.jsx)(t.p,{children:"\u5927\u591A\u6570\u7EC4\u4EF6\u5728\u521B\u5EFA\u65F6\u53EF\u4EE5\u901A\u8FC7\u4E0D\u540C\u7684\u53C2\u6570\u8FDB\u884C\u81EA\u5B9A\u4E49\u914D\u7F6E\uFF0C\u8FD9\u4E9B\u53C2\u6570\u88AB\u79F0\u4E3A props\uFF08\u5C5E\u6027\uFF09\u3002"}),"\n",(0,r.jsxs)(t.p,{children:["\u4F60\u81EA\u5DF1\u521B\u5EFA\u7684\u7EC4\u4EF6\u4E5F\u53EF\u4EE5\u4F7F\u7528 ",(0,r.jsx)(t.code,{children:"props"}),"\u3002\u8FD9\u4F7F\u5F97\u4F60\u53EF\u4EE5\u7F16\u5199\u4E00\u4E2A\u7EC4\u4EF6\uFF0C\u5728\u5E94\u7528\u7684\u4E0D\u540C\u4F4D\u7F6E\u590D\u7528\uFF0C\u6BCF\u4E2A\u5730\u65B9\u4F20\u5165\u7565\u6709\u4E0D\u540C\u7684\u5C5E\u6027\u3002\u5728\u51FD\u6570\u5F0F\u7EC4\u4EF6\u4E2D\u901A\u8FC7 ",(0,r.jsx)(t.code,{children:"props.YOUR_PROP_NAME"})," \u8BBF\u95EE\uFF0C\u5728\u7C7B\u7EC4\u4EF6\u4E2D\u901A\u8FC7 ",(0,r.jsx)(t.code,{children:"this.props.YOUR_PROP_NAME"})," \u8BBF\u95EE\u3002\u793A\u4F8B\u5982\u4E0B\uFF1A"]}),"\n",(0,r.jsxs)(l.A,{groupId:"language",queryString:!0,defaultValue:i.A.defaultSnackLanguage,values:i.A.snackLanguages,children:[(0,r.jsx)(c.A,{value:"javascript",children:(0,r.jsx)(t.div,{className:"snack-player","data-snack-name":"Hello Props","data-snack-description":"Example usage","data-snack-files":"%7B%22App.js%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20%7BText%2C%20View%2C%20StyleSheet%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20center%3A%20%7B%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnconst%20Greeting%20%3D%20props%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7Bstyles.center%7D%3E%5Cn%20%20%20%20%20%20%3CText%3EHello%20%7Bprops.name%7D!%3C%2FText%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20LotsOfGreetings%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7B%5Bstyles.center%2C%20%7Btop%3A%2050%7D%5D%7D%3E%5Cn%20%20%20%20%20%20%3CGreeting%20name%3D%5C%22Rexxar%5C%22%20%2F%3E%5Cn%20%20%20%20%20%20%3CGreeting%20name%3D%5C%22Jaina%5C%22%20%2F%3E%5Cn%20%20%20%20%20%20%3CGreeting%20name%3D%5C%22Valeera%5C%22%20%2F%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnexport%20default%20LotsOfGreetings%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"})}),(0,r.jsx)(c.A,{value:"typescript",children:(0,r.jsx)(t.div,{className:"snack-player","data-snack-name":"Hello Props","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20%7BText%2C%20View%2C%20StyleSheet%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20center%3A%20%7B%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cntype%20GreetingProps%20%3D%20%7B%5Cn%20%20name%3A%20string%3B%5Cn%7D%3B%5Cn%5Cnconst%20Greeting%20%3D%20(props%3A%20GreetingProps)%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7Bstyles.center%7D%3E%5Cn%20%20%20%20%20%20%3CText%3EHello%20%7Bprops.name%7D!%3C%2FText%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20LotsOfGreetings%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7B%5Bstyles.center%2C%20%7Btop%3A%2050%7D%5D%7D%3E%5Cn%20%20%20%20%20%20%3CGreeting%20name%3D%5C%22Rexxar%5C%22%20%2F%3E%5Cn%20%20%20%20%20%20%3CGreeting%20name%3D%5C%22Jaina%5C%22%20%2F%3E%5Cn%20%20%20%20%20%20%3CGreeting%20name%3D%5C%22Valeera%5C%22%20%2F%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnexport%20default%20LotsOfGreetings%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-platform":"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,r.jsxs)(t.p,{children:["\u901A\u8FC7 ",(0,r.jsx)(t.code,{children:"name"})," \u4F5C\u4E3A prop \u4F20\u5165\uFF0C\u6211\u4EEC\u53EF\u4EE5\u81EA\u5B9A\u4E49 ",(0,r.jsx)(t.code,{children:"Greeting"})," \u7EC4\u4EF6\uFF0C\u4ECE\u800C\u5728\u6BCF\u4E2A\u95EE\u5019\u8BED\u4E2D\u590D\u7528\u8BE5\u7EC4\u4EF6\u3002\u8FD9\u4E2A\u4F8B\u5B50\u8FD8\u5728 JSX \u4E2D\u4F7F\u7528\u4E86 ",(0,r.jsx)(t.code,{children:"Greeting"})," \u7EC4\u4EF6\u2014\u2014\u8FD9\u79CD\u80FD\u529B\u6B63\u662F React \u5F3A\u5927\u7684\u5173\u952E\u6240\u5728\u3002"]}),"\n",(0,r.jsxs)(t.p,{children:["\u8FD9\u91CC\u8FD8\u51FA\u73B0\u4E86 ",(0,r.jsx)(t.a,{href:"/docs/0.86/view",children:(0,r.jsx)(t.code,{children:"View"})})," \u7EC4\u4EF6\u3002",(0,r.jsx)(t.a,{href:"/docs/0.86/view",children:(0,r.jsx)(t.code,{children:"View"})})," \u4F5C\u4E3A\u5176\u4ED6\u7EC4\u4EF6\u7684\u5BB9\u5668\uFF0C\u6709\u52A9\u4E8E\u63A7\u5236\u6837\u5F0F\u548C\u5E03\u5C40\u3002"]}),"\n",(0,r.jsxs)(t.p,{children:["\u901A\u8FC7 ",(0,r.jsx)(t.code,{children:"props"})," \u4EE5\u53CA\u57FA\u7840\u7684 ",(0,r.jsx)(t.a,{href:"/docs/0.86/text",children:(0,r.jsx)(t.code,{children:"Text"})}),"\u3001",(0,r.jsx)(t.a,{href:"/docs/0.86/image",children:(0,r.jsx)(t.code,{children:"Image"})})," \u548C ",(0,r.jsx)(t.a,{href:"/docs/0.86/view",children:(0,r.jsx)(t.code,{children:"View"})})," \u7EC4\u4EF6\uFF0C\u4F60\u53EF\u4EE5\u6784\u5EFA\u51FA\u5404\u79CD\u9759\u6001\u9875\u9762\u3002\u8981\u5B66\u4E60\u5982\u4F55\u8BA9\u5E94\u7528\u80FD\u591F\u54CD\u5E94\u53D8\u5316\uFF0C\u4F60\u9700\u8981",(0,r.jsx)(t.a,{href:"#state",children:"\u4E86\u89E3 State"}),"\u3002"]}),"\n",(0,r.jsx)(t.h2,{id:"state\u72B6\u6001",children:"State\uFF08\u72B6\u6001\uFF09"}),"\n",(0,r.jsxs)(t.p,{children:["\u4E0E ",(0,r.jsx)(t.a,{href:"https://react.dev/reference/react/Component#props",children:"props \u662F\u53EA\u8BFB\u7684"}),"\u4E14\u4E0D\u5E94\u88AB\u4FEE\u6539\u4E0D\u540C\uFF0C",(0,r.jsx)(t.code,{children:"state"})," \u5141\u8BB8 React \u7EC4\u4EF6\u6839\u636E\u7528\u6237\u64CD\u4F5C\u3001\u7F51\u7EDC\u54CD\u5E94\u7B49\u968F\u65F6\u95F4\u6539\u53D8\u5176\u8F93\u51FA\u3002"]}),"\n",(0,r.jsx)(t.h4,{id:"react-\u4E2D-state-\u548C-props-\u6709\u4EC0\u4E48\u533A\u522B",children:"React \u4E2D state \u548C props \u6709\u4EC0\u4E48\u533A\u522B\uFF1F"}),"\n",(0,r.jsx)(t.p,{children:"\u5728 React \u7EC4\u4EF6\u4E2D\uFF0Cprops \u662F\u4

1ECE\u7236\u7EC4\u4EF6\u4F20\u9012\u7ED9\u5B50\u7EC4\u4EF6\u7684\u53D8\u91CF\u3002\u800C state \u540C\u6837\u662F\u53D8\u91CF\uFF0C\u533A\u522B\u5728\u4E8E\u5B83\u4E0D\u662F\u4F5C\u4E3A\u53C2\u6570\u4F20\u5165\u7684\uFF0C\u800C\u662F\u7531\u7EC4\u4EF6\u5185\u90E8\u521D\u59CB\u5316\u548C\u7BA1\u7406\u7684\u3002"}),"\n",(0,r.jsx)(t.h4,{id:"react-\u548C-react-native-\u5728\u5904\u7406-state-\u4E0A\u6709\u533A\u522B\u5417",children:"React \u548C React Native \u5728\u5904\u7406 state \u4E0A\u6709\u533A\u522B\u5417\uFF1F"}),"\n",(0,r.jsxs)("div",{className:"two-columns",children:[(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:'title="React TSX"',children:"// ReactJS Counter Example using Hooks!\n\nimport {useState} from 'react';\n\n\n\nconst App = () => {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div className=\"container\">\n      <p>You clicked {count} times</p>\n      <button\n        onClick={() => setCount(count + 1)}>\n        Click me!\n      </button>\n    </div>\n  );\n};\n\n\n// CSS\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n"})}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:'title="React TSX"',children:"// React Native Counter Example using Hooks!\n\nimport {useState} from 'react';\nimport {View, Text, Button, StyleSheet} from 'react-native';\n\nconst App = () => {\n  const [count, setCount] = useState(0);\n\n  return (\n    <View style={styles.container}>\n      <Text>You clicked {count} times</Text>\n      <Button\n        onPress={() => setCount(count + 1)}\n        title=\"Click me!\"\n      />\n    </View>\n  );\n};\n\n// React Native Styles\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n"})})]}),"\n",(0,r.jsxs)(t.p,{children:["\u5982\u4E0A\u6240\u793A\uFF0C",(0,r.jsx)(t.a,{href:"https://react.dev/learn/state-a-components-memory",children:"React"})," \u548C React Native \u5728\u5904\u7406 ",(0,r.jsx)(t.code,{children:"state"})," \u4E0A\u6CA1\u6709\u533A\u522B\u3002\u4F60\u53EF\u4EE5\u5728\u7C7B\u7EC4\u4EF6\u548C\u51FD\u6570\u5F0F\u7EC4\u4EF6\u4E2D\u4F7F\u7528 state\uFF0C\u51FD\u6570\u5F0F\u7EC4\u4EF6\u901A\u8FC7 ",(0,r.jsx)(t.a,{href:"https://react.dev/reference/react/useState",children:"Hooks"})," \u6765\u4F7F\u7528\u3002"]}),"\n",(0,r.jsx)(t.p,{children:"\u4E0B\u9762\u7684\u793A\u4F8B\u4F7F\u7528\u7C7B\u7EC4\u4EF6\u5B9E\u73B0\u4E86\u540C\u6837\u7684\u8BA1\u6570\u5668\uFF1A"}),"\n",(0,r.jsx)(t.div,{className:"snack-player","data-snack-name":"Hello Classes","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20%7BComponent%7D%20from%20'react'%3B%5Cnimport%20%7BStyleSheet%2C%20TouchableOpacity%2C%20Text%2C%20View%7D%20from%20'react-native'%3B%5Cn%5Cnclass%20App%20extends%20Component%20%7B%5Cn%20%20state%20%3D%20%7B%5Cn%20%20%20%20count%3A%200%2C%5Cn%20%20%7D%3B%5Cn%5Cn%20%20onPress%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20this.setState(%7B%5Cn%20%20%20%20%20%20count%3A%20this.state.count%20%2B%201%2C%5Cn%20%20%20%20%7D)%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CTouchableOpacity%20style%3D%7Bstyles.button%7D%20onPress%3D%7Bthis.onPress%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%3EClick%20me%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%5Cn%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%3EYou%20clicked%20%7Bthis.state.count%7D%20times%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20button%3A%20%7B%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20backgroundColor%3A%20'%23DDDDDD'%2C%5Cn%20%20%20%20padding%3A%2010%2C%5Cn%20%20%20%20marginBottom%3A%2010%2C%5Cn%20%20%7D%2C%5Cn%7D

1)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-platform":"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"})]})}function h(e={}){let{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(C,{...e})}):C(e)}},38469(e,t,n){n.d(t,{A:()=>l});var a=n(93227);let r=!!a.A.canUseDOM&&navigator.platform.startsWith("Mac"),s=!!a.A.canUseDOM&&navigator.platform.startsWith("Win"),l={defaultGuide:"native",defaultJsDebugger:"flipper",defaultOs:r?"macos":s?"windows":"linux",defaultPackageManager:"npm",defaultPlatform:r?"ios":"android",defaultSyntax:"functional",defaultAndroidLanguage:"java",defaultAppleLanguage:"objc",defaultJavaScriptSpecLanguages:"typescript",getDevNotesTabs:(e=["android","ios","web","windows"])=>[e.includes("android")?{label:"Android",value:"android"}:void 0,e.includes("ios")?{label:"iOS",value:"ios"}:void 0,e.includes("web")?{label:"Web",value:"web"}:void 0,e.includes("windows")?{label:"Windows",value:"windows"}:void 0].filter(Boolean),guides:[{label:"React Native CLI Quickstart",value:"native"},{label:"Expo Go Quickstart",value:"quickstart"}],oses:[{label:"macOS",value:"macos"},{label:"Windows",value:"windows"},{label:"Linux",value:"linux"}],packageManagers:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],platforms:[{label:"Android",value:"android"},{label:"iOS",value:"ios"}],syntax:[{label:"Function Component",value:"functional"},{label:"Class Component",value:"classical"}],androidLanguages:[{label:"Java",value:"java"},{label:"Kotlin",value:"kotlin"}],appleLanguages:[{label:"ObjectiveC",value:"objc"},{label:"Swift",value:"swift"}],javaScriptSpecLanguages:[{label:"TypeScript",value:"typescript"},{label:"Flow",value:"flow"}],jsDebuggers:[{label:"Hermes Debugger / Expo",value:"hermes"},{label:"Flipper",value:"flipper"},{label:"New Debugger (Experimental)",value:"new-debugger"}],snackLanguages:[{label:"TypeScript",value:"typescript"},{label:"JavaScript",value:"javascript"}],defaultSnackLanguage:"typescript"}},98263(e,t,n){n.d(t,{A:()=>c});var a=n(62540);n(63696);var r=n(11750),s=n(23865);function l({children:e,className:t,hidden:n}){return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)("tabItem_wHwb",t),hidden:n,children:e})}function c({children:e,className:t,value:n}){let{selectedValue:r,lazy:i}=(0,s.uc)(),o=n===r;return!o&&i?null:(0,a.jsx)(l,{className:t,hidden:!o,children:e})}},77779(e,t,n){n.d(t,{A:()=>p});var a=n(62540);n(63696);var r=n(11750),s=n(46065),l=n(23865),c=n(45194),i=n(83029);function o({className:e}){let{selectedValue:t,selectValue:n,tabValues:s,block:i}=(0,l.uc)(),d=[],{blockElementScrollPositionUntilNextRender:u}=(0,c.a_)(),p=e=>{let a=e.currentTarget,r=s[d.indexOf(a)].value;r!==t&&(u(a),n(r))},C=e=>{let t=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":{let n=d.indexOf(e.currentTarget)+1;t=d[n]??d[0];break}case"ArrowLeft":{let n=d.indexOf(e.currentTarget)-1;t=d[n]??d[d.length-1]}}t?.focus()};return(0,a.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":i},e),children:s.map(({value:e,label:n,attributes:s})=>(0,a.jsx)("li",{role:"tab",tabIndex:t===e?0:-1,"aria-selected":t===e,ref:e=>{d.push(e)},onKeyDown:C,onClick:p,...s,className:(0,r.A)("tabs__item","tabItem_l0OV",s?.className,{"tabs__item--active":t===e}),children:n??e},e))})}function d({children:e}){return(0,a.jsx)("div",{className:"margin-top--md",children:e})}function u({className:e,children:t}){return(0,a.jsxs)("div",{className:(0,r.A)(s.G.tabs.container,"tabs-container","tabList_J5MA"),children:[(0,a.jsx)(o,{className:e}),(0,a.jsx)(d,{children:t})]})}function p(e){let t=(0,i.A)(),n=(0,l.OC)(e);return(0,a.jsx)(l.O_,{value:n,children:(0,a.jsx)(u,{className:e.className,children:(0,l.vT)(e.children)})},String(t))}},23865(e,t,n){n.d(t,{OC:()=>p,O_:()=>x,uc:()=>h,vT:()=>d});var a=n(62540),r=n(63696),s=n(49519),l=n(6743),c=n(88511),i=n(15396),o=n(89030);function d(e){return r.Children.toArray(e).filter(e=>"\n"!==e)}function u({value:e,tabValues:t}){return t.some(t=>t.value===e)}function p(e){let t,{defaultValue:n,queryString:a=!1,groupId:d}=e,p=function(e){let{values:t,children:n}=e;return(0,r.useMemo)(()=>{let e=t??r.Children.toArray(n).flatMap(e=>{if(!e)return[];if((0,r.isValidElement)(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return[e];

1let t="string"==typeof e.type?e.type:e.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${t}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
2If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:t,attributes:n,default:a}})=>({value:e,label:t,attributes:n,default:a})),a=(0,i.XI)(e,(e,t)=>e.value===t.value);if(a.length>0)throw Error(`Docusaurus error: Duplicate values "${a.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[t,n])}(e),[C,h]=(0,r.useState)(()=>(function({defaultValue:e,tabValues:t}){if(0===t.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!u({value:e,tabValues:t}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let n=t.find(e=>e.default)??t[0];if(!n)throw Error("Unexpected error: 0 tabValues");return n.value})({defaultValue:n,tabValues:p})),[x,v]=function({queryString:e=!1,groupId:t}){let n=(0,s.W6)(),a=function({queryString:e=!1,groupId:t}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:e,groupId:t});return[(0,c.aZ)(a),(0,r.useCallback)(e=>{if(!a)return;let t=new URLSearchParams(n.location.search);t.set(a,e),n.replace({...n.location,search:t.toString()})},[a,n])]}({queryString:a,groupId:d}),[f,m]=function({groupId:e}){let t=e?`docusaurus.tab.${e}`:null,[n,a]=(0,o.Dv)(t);return[n,(0,r.useCallback)(e=>{t&&a.set(e)},[t,a])]}({groupId:d}),j=u({value:t=x??f,tabValues:p})?t:null;return(0,l.A)(()=>{j&&h(j)},[j]),{selectedValue:C,selectValue:(0,r.useCallback)(e=>{if(!u({value:e,tabValues:p}))throw Error(`Can't select invalid tab value=${e}`);h(e),v(e),m(e)},[v,m,p]),tabValues:p,lazy:e.lazy??!1,block:e.block??!1}}let C=(0,r.createContext)(null);function h(){let e=r.useContext(C);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function x(e){return(0,a.jsx)(C.Provider,{value:e.value,children:e.children})}},43023(e,t,n){n.d(t,{R:()=>l,x:()=>c});var a=n(63696);let r={},s=a.createContext(r);function l(e){let t=a.useContext(s);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),a.createElement(s.Provider,{value:t},e.children)}}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.