1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["14025"],{53862(e,n,t){t.r(n),t.d(n,{metadata:()=>a,default:()=>v,frontMatter:()=>o,contentTitle:()=>c,toc:()=>u,assets:()=>d});var a=JSON.parse('{"id":"building-for-tv","title":"\u4E3A\u7535\u89C6\u548C\u673A\u9876\u76D2\u5236\u4F5C\u5E94\u7528","description":"\u76EE\u524D\u7684 React Native \u5E94\u7528\u53EA\u9700\u5728 JavaScript \u7AEF\u7B80\u5355\u4FEE\u6539\u751A\u81F3\u65E0\u9700\u4FEE\u6539\uFF0C\u5728\u7535\u89C6\u548C\u673A\u9876\u76D2\u8BBE\u5907\u4E0A\u5C31\u57FA\u672C\u53EF\u7528\u4E86\u3002","source":"@site/versioned_docs/version-0.80/building-for-tv.md","sourceDirName":".","slug":"/building-for-tv","permalink":"/docs/0.80/building-for-tv","draft":false,"unlisted":false,"editUrl":"https://github.com/reactnativecn/react-native-website/blob/production/cnwebsite/../cndocs/building-for-tv.md","tags":[],"version":"0.80","frontMatter":{"id":"building-for-tv","title":"\u4E3A\u7535\u89C6\u548C\u673A\u9876\u76D2\u5236\u4F5C\u5E94\u7528","hide_table_of_contents":true},"sidebar":"docs","previous":{"title":"\u96C6\u6210\u5230 Android Fragment","permalink":"/docs/0.80/integration-with-android-fragment"},"next":{"title":"\u591A\u5E73\u53F0\u652F\u6301","permalink":"/docs/0.80/out-of-tree-platforms"}}'),l=t(62540),i=t(43023),r=t(77779),s=t(98263);t(38469);let o={id:"building-for-tv",title:"\u4E3A\u7535\u89C6\u548C\u673A\u9876\u76D2\u5236\u4F5C\u5E94\u7528",hide_table_of_contents:!0},c,d={},u=[{value:"\u7F16\u8BD1\u4FEE\u6539",id:"\u7F16\u8BD1\u4FEE\u6539",level:2},{value:"\u4EE3\u7801\u4FEE\u6539",id:"\u4EE3\u7801\u4FEE\u6539",level:2},{value:"\u7F16\u8BD1\u53D8\u66F4",id:"\u7F16\u8BD1\u53D8\u66F4",level:2},{value:"\u4EE3\u7801\u4FEE\u6539",id:"\u4EE3\u7801\u4FEE\u6539-1",level:2}];function h(e){let n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.p,{children:"\u76EE\u524D\u7684 React Native \u5E94\u7528\u53EA\u9700\u5728 JavaScript \u7AEF\u7B80\u5355\u4FEE\u6539\u751A\u81F3\u65E0\u9700\u4FEE\u6539\uFF0C\u5728\u7535\u89C6\u548C\u673A\u9876\u76D2\u8BBE\u5907\u4E0A\u5C31\u57FA\u672C\u53EF\u7528\u4E86\u3002"}),"\n",(0,l.jsxs)(r.A,{groupId:"tv",defaultValue:"androidtv",values:[{label:"Android TV",value:"androidtv"},{label:"\u{1F6A7} tvOS",value:"tvos"}],children:[(0,l.jsxs)(s.A,{value:"androidtv",children:[(0,l.jsxs)(n.blockquote,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"\u5DF2\u8FC7\u65F6\u3002"})," TV \u5E73\u53F0\u7684\u652F\u6301\u5DF2\u8FC1\u79FB\u5230\u793E\u533A\u7EF4\u62A4\u7684 ",(0,l.jsx)(n.a,{href:"https://github.com/react-native-tvos/react-native-tvos",children:"React Native for TV"})," \u9879\u76EE\u3002"]}),"\n"]}),(0,l.jsx)(n.h2,{id:"\u7F16\u8BD1\u4FEE\u6539",children:"\u7F16\u8BD1\u4FEE\u6539"}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.em,{children:"\u539F\u751F\u7AEF"}),": \u5728 Android TV \u4E0A\u8FD0\u884C React Native \u9879\u76EE\u8BF7\u5148\u5728",(0,l.jsx)(n.code,{children:"AndroidManifest.xml"}),"\u4E2D\u52A0\u5165\u4E0B\u5217\u914D\u7F6E\uFF1A"]}),"\n"]}),(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-xml",metastring:'title="XML"',children:' \x3c!-- \u52A0\u5165\u81EA\u5B9A\u4E49\u7684banner\u56FE\u4F5C\u4E3ATV\u8BBE\u5907\u4E0A\u7684\u56FE\u6807 --\x3e\n <application\n ...\n android:banner="@drawable/tv_banner"\n >\n ...\n <intent-filter>\n ...\n \x3c!-- Needed to properly create a launch intent when running on Android TV --\x3e\n <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>\n </intent-filter>\n ...\n </application>\n'})}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.em,{children:"JavaScript \u7AEF"}),": \u5BF9\u4E8E\u7535\u89C6\u8BBE\u5907\u7684\u68C0\u6D4B\u4EE3\u7801\u5DF2\u7ECF\u52A0\u5165\u5230\u4E86",(0,l.jsx)(n.code,{children:"Platform"}),"\u6A21\u5757\u4E2D\u3002\u4F60\u53EF\u4EE5\u4F7F\u7528\u4E0B\u9762\u7684\u4EE3\u7801\u6765\u68C0\u6D4B\u5F53\u524D\u8FD0\u884C\u8BBE\u5907\u662F\u5426\u662F\u7535\u89C6\u8BBE\u5907\uFF1A"]}),"\n"]}),(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:"import { Platform } from 'react-native';\nconst running_on_tv = Platform.isTV;\n"})}),(0,l.jsx)(n.h2,{id:"\u4EE3\u7801\u4FEE\u6539",children:"\u4EE3\u7801\u4FEE\u6539"}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"\u8BBF\u95EE\u53EF\u70B9\u51FB\u7684\u63A7\u4
1EF6"}),"\uFF1A\u5728Android TV\u4E0A\u8FD0\u884C\u65F6\uFF0CAndroid \u6846\u67B6\u5C06\u6839\u636E\u89C6\u56FE\u4E2D\u53EF\u805A\u7126\u5143\u7D20\u7684\u76F8\u5BF9\u4F4D\u7F6E\u81EA\u52A8\u5E94\u7528\u5B9A\u5411\u5BFC\u822A\u65B9\u6848\u3002",(0,l.jsx)(n.code,{children:"Touchable"}),"\u7CFB\u5217\u7EC4\u4EF6\u6DFB\u52A0\u4E86\u68C0\u6D4B\u7126\u70B9\u53D8\u5316\u7684\u4EE3\u7801\uFF0C\u5E76\u4F7F\u7528\u73B0\u6709\u65B9\u6CD5\u6B63\u786E\u8BBE\u7F6E\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u4EE5\u53CA\u5728\u4F7F\u7528\u7535\u89C6\u9065\u63A7\u5668\u9009\u62E9\u89C6\u56FE\u65F6\u542F\u52A8\u6B63\u786E\u7684\u64CD\u4F5C\uFF0C\u56E0\u6B64",(0,l.jsx)(n.code,{children:"TouchableWithoutFeedback"}),"\u3001",(0,l.jsx)(n.code,{children:"TouchableHighlight"}),"\u3001",(0,l.jsx)(n.code,{children:"TouchableOpacity"}),"\u548C",(0,l.jsx)(n.code,{children:"TouchableNativeFeedback"}),"\u5C06\u6309\u9884\u671F\u5DE5\u4F5C\u3002\u7279\u522B\u5730\uFF1A"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"onFocus"}),"\u4F1A\u5728\u53EF\u89E6\u6478\u89C6\u56FE\u6210\u4E3A\u7126\u70B9\u65F6\u6267\u884C"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"onBlur"}),"\u4F1A\u5728\u53EF\u89E6\u6478\u89C6\u56FE\u5931\u53BB\u7126\u70B9\u65F6\u6267\u884C"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"onPress"}),"\u4F1A\u5728\u6309\u4E0B\u7535\u89C6\u9065\u63A7\u5668\u4E0A\u7684\u201C\u9009\u62E9\u201D\u6309\u94AE\u5B9E\u9645\u9009\u62E9\u53EF\u89E6\u6478\u89C6\u56FE\u65F6\u6267\u884C\u3002"]}),"\n"]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"\u7535\u89C6\u9065\u63A7\u5668/\u952E\u76D8\u8F93\u5165"}),"\uFF1A\u4E00\u4E2A\u65B0\u7684\u539F\u751F\u7C7B",(0,l.jsx)(n.code,{children:"ReactAndroidTVRootViewHelper"}),"\u4E3A\u7535\u89C6\u9065\u63A7\u5668\u4E8B\u4EF6\u8BBE\u7F6E\u6309\u952E\u4E8B\u4EF6\u5904\u7406\u7A0B\u5E8F\u3002 \u5F53\u7535\u89C6\u9065\u63A7\u5668\u4E8B\u4EF6\u53D1\u751F\u65F6\uFF0C\u8BE5\u7C7B\u4F1A\u89E6\u53D1\u4E00\u4E2A JS \u4E8B\u4EF6\u3002\u6B64\u4E8B\u4EF6\u5C06\u7531",(0,l.jsx)(n.code,{children:"TVEventHandler"})," JavaScript \u5BF9\u8C61\u7684\u5B9E\u4F8B\u83B7\u53D6\u3002\u9700\u8981\u5B9E\u73B0\u81EA\u5B9A\u4E49\u5904\u7406\u7535\u89C6\u9065\u63A7\u5668\u4E8B\u4EF6\u7684\u5E94\u7528\u7A0B\u5E8F\u4EE3\u7801\u53EF\u4EE5\u521B\u5EFA\u4E00\u4E2A",(0,l.jsx)(n.code,{children:"TVEventHandler"}),"\u7684\u5B9E\u4F8B\u5E76\u76D1\u542C\u8FD9\u4E9B\u4E8B\u4EF6\uFF0C\u5982\u4E0B\u4EE3\u7801\u6240\u793A\uFF1A"]}),"\n"]}),"\n"]}),(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-jsx",metastring:'title="React JSX"',children:"const TVEventHandler = require('TVEventHandler');\n\nclass Game2048 extends React.Component {\n _tvEventHandler: any;\n\n _enableTVEventHandler() {\n this._tvEventHandler = new TVEventHandler();\n this._tvEventHandler.enable(this, function(cmp, evt) {\n if (evt && evt.eventType === 'right') {\n cmp.setState({board: cmp.state.board.move(2)});\n } else if(evt && evt.eventType === 'up') {\n cmp.setState({board: cmp.state.board.move(1)});\n } else if(evt && evt.eventType === 'left') {\n cmp.setState({board: cmp.state.board.move(0)});\n } else if(evt && evt.eventType === 'down') {\n cmp.setState({board: cmp.state.board.move(3)});\n } else if(evt && evt.eventType === 'playPause') {\n cmp.restartGame();\n }\n });\n }\n\n _disableTVEventHandler() {\n if (this._tvEventHandler) {\n this._tvEventHandler.disable();\n delete this._tvEventHandler;\n }\n }\n\n componentDidMount() {\n this._enableTVEventHandler();\n }\n\n componentWillUnmount() {\n this._disableTVEventHandler();\n }\n"})}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"\u5F00\u53D1\u8005\u83DC\u5355\u652F\u6301"}),"\uFF1A\u5728\u6A21\u62DF\u5668\u4E0A\uFF0Ccmd-M \u4F1A\u8C03\u51FA\u5F00\u53D1\u8005\u83DC\u5355\uFF0C\u7C7B\u4F3C\u4E8E\u5B89\u5353\u3002\u8981\u5728\u5B9E\u9645\u7684 Android T
1V \u8BBE\u5907\u4E0A\u542F\u52A8\u5B83\uFF0C\u8BF7\u6309\u83DC\u5355\u6309\u94AE\u6216\u957F\u6309\u9065\u63A7\u5668\u4E0A\u7684\u5FEB\u8FDB\u6309\u94AE\u3002\uFF08\u8BF7\u4E0D\u8981\u6447\u6643 Android TV \u8BBE\u5907\uFF0C\u8FD9\u5C06\u4E0D\u8D77\u4F5C\u7528 :) \uFF09"]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"\u5DF2\u77E5\u95EE\u9898"}),":"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"TextInput"}),"\u7EC4\u4EF6\u4E0D\u80FD\u83B7\u5F97\u7126\u70B9\uFF0C\u8BF7\u53C2\u8003\u8FD9\u91CC\u8BA8\u8BBA\u7684",(0,l.jsx)(n.a,{href:"https://github.com/facebook/react-native/pull/16500#issuecomment-629285638",children:"\u4E34\u65F6\u89E3\u51B3\u65B9\u6848"}),"\u3002"]}),"\n"]}),"\n"]}),"\n"]})]}),(0,l.jsxs)(s.A,{value:"tvos",children:[(0,l.jsxs)(n.blockquote,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"\u5DF2\u8FC7\u65F6\u3002"})," \u8BF7\u4F7F\u7528",(0,l.jsx)(n.a,{href:"https://github.com/react-native-community/react-native-tvos",children:"react-native-tvos"}),"\u4EE3\u66FF\u3002"]}),"\n"]}),(0,l.jsx)(n.h2,{id:"\u7F16\u8BD1\u53D8\u66F4",children:"\u7F16\u8BD1\u53D8\u66F4"}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"\u539F\u751F\u7AEF"}),": React Native \u751F\u6210\u7684 Xcode \u9879\u76EE\u73B0\u90FD\u5DF2\u5305\u542B Apple TV \u7F16\u8BD1\u76EE\u6807\uFF0C\u5176\u540D\u5B57\u90FD\u5E26\u6709'-tvOS'\u540E\u7F00\u3002"]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"react-native init"}),": \u4F7F\u7528",(0,l.jsx)(n.code,{children:"react-native init"}),"\u547D\u4EE4\u521B\u5EFA\u7684\u65B0\u9879\u76EE\u4F1A\u81EA\u52A8\u5728 Xcode \u65B0\u9879\u76EE\u4E2D\u5305\u542B Apple TV \u7F16\u8BD1\u76EE\u6807\u3002"]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"JavaScript \u7AEF"}),": \u5BF9\u4E8E\u7535\u89C6\u8BBE\u5907\u7684\u68C0\u6D4B\u4EE3\u7801\u5DF2\u7ECF\u52A0\u5165\u5230\u4E86",(0,l.jsx)(n.code,{children:"Platform"}),"\u6A21\u5757\u4E2D\u3002\u4F60\u53EF\u4EE5\u4F7F\u7528\u4E0B\u9762\u7684\u4EE3\u7801\u6765\u68C0\u6D4B\u5F53\u524D\u8FD0\u884C\u8BBE\u5907\u662F\u5426\u662F\u7535\u89C6\u8BBE\u5907\uFF1A"]}),"\n"]}),"\n"]}),(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-jsx",metastring:'title="React JSX"',children:"import { Platform } from 'react-native';\nconst running_on_tv = Platform.isTV;\n\n// \u5982\u679C\u4F60\u60F3\u66F4\u7CBE\u786E\u5730\u9488\u5BF9tvOS\u8BBE\u5907\uFF08\u5373\u6392\u9664Android\u8BBE\u5907\uFF09\uFF0C\n// \u90A3\u4E48\u53EF\u4EE5\u4F7F\u7528\u4E0B\u9762\u7684\u4EE3\u7801\uFF1A\nconst running_on_apple_tv = Platform.isTVOS;\n"})}),(0,l.jsx)(n.h2,{id:"\u4EE3\u7801\u4FEE\u6539-1",children:"\u4EE3\u7801\u4FEE\u6539"}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"General support for tvOS"}),": Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard."]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"Common codebase"}),": Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS."]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"\u8BBF\u95EE\u53EF\u70B9\u51FB\u7684\u63A7\u4EF6"}),": When running on Apple TV, the native view class is ",(0,l.jsx)(n.code,{children:"RCTTVView"}),", which has additional methods to make use of the tvOS focus engine. The ",(0,l.jsx)(n.code,{children:"Touchable"})," mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so ",(0,l.jsx)(n.code,{children:"TouchableWithoutFeedback"}),", ",(0,l.jsx)(n.code,{children:"TouchableHighlight"})," and ",(0,l.jsx)(n.code,{children:"TouchableOpacity"})," will work as expected. In particular:"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"onFocus"})," will be executed when the touchable view goes into focus"]}
1),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"onBlur"})," will be executed when the touchable view goes out of focus"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"onPress"}),' will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.']}),"\n"]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"TV remote/keyboard input"}),": A new native class, ",(0,l.jsx)(n.code,{children:"RCTTVRemoteHandler"}),", sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by ",(0,l.jsx)(n.code,{children:"RCTTVNavigationEventEmitter"})," (a subclass of ",(0,l.jsx)(n.code,{children:"RCTEventEmitter"}),"), that fires a JS event. This event will be picked up by instances of the ",(0,l.jsx)(n.code,{children:"TVEventHandler"})," JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of ",(0,l.jsx)(n.code,{children:"TVEventHandler"})," and listen for these events, as in the following code:"]}),"\n"]}),"\n"]}),(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-jsx",metastring:'title="React JSX"',children:"var TVEventHandler = require('TVEventHandler');\n\nclass Game2048 extends React.Component {\n _tvEventHandler: any;\n\n _enableTVEventHandler() {\n this._tvEventHandler = new TVEventHandler();\n this._tvEventHandler.enable(this, function(cmp, evt) {\n if (evt && evt.eventType === 'right') {\n cmp.setState({ board: cmp.state.board.move(2) });\n } else if (evt && evt.eventType === 'up') {\n cmp.setState({ board: cmp.state.board.move(1) });\n } else if (evt && evt.eventType === 'left') {\n cmp.setState({ board: cmp.state.board.move(0) });\n } else if (evt && evt.eventType === 'down') {\n cmp.setState({ board: cmp.state.board.move(3) });\n } else if (evt && evt.eventType === 'playPause') {\n cmp.restartGame();\n }\n });\n }\n\n _disableTVEventHandler() {\n if (this._tvEventHandler) {\n this._tvEventHandler.disable();\n delete this._tvEventHandler;\n }\n }\n\n componentDidMount() {\n this._enableTVEventHandler();\n }\n\n componentWillUnmount() {\n this._disableTVEventHandler();\n }\n}\n"})}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"Dev Menu support"}),": On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )"]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"TV remote animations"}),": ",(0,l.jsx)(n.code,{children:"RCTTVView"})," native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adju
1sted with new optional view properties."]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.em,{children:"Back navigation with the TV remote menu button"}),": The ",(0,l.jsx)(n.code,{children:"BackHandler"})," component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote."]}),"\n"]}),"\n"]})]})]})]})}function v(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(h,{...e})}):h(e)}},38469(e,n,t){t.d(n,{A:()=>r});var a=t(93227);let l=!!a.A.canUseDOM&&navigator.platform.startsWith("Mac"),i=!!a.A.canUseDOM&&navigator.platform.startsWith("Win"),r={defaultGuide:"native",defaultJsDebugger:"flipper",defaultOs:l?"macos":i?"windows":"linux",defaultPackageManager:"npm",defaultPlatform:l?"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,n,t){t.d(n,{A:()=>s});var a=t(62540);t(63696);var l=t(11750),i=t(23865);function r({children:e,className:n,hidden:t}){return(0,a.jsx)("div",{role:"tabpanel",className:(0,l.A)("tabItem_wHwb",n),hidden:t,children:e})}function s({children:e,className:n,value:t}){let{selectedValue:l,lazy:o}=(0,i.uc)(),c=t===l;return!c&&o?null:(0,a.jsx)(r,{className:n,hidden:!c,children:e})}},77779(e,n,t){t.d(n,{A:()=>h});var a=t(62540);t(63696);var l=t(11750),i=t(46065),r=t(23865),s=t(45194),o=t(83029);function c({className:e}){let{selectedValue:n,selectValue:t,tabValues:i,block:o}=(0,r.uc)(),d=[],{blockElementScrollPositionUntilNextRender:u}=(0,s.a_)(),h=e=>{let a=e.currentTarget,l=i[d.indexOf(a)].value;l!==n&&(u(a),t(l))},v=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let t=d.indexOf(e.currentTarget)+1;n=d[t]??d[0];break}case"ArrowLeft":{let t=d.indexOf(e.currentTarget)-1;n=d[t]??d[d.length-1]}}n?.focus()};return(0,a.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.A)("tabs",{"tabs--block":o},e),children:i.map(({value:e,label:t,attributes:i})=>(0,a.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{d.push(e)},onKeyDown:v,onClick:h,...i,className:(0,l.A)("tabs__item","tabItem_l0OV",i?.className,{"tabs__item--active":n===e}),children:t??e},e))})}function d({children:e}){return(0,a.jsx)("div",{className:"margin-top--md",children:e})}function u({className:e,children:n}){return(0,a.jsxs)("div",{className:(0,l.A)(i.G.tabs.container,"tabs-container","tabList_J5MA"),children:[(0,a.jsx)(c,{className:e}),(0,a.jsx)(d,{children:n})]})}function h(e){let n=(0,o.A)(),t=(0,r.OC)(e);return(0,a.jsx)(r.O_,{value:t,children:(0,a.jsx)(u,{className:e.className,children:(0,r.vT)(e.children)})},String(n))}},23865(e,n,t){t.d(n,{OC:()=>h,O_:()=>m,uc:()=>p,vT:()=>d});
1var a=t(62540),l=t(63696),i=t(49519),r=t(6743),s=t(88511),o=t(15396),c=t(89030);function d(e){return l.Children.toArray(e).filter(e=>"\n"!==e)}function u({value:e,tabValues:n}){return n.some(n=>n.value===e)}function h(e){let n,{defaultValue:t,queryString:a=!1,groupId:d}=e,h=function(e){let{values:n,children:t}=e;return(0,l.useMemo)(()=>{let e=n??l.Children.toArray(t).flatMap(e=>{if(!e)return[];if((0,l.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return[e];let n="string"==typeof e.type?e.type:e.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${n}>: 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:n,attributes:t,default:a}})=>({value:e,label:n,attributes:t,default:a})),a=(0,o.XI)(e,(e,n)=>e.value===n.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},[n,t])}(e),[v,p]=(0,l.useState)(()=>(function({defaultValue:e,tabValues:n}){if(0===n.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!u({value:e,tabValues:n}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let t=n.find(e=>e.default)??n[0];if(!t)throw Error("Unexpected error: 0 tabValues");return t.value})({defaultValue:t,tabValues:h})),[m,b]=function({queryString:e=!1,groupId:n}){let t=(0,i.W6)(),a=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)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 n??null}({queryString:e,groupId:n});return[(0,s.aZ)(a),(0,l.useCallback)(e=>{if(!a)return;let n=new URLSearchParams(t.location.search);n.set(a,e),t.replace({...t.location,search:n.toString()})},[a,t])]}({queryString:a,groupId:d}),[x,f]=function({groupId:e}){let n=e?`docusaurus.tab.${e}`:null,[t,a]=(0,c.Dv)(n);return[t,(0,l.useCallback)(e=>{n&&a.set(e)},[n,a])]}({groupId:d}),j=u({value:n=m??x,tabValues:h})?n:null;return(0,r.A)(()=>{j&&p(j)},[j]),{selectedValue:v,selectValue:(0,l.useCallback)(e=>{if(!u({value:e,tabValues:h}))throw Error(`Can't select invalid tab value=${e}`);p(e),b(e),f(e)},[b,f,h]),tabValues:h,lazy:e.lazy??!1,block:e.block??!1}}let v=(0,l.createContext)(null);function p(){let e=l.useContext(v);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function m(e){return(0,a.jsx)(v.Provider,{value:e.value,children:e.children})}},43023(e,n,t){t.d(n,{R:()=>r,x:()=>s});var a=t(63696);let l={},i=a.createContext(l);function r(e){let n=a.useContext(i);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:r(e.components),a.createElement(i.Provider,{value:n},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.