From f0d7c4d12af85584f4fbbbe7b9624aea0c499386 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Mon, 13 Apr 2026 13:18:17 +0800 Subject: [PATCH] feat(cnwebsite): cut 0.85 version, update sidebar with 6 missing entries - Added versioned docs and sidebar for 0.85 - Added 6 missing sidebar entries: troubleshooting, set-up-your-environment, accessibility, global-PerformanceResourceTiming, global-intersectionobserver, global-intersectionobserverentry --- cnwebsite/sidebars.ts | 12 + .../_canary-channel-api-warning.mdx | 7 + .../_experimental-api-warning.mdx | 5 + .../_experimental-channel-api-warning.mdx | 9 + .../_fabric-native-components.jsx | 11 + .../_getting-started-linux-android.md | 184 ++ .../_getting-started-macos-android.md | 210 ++ .../_getting-started-macos-ios.md | 152 ++ .../_getting-started-windows-android.md | 189 ++ .../_integration-with-existing-apps-ios.md | 637 +++++ .../_integration-with-existing-apps-kotlin.md | 508 ++++ .../_markdown-new-architecture-warning.mdx | 7 + .../version-0.85/_remove-global-cli.md | 8 + .../_turbo-native-modules-components.jsx | 11 + .../version-0.85/accessibility.md | 604 ++++ .../version-0.85/accessibilityinfo.md | 293 ++ .../version-0.85/actionsheetios.md | 144 + .../version-0.85/activityindicator.md | 93 + .../versioned_docs/version-0.85/alert.md | 254 ++ .../versioned_docs/version-0.85/alertios.md | 8 + .../versioned_docs/version-0.85/animated.md | 548 ++++ .../version-0.85/animatedvalue.md | 184 ++ .../version-0.85/animatedvaluexy.md | 227 ++ .../versioned_docs/version-0.85/animations.md | 673 +++++ .../version-0.85/app-extensions.md | 24 + .../versioned_docs/version-0.85/appearance.md | 114 + .../versioned_docs/version-0.85/appendix.md | 36 + .../version-0.85/appregistry.md | 382 +++ .../versioned_docs/version-0.85/appstate.md | 120 + .../version-0.85/assets/AddToBuildPhases.png | Bin 0 -> 390224 bytes .../version-0.85/assets/AddToLibraries.png | Bin 0 -> 539519 bytes .../version-0.85/assets/AddToSearchPaths.png | Bin 0 -> 357664 bytes .../assets/Alert/exampleandroid.gif | Bin 0 -> 301696 bytes .../version-0.85/assets/Alert/exampleios.gif | Bin 0 -> 397965 bytes .../Architecture/renderer-phase-one.png | Bin 0 -> 20869 bytes .../Architecture/renderer-phase-three.png | Bin 0 -> 19133 bytes .../Architecture/renderer-phase-two.png | Bin 0 -> 20710 bytes .../renderer-pipeline/data-flow.jpg | Bin 0 -> 151870 bytes .../renderer-pipeline/phase-one-render.png | Bin 0 -> 20869 bytes .../renderer-pipeline/phase-three-mount.png | Bin 0 -> 19133 bytes .../renderer-pipeline/phase-two-commit.png | Bin 0 -> 20710 bytes .../renderer-pipeline/render-pipeline-1.png | Bin 0 -> 106002 bytes .../renderer-pipeline/render-pipeline-2.png | Bin 0 -> 116478 bytes .../renderer-pipeline/render-pipeline-3.png | Bin 0 -> 120975 bytes .../renderer-pipeline/render-pipeline-4.png | Bin 0 -> 130576 bytes .../renderer-pipeline/render-pipeline-5.png | Bin 0 -> 160869 bytes .../renderer-pipeline/render-pipeline-6.png | Bin 0 -> 158175 bytes .../Architecture/threading-model/case-1.jpg | Bin 0 -> 23071 bytes .../Architecture/threading-model/case-2.jpg | Bin 0 -> 22005 bytes .../Architecture/threading-model/case-3.jpg | Bin 0 -> 24574 bytes .../Architecture/threading-model/case-4.jpg | Bin 0 -> 23660 bytes .../Architecture/threading-model/case-5.jpg | Bin 0 -> 24695 bytes .../Architecture/threading-model/case-6.jpg | Bin 0 -> 22512 bytes .../Architecture/threading-model/symbols.png | Bin 0 -> 35569 bytes .../view-flattening/diagram-one.png | Bin 0 -> 94770 bytes .../view-flattening/diagram-two.png | Bin 0 -> 85781 bytes .../xplat-implementation-diagram.png | Bin 0 -> 102242 bytes .../version-0.85/assets/Button.png | Bin 0 -> 14025 bytes .../assets/ConfigureReleaseScheme.png | Bin 0 -> 36688 bytes .../assets/DatePickerIOS/example.gif | Bin 0 -> 725526 bytes .../assets/DatePickerIOS/maximumDate.gif | Bin 0 -> 931035 bytes .../assets/DatePickerIOS/minuteInterval.png | Bin 0 -> 21903 bytes .../assets/DatePickerIOS/mode.png | Bin 0 -> 54273 bytes .../version-0.85/assets/DevMenu.png | Bin 0 -> 381552 bytes .../version-0.85/assets/DeveloperMenu.png | Bin 0 -> 30520 bytes .../assets/EmbeddedAppAndroid.png | Bin 0 -> 2926 bytes .../assets/GettingStartedAVDManagerMacOS.png | Bin 0 -> 6398 bytes .../GettingStartedAVDManagerWindows.png | Bin 0 -> 6286 bytes ...AndroidEnvironmentVariableANDROID_HOME.png | Bin 0 -> 3124 bytes ...gStartedAndroidSDKManagerInstallsMacOS.png | Bin 0 -> 14016 bytes ...tartedAndroidSDKManagerInstallsWindows.png | Bin 0 -> 8836 bytes .../GettingStartedAndroidSDKManagerMacOS.png | Bin 0 -> 36417 bytes ...gStartedAndroidSDKManagerSDKToolsMacOS.png | Bin 0 -> 24405 bytes ...tartedAndroidSDKManagerSDKToolsWindows.png | Bin 0 -> 16591 bytes ...GettingStartedAndroidSDKManagerWindows.png | Bin 0 -> 32395 bytes .../assets/GettingStartedAndroidStudioAVD.png | Bin 0 -> 614 bytes ...ettingStartedAndroidStudioWelcomeMacOS.png | Bin 0 -> 70321 bytes ...tingStartedAndroidStudioWelcomeWindows.png | Bin 0 -> 20041 bytes .../GettingStartedAndroidSuccessMacOS.png | Bin 0 -> 36011 bytes .../GettingStartedAndroidSuccessWindows.png | Bin 0 -> 41305 bytes .../assets/GettingStartedCongratulations.png | Bin 0 -> 32017 bytes .../assets/GettingStartedCreateAVDMacOS.png | Bin 0 -> 73280 bytes .../assets/GettingStartedCreateAVDWindows.png | Bin 0 -> 15834 bytes .../GettingStartedCreateAVDx86MacOS.png | Bin 0 -> 32936 bytes .../GettingStartedCreateAVDx86Windows.png | Bin 0 -> 32259 bytes .../GettingStartedXcodeCommandLineTools.png | Bin 0 -> 194656 bytes .../assets/GettingStartediOSSuccess.png | Bin 0 -> 43928 bytes .../version-0.85/assets/HermesApp.jpg | Bin 0 -> 89733 bytes .../assets/HermesDebugChromeConfig.png | Bin 0 -> 50102 bytes .../assets/HermesDebugChromeInspect.png | Bin 0 -> 68108 bytes .../assets/HermesDebugChromeMetroAddress.png | Bin 0 -> 31398 bytes .../assets/HermesDebugChromePause.png | Bin 0 -> 95059 bytes .../version-0.85/assets/HermesLogo.svg | 1 + .../version-0.85/assets/Inspector.gif | Bin 0 -> 1131627 bytes .../assets/KeyboardAvoidingView/example.gif | Bin 0 -> 334411 bytes .../assets/MaskedViewIOS/example.png | Bin 0 -> 95869 bytes .../assets/NavigationStack-NavigatorIOS.gif | Bin 0 -> 64885 bytes .../assets/ObjectObserveError.png | Bin 0 -> 2402 bytes .../version-0.85/assets/PerfUtil.png | Bin 0 -> 12585 bytes .../version-0.85/assets/ReactDevTools.png | Bin 0 -> 347213 bytes .../assets/ReactDevToolsDollarR.gif | Bin 0 -> 2087137 bytes .../assets/ReactDevToolsInspector.gif | Bin 0 -> 1903718 bytes .../assets/RunningOnDeviceCodeSigning.png | Bin 0 -> 62482 bytes .../assets/RunningOnDeviceReady.png | Bin 0 -> 7423 bytes .../assets/SegmentedControlIOS/enabled.png | Bin 0 -> 2855 bytes .../assets/SegmentedControlIOS/example.gif | Bin 0 -> 86971 bytes .../assets/SegmentedControlIOS/momentary.gif | Bin 0 -> 89883 bytes .../assets/SegmentedControlIOS/tintColor.png | Bin 0 -> 16369 bytes .../assets/SystraceBadCreateUI.png | Bin 0 -> 33353 bytes .../version-0.85/assets/SystraceBadJS.png | Bin 0 -> 14389 bytes .../version-0.85/assets/SystraceBadJS2.png | Bin 0 -> 10222 bytes .../version-0.85/assets/SystraceBadUI.png | Bin 0 -> 15926 bytes .../version-0.85/assets/SystraceExample.png | Bin 0 -> 25666 bytes .../assets/SystraceHighlightVSync.png | Bin 0 -> 3022 bytes .../assets/SystraceJSThreadExample.png | Bin 0 -> 4405 bytes .../SystraceNativeModulesThreadExample.png | Bin 0 -> 4520 bytes .../assets/SystraceRenderThreadExample.png | Bin 0 -> 6603 bytes .../assets/SystraceUIThreadExample.png | Bin 0 -> 3902 bytes .../assets/SystraceWellBehaved.png | Bin 0 -> 17228 bytes .../assets/TodayWidgetUnableToLoad.jpg | Bin 0 -> 29616 bytes .../version-0.85/assets/XcodeBuildIP.png | Bin 0 -> 167773 bytes .../version-0.85/assets/buttonExample.png | Bin 0 -> 208394 bytes .../assets/d_pressable_anatomy.svg | 1 + .../assets/d_pressable_pressing.svg | 1 + .../version-0.85/assets/d_security_chart.svg | 1 + .../assets/d_security_deep-linking.svg | 1 + .../assets/diagram_ios-android-views.svg | 1 + .../version-0.85/assets/diagram_pkce.svg | 1 + .../diagram_react-native-components.svg | 1 + .../version-0.85/assets/diagram_testing.svg | 1 + ...ViewControllerBasedStatusBarAppearance.png | Bin 0 -> 326931 bytes .../version-0.85/assets/favicon.png | Bin 0 -> 1012 bytes .../version-0.85/assets/metro-new-arch.png | Bin 0 -> 117503 bytes .../version-0.85/assets/oauth-pkce.png | Bin 0 -> 467603 bytes .../assets/p_android-ios-devices.svg | 1 + .../version-0.85/assets/p_cat1.png | Bin 0 -> 1828 bytes .../version-0.85/assets/p_cat2.png | Bin 0 -> 2241 bytes .../version-0.85/assets/p_tests-component.svg | 1 + .../version-0.85/assets/p_tests-e2e.svg | 1 + .../assets/p_tests-integration.svg | 1 + .../version-0.85/assets/p_tests-snapshot.svg | 1 + .../version-0.85/assets/p_tests-unit.svg | 1 + ...native-integration-example-high-scores.png | Bin 0 -> 2185 bytes ...native-integration-example-home-screen.png | Bin 0 -> 3479 bytes ...tive-add-react-native-integration-link.png | Bin 0 -> 6878 bytes ...e-add-react-native-integration-wire-up.png | Bin 0 -> 49470 bytes ...ve-existing-app-integration-ios-before.png | Bin 0 -> 1085 bytes .../version-0.85/asyncstorage.md | 8 + .../version-0.85/backhandler.md | 136 + .../version-0.85/boxshadowvalue.md | 73 + .../version-0.85/build-speed.md | 184 ++ .../version-0.85/building-for-tv.md | 11 + .../versioned_docs/version-0.85/button.md | 299 ++ .../versioned_docs/version-0.85/checkbox.md | 8 + .../versioned_docs/version-0.85/clipboard.md | 8 + .../versioned_docs/version-0.85/colors.md | 221 ++ .../version-0.85/communication-android.md | 153 ++ .../version-0.85/communication-ios.md | 208 ++ .../version-0.85/components-and-apis.md | 213 ++ .../version-0.85/datepickerandroid.md | 8 + .../version-0.85/datepickerios.md | 8 + .../version-0.85/debugging-native-code.md | 79 + .../version-0.85/debugging-release-builds.md | 97 + .../versioned_docs/version-0.85/debugging.md | 104 + .../version-0.85/devsettings.md | 51 + .../versioned_docs/version-0.85/dimensions.md | 154 ++ .../version-0.85/document-nodes.md | 75 + .../version-0.85/drawerlayoutandroid.md | 323 +++ .../version-0.85/dropshadowvalue.md | 55 + .../version-0.85/dynamiccolorios.md | 59 + .../versioned_docs/version-0.85/easing.md | 568 ++++ .../version-0.85/element-nodes.md | 135 + .../fabric-native-components-android.md | 500 ++++ .../fabric-native-components-ios.md | 245 ++ .../version-0.85/fabric-native-components.md | 220 ++ .../version-0.85/fabric-renderer.md | 38 + .../version-0.85/fast-refresh.md | 47 + .../versioned_docs/version-0.85/flatlist.md | 889 ++++++ .../versioned_docs/version-0.85/flexbox.md | 2419 +++++++++++++++++ .../version-0.85/gesture-responder-system.md | 63 + .../get-started-without-a-framework.md | 118 + .../version-0.85/getting-started.md | 190 ++ .../version-0.85/global-AbortController.md | 10 + .../version-0.85/global-AbortSignal.md | 10 + .../version-0.85/global-Blob.md | 10 + .../version-0.85/global-EventCounts.md | 10 + .../version-0.85/global-File.md | 10 + .../version-0.85/global-FileReader.md | 10 + .../version-0.85/global-FormData.md | 10 + .../version-0.85/global-Headers.md | 10 + .../version-0.85/global-PerformanceEntry.md | 10 + .../global-PerformanceEventTiming.md | 10 + .../global-PerformanceLongTaskTiming.md | 10 + .../version-0.85/global-PerformanceMark.md | 10 + .../version-0.85/global-PerformanceMeasure.md | 10 + .../global-PerformanceObserver.md | 58 + .../global-PerformanceObserverEntryList.md | 10 + .../global-PerformanceResourceTiming.md | 23 + .../version-0.85/global-Request.md | 10 + .../version-0.85/global-Response.md | 10 + .../versioned_docs/version-0.85/global-URL.md | 10 + .../version-0.85/global-URLSearchParams.md | 10 + .../version-0.85/global-WebSocket.md | 10 + .../version-0.85/global-XMLHttpRequest.md | 10 + .../version-0.85/global-__DEV__.md | 8 + .../version-0.85/global-alert.md | 10 + .../global-cancelAnimationFrame.md | 10 + .../version-0.85/global-cancelIdleCallback.md | 10 + .../version-0.85/global-clearInterval.md | 10 + .../version-0.85/global-clearTimeout.md | 10 + .../version-0.85/global-console.md | 55 + .../version-0.85/global-fetch.md | 10 + .../version-0.85/global-global.md | 10 + .../global-intersectionobserver.md | 108 + .../global-intersectionobserverentry.md | 74 + .../version-0.85/global-navigator.md | 10 + .../version-0.85/global-performance.md | 86 + .../version-0.85/global-process.md | 10 + .../version-0.85/global-queueMicrotask.md | 10 + .../global-requestAnimationFrame.md | 10 + .../global-requestIdleCallback.md | 10 + .../version-0.85/global-self.md | 10 + .../version-0.85/global-setInterval.md | 10 + .../version-0.85/global-setTimeout.md | 10 + .../version-0.85/global-window.md | 10 + .../versioned_docs/version-0.85/glossary.md | 48 + .../version-0.85/handling-text-input.md | 48 + .../version-0.85/handling-touches.md | 182 ++ .../version-0.85/headless-js-android.md | 392 +++ .../version-0.85/height-and-width.md | 121 + .../versioned_docs/version-0.85/hermes.md | 94 + .../version-0.85/i18nmanager.md | 169 ++ .../version-0.85/image-style-props.md | 370 +++ .../versioned_docs/version-0.85/image.md | 650 +++++ .../version-0.85/imagebackground.md | 82 + .../version-0.85/imagepickerios.md | 8 + .../versioned_docs/version-0.85/images.md | 278 ++ .../version-0.85/improvingux.md | 596 ++++ .../version-0.85/inputaccessoryview.md | 98 + .../integration-with-android-fragment.md | 199 ++ .../integration-with-existing-apps.md | 30 + .../version-0.85/interactionmanager.md | 422 +++ .../intro-react-native-components.md | 76 + .../version-0.85/intro-react.md | 538 ++++ .../version-0.85/introduction.md | 93 + .../version-0.85/javascript-environment.md | 109 + .../versioned_docs/version-0.85/keyboard.md | 146 + .../version-0.85/keyboardavoidingview.md | 111 + .../version-0.85/layout-props.md | 1360 +++++++++ .../version-0.85/layoutanimation.md | 358 +++ .../version-0.85/layoutevent.md | 72 + .../legacy/direct-manipulation.md | 441 +++ .../legacy/local-library-setup.md | 94 + .../legacy/native-components-android.md | 865 ++++++ .../legacy/native-components-ios.md | 514 ++++ .../legacy/native-modules-android.md | 1179 ++++++++ .../legacy/native-modules-intro.md | 30 + .../version-0.85/legacy/native-modules-ios.md | 632 +++++ .../legacy/native-modules-setup.md | 35 + .../versioned_docs/version-0.85/libraries.md | 120 + .../version-0.85/linking-libraries-ios.md | 59 + .../versioned_docs/version-0.85/linking.md | 691 +++++ .../versioned_docs/version-0.85/metro.md | 108 + .../versioned_docs/version-0.85/modal.md | 275 ++ .../version-0.85/more-resources.md | 47 + .../version-0.85/native-platforms.md | 32 + .../versioned_docs/version-0.85/navigation.md | 121 + .../versioned_docs/version-0.85/netinfo.md | 166 ++ .../versioned_docs/version-0.85/network.md | 298 ++ .../new-architecture-app-intro.md | 124 + .../new-architecture-app-renderer-ios.md | 90 + .../new-architecture-library-android.md | 118 + .../new-architecture-turbo-module.md | 900 ++++++ .../versioned_docs/version-0.85/nodes.md | 18 + .../optimizing-flatlist-configuration.md | 154 ++ .../optimizing-javascript-loading.md | 217 ++ .../version-0.85/other-debugging-methods.md | 36 + .../version-0.85/out-of-tree-platforms.md | 43 + .../version-0.85/panresponder.md | 183 ++ .../version-0.85/performance.md | 97 + .../version-0.85/permissionsandroid.md | 205 ++ .../versioned_docs/version-0.85/pixelratio.md | 175 ++ .../version-0.85/platform-specific-code.md | 134 + .../versioned_docs/version-0.85/platform.md | 246 ++ .../version-0.85/platformcolor.md | 91 + .../versioned_docs/version-0.85/pressable.md | 268 ++ .../versioned_docs/version-0.85/pressevent.md | 118 + .../versioned_docs/version-0.85/profiling.md | 139 + .../version-0.85/progressbarandroid.md | 131 + .../versioned_docs/version-0.85/props.md | 99 + .../version-0.85/publishing-to-app-store.md | 59 + .../version-0.85/pushnotificationios.md | 530 ++++ .../ram-bundles-inline-requires.md | 180 ++ .../version-0.85/react-native-devtools.md | 214 ++ .../react-native-gradle-plugin.md | 190 ++ .../versioned_docs/version-0.85/react-node.md | 13 + cnwebsite/versioned_docs/version-0.85/rect.md | 50 + .../version-0.85/refreshcontrol.md | 170 ++ .../version-0.85/releases/release-levels.md | 66 + .../version-0.85/releases/releases.md | 33 + .../releases/versioning-policy.md | 111 + .../version-0.85/render-pipeline.md | 232 ++ .../versioned_docs/version-0.85/roottag.md | 74 + .../version-0.85/running-on-device.md | 455 ++++ .../version-0.85/running-on-simulator-ios.md | 94 + .../version-0.85/safeareaview.md | 55 + .../version-0.85/sample-application-movies.md | 503 ++++ .../versioned_docs/version-0.85/scrollview.md | 775 ++++++ .../version-0.85/sectionlist.md | 370 +++ .../versioned_docs/version-0.85/security.md | 125 + .../version-0.85/segmentedcontrolios.md | 10 + .../version-0.85/set-up-your-environment.md | 108 + .../versioned_docs/version-0.85/settings.md | 103 + .../version-0.85/shadow-props.md | 285 ++ .../versioned_docs/version-0.85/share.md | 136 + .../version-0.85/signed-apk-android.md | 196 ++ .../versioned_docs/version-0.85/state.md | 103 + .../versioned_docs/version-0.85/statusbar.md | 513 ++++ .../version-0.85/statusbarios.md | 10 + .../version-0.85/strict-typescript-api.md | 191 ++ .../versioned_docs/version-0.85/style.md | 52 + .../versioned_docs/version-0.85/stylesheet.md | 351 +++ .../versioned_docs/version-0.85/switch.md | 133 + .../versioned_docs/version-0.85/systrace.md | 139 + .../version-0.85/targetevent.md | 29 + .../version-0.85/testing-overview.md | 287 ++ .../versioned_docs/version-0.85/text-nodes.md | 86 + .../version-0.85/text-style-props.md | 946 +++++++ cnwebsite/versioned_docs/version-0.85/text.md | 781 ++++++ .../versioned_docs/version-0.85/textinput.md | 1141 ++++++++ .../_markdown_native_deprecation.mdx | 4 + .../advanced-topics-components.md | 9 + .../advanced-topics-modules.md | 10 + .../the-new-architecture/codegen-cli.md | 69 + .../create-module-library.md | 192 ++ .../the-new-architecture/custom-cxx-types.md | 422 +++ .../direct-manipulation.md | 128 + .../fabric-component-native-commands.md | 427 +++ .../layout-measurements.md | 53 + .../native-modules-custom-events.md | 376 +++ .../native-modules-lifecycle.md | 90 + .../the-new-architecture/pure-cxx-modules.md | 503 ++++ .../turbo-modules-with-swift.md | 172 ++ .../the-new-architecture/using-codegen.md | 236 ++ .../the-new-architecture/what-is-codegen.md | 15 + .../version-0.85/timepickerandroid.md | 8 + .../versioned_docs/version-0.85/timers.md | 58 + .../version-0.85/toastandroid.md | 163 ++ .../version-0.85/touchablehighlight.md | 215 ++ .../version-0.85/touchablenativefeedback.md | 219 ++ .../version-0.85/touchableopacity.md | 151 + .../version-0.85/touchablewithoutfeedback.md | 531 ++++ .../versioned_docs/version-0.85/transforms.md | 399 +++ .../version-0.85/troubleshooting.md | 128 + .../turbo-native-modules-android.md | 359 +++ .../version-0.85/turbo-native-modules-ios.md | 181 ++ .../version-0.85/turbo-native-modules.md | 256 ++ .../versioned_docs/version-0.85/tutorial.md | 270 ++ .../versioned_docs/version-0.85/typescript.md | 238 ++ .../versioned_docs/version-0.85/upgrading.md | 59 + .../version-0.85/usecolorscheme.md | 49 + .../version-0.85/usewindowdimensions.md | 93 + .../version-0.85/using-a-listview.md | 103 + .../version-0.85/using-a-scrollview.md | 61 + .../versioned_docs/version-0.85/vibration.md | 152 ++ .../version-0.85/view-style-props.md | 504 ++++ cnwebsite/versioned_docs/version-0.85/view.md | 816 ++++++ .../version-0.85/viewpagerandroid.md | 180 ++ .../versioned_docs/version-0.85/viewtoken.md | 65 + .../version-0.85/virtualizedlist.md | 717 +++++ .../version-0.85/virtualview.md | 175 ++ .../version-0.85/xplat-implementation.md | 38 + .../version-0.85-sidebars.json | 363 +++ cnwebsite/versions.json | 1 + 374 files changed, 49508 insertions(+) create mode 100644 cnwebsite/versioned_docs/version-0.85/_canary-channel-api-warning.mdx create mode 100644 cnwebsite/versioned_docs/version-0.85/_experimental-api-warning.mdx create mode 100644 cnwebsite/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx create mode 100644 cnwebsite/versioned_docs/version-0.85/_fabric-native-components.jsx create mode 100644 cnwebsite/versioned_docs/version-0.85/_getting-started-linux-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/_getting-started-macos-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/_getting-started-macos-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/_getting-started-windows-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/_integration-with-existing-apps-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/_integration-with-existing-apps-kotlin.md create mode 100644 cnwebsite/versioned_docs/version-0.85/_markdown-new-architecture-warning.mdx create mode 100644 cnwebsite/versioned_docs/version-0.85/_remove-global-cli.md create mode 100644 cnwebsite/versioned_docs/version-0.85/_turbo-native-modules-components.jsx create mode 100644 cnwebsite/versioned_docs/version-0.85/accessibility.md create mode 100644 cnwebsite/versioned_docs/version-0.85/accessibilityinfo.md create mode 100644 cnwebsite/versioned_docs/version-0.85/actionsheetios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/activityindicator.md create mode 100644 cnwebsite/versioned_docs/version-0.85/alert.md create mode 100644 cnwebsite/versioned_docs/version-0.85/alertios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/animated.md create mode 100644 cnwebsite/versioned_docs/version-0.85/animatedvalue.md create mode 100644 cnwebsite/versioned_docs/version-0.85/animatedvaluexy.md create mode 100644 cnwebsite/versioned_docs/version-0.85/animations.md create mode 100644 cnwebsite/versioned_docs/version-0.85/app-extensions.md create mode 100644 cnwebsite/versioned_docs/version-0.85/appearance.md create mode 100644 cnwebsite/versioned_docs/version-0.85/appendix.md create mode 100644 cnwebsite/versioned_docs/version-0.85/appregistry.md create mode 100644 cnwebsite/versioned_docs/version-0.85/appstate.md create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/AddToBuildPhases.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/AddToLibraries.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/AddToSearchPaths.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Alert/exampleandroid.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Alert/exampleios.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-phase-one.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-phase-three.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-phase-two.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-pipeline/data-flow.jpg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-pipeline/phase-one-render.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-pipeline/phase-three-mount.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-pipeline/phase-two-commit.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-pipeline/render-pipeline-1.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-pipeline/render-pipeline-2.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-pipeline/render-pipeline-3.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-pipeline/render-pipeline-4.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-pipeline/render-pipeline-5.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/renderer-pipeline/render-pipeline-6.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/threading-model/case-1.jpg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/threading-model/case-2.jpg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/threading-model/case-3.jpg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/threading-model/case-4.jpg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/threading-model/case-5.jpg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/threading-model/case-6.jpg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/threading-model/symbols.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/view-flattening/diagram-one.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/view-flattening/diagram-two.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Architecture/xplat-implementation/xplat-implementation-diagram.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Button.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/ConfigureReleaseScheme.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/DatePickerIOS/example.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/DatePickerIOS/maximumDate.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/DatePickerIOS/minuteInterval.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/DatePickerIOS/mode.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/DevMenu.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/DeveloperMenu.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/EmbeddedAppAndroid.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAVDManagerMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAVDManagerWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidSDKManagerInstallsWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidSDKManagerMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidSDKManagerWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidStudioAVD.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidStudioWelcomeMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidStudioWelcomeWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidSuccessMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedAndroidSuccessWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedCongratulations.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedCreateAVDMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedCreateAVDWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedCreateAVDx86MacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedCreateAVDx86Windows.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartedXcodeCommandLineTools.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/GettingStartediOSSuccess.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/HermesApp.jpg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/HermesDebugChromeConfig.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/HermesDebugChromeInspect.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/HermesDebugChromeMetroAddress.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/HermesDebugChromePause.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/HermesLogo.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/Inspector.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/KeyboardAvoidingView/example.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/MaskedViewIOS/example.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/NavigationStack-NavigatorIOS.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/ObjectObserveError.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/PerfUtil.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/ReactDevTools.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/ReactDevToolsDollarR.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/ReactDevToolsInspector.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/RunningOnDeviceCodeSigning.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/RunningOnDeviceReady.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SegmentedControlIOS/enabled.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SegmentedControlIOS/example.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SegmentedControlIOS/momentary.gif create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SegmentedControlIOS/tintColor.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceBadCreateUI.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceBadJS.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceBadJS2.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceBadUI.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceExample.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceHighlightVSync.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceJSThreadExample.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceNativeModulesThreadExample.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceRenderThreadExample.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceUIThreadExample.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/SystraceWellBehaved.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/TodayWidgetUnableToLoad.jpg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/XcodeBuildIP.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/buttonExample.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/d_pressable_anatomy.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/d_pressable_pressing.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/d_security_chart.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/d_security_deep-linking.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/diagram_ios-android-views.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/diagram_pkce.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/diagram_react-native-components.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/diagram_testing.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/disable-UIViewControllerBasedStatusBarAppearance.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/favicon.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/metro-new-arch.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/oauth-pkce.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/p_android-ios-devices.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/p_cat1.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/p_cat2.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/p_tests-component.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/p_tests-e2e.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/p_tests-integration.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/p_tests-snapshot.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/p_tests-unit.svg create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/react-native-add-react-native-integration-example-high-scores.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/react-native-add-react-native-integration-example-home-screen.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/react-native-add-react-native-integration-link.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/react-native-add-react-native-integration-wire-up.png create mode 100644 cnwebsite/versioned_docs/version-0.85/assets/react-native-existing-app-integration-ios-before.png create mode 100644 cnwebsite/versioned_docs/version-0.85/asyncstorage.md create mode 100644 cnwebsite/versioned_docs/version-0.85/backhandler.md create mode 100644 cnwebsite/versioned_docs/version-0.85/boxshadowvalue.md create mode 100644 cnwebsite/versioned_docs/version-0.85/build-speed.md create mode 100644 cnwebsite/versioned_docs/version-0.85/building-for-tv.md create mode 100644 cnwebsite/versioned_docs/version-0.85/button.md create mode 100644 cnwebsite/versioned_docs/version-0.85/checkbox.md create mode 100644 cnwebsite/versioned_docs/version-0.85/clipboard.md create mode 100644 cnwebsite/versioned_docs/version-0.85/colors.md create mode 100644 cnwebsite/versioned_docs/version-0.85/communication-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/communication-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/components-and-apis.md create mode 100644 cnwebsite/versioned_docs/version-0.85/datepickerandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.85/datepickerios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/debugging-native-code.md create mode 100644 cnwebsite/versioned_docs/version-0.85/debugging-release-builds.md create mode 100644 cnwebsite/versioned_docs/version-0.85/debugging.md create mode 100644 cnwebsite/versioned_docs/version-0.85/devsettings.md create mode 100644 cnwebsite/versioned_docs/version-0.85/dimensions.md create mode 100644 cnwebsite/versioned_docs/version-0.85/document-nodes.md create mode 100644 cnwebsite/versioned_docs/version-0.85/drawerlayoutandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.85/dropshadowvalue.md create mode 100644 cnwebsite/versioned_docs/version-0.85/dynamiccolorios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/easing.md create mode 100644 cnwebsite/versioned_docs/version-0.85/element-nodes.md create mode 100644 cnwebsite/versioned_docs/version-0.85/fabric-native-components-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/fabric-native-components-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/fabric-native-components.md create mode 100644 cnwebsite/versioned_docs/version-0.85/fabric-renderer.md create mode 100644 cnwebsite/versioned_docs/version-0.85/fast-refresh.md create mode 100644 cnwebsite/versioned_docs/version-0.85/flatlist.md create mode 100644 cnwebsite/versioned_docs/version-0.85/flexbox.md create mode 100644 cnwebsite/versioned_docs/version-0.85/gesture-responder-system.md create mode 100644 cnwebsite/versioned_docs/version-0.85/get-started-without-a-framework.md create mode 100644 cnwebsite/versioned_docs/version-0.85/getting-started.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-AbortController.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-AbortSignal.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-Blob.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-EventCounts.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-File.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-FileReader.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-FormData.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-Headers.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-PerformanceEntry.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-PerformanceEventTiming.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-PerformanceLongTaskTiming.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-PerformanceMark.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-PerformanceMeasure.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-PerformanceObserver.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-PerformanceObserverEntryList.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-PerformanceResourceTiming.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-Request.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-Response.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-URL.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-URLSearchParams.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-WebSocket.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-XMLHttpRequest.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-__DEV__.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-alert.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-cancelAnimationFrame.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-cancelIdleCallback.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-clearInterval.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-clearTimeout.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-console.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-fetch.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-global.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-intersectionobserver.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-intersectionobserverentry.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-navigator.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-performance.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-process.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-queueMicrotask.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-requestAnimationFrame.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-requestIdleCallback.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-self.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-setInterval.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-setTimeout.md create mode 100644 cnwebsite/versioned_docs/version-0.85/global-window.md create mode 100644 cnwebsite/versioned_docs/version-0.85/glossary.md create mode 100644 cnwebsite/versioned_docs/version-0.85/handling-text-input.md create mode 100644 cnwebsite/versioned_docs/version-0.85/handling-touches.md create mode 100644 cnwebsite/versioned_docs/version-0.85/headless-js-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/height-and-width.md create mode 100644 cnwebsite/versioned_docs/version-0.85/hermes.md create mode 100644 cnwebsite/versioned_docs/version-0.85/i18nmanager.md create mode 100644 cnwebsite/versioned_docs/version-0.85/image-style-props.md create mode 100644 cnwebsite/versioned_docs/version-0.85/image.md create mode 100644 cnwebsite/versioned_docs/version-0.85/imagebackground.md create mode 100644 cnwebsite/versioned_docs/version-0.85/imagepickerios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/images.md create mode 100644 cnwebsite/versioned_docs/version-0.85/improvingux.md create mode 100644 cnwebsite/versioned_docs/version-0.85/inputaccessoryview.md create mode 100644 cnwebsite/versioned_docs/version-0.85/integration-with-android-fragment.md create mode 100644 cnwebsite/versioned_docs/version-0.85/integration-with-existing-apps.md create mode 100644 cnwebsite/versioned_docs/version-0.85/interactionmanager.md create mode 100644 cnwebsite/versioned_docs/version-0.85/intro-react-native-components.md create mode 100644 cnwebsite/versioned_docs/version-0.85/intro-react.md create mode 100644 cnwebsite/versioned_docs/version-0.85/introduction.md create mode 100644 cnwebsite/versioned_docs/version-0.85/javascript-environment.md create mode 100644 cnwebsite/versioned_docs/version-0.85/keyboard.md create mode 100644 cnwebsite/versioned_docs/version-0.85/keyboardavoidingview.md create mode 100644 cnwebsite/versioned_docs/version-0.85/layout-props.md create mode 100644 cnwebsite/versioned_docs/version-0.85/layoutanimation.md create mode 100644 cnwebsite/versioned_docs/version-0.85/layoutevent.md create mode 100644 cnwebsite/versioned_docs/version-0.85/legacy/direct-manipulation.md create mode 100644 cnwebsite/versioned_docs/version-0.85/legacy/local-library-setup.md create mode 100644 cnwebsite/versioned_docs/version-0.85/legacy/native-components-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/legacy/native-components-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/legacy/native-modules-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/legacy/native-modules-intro.md create mode 100644 cnwebsite/versioned_docs/version-0.85/legacy/native-modules-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/legacy/native-modules-setup.md create mode 100644 cnwebsite/versioned_docs/version-0.85/libraries.md create mode 100644 cnwebsite/versioned_docs/version-0.85/linking-libraries-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/linking.md create mode 100644 cnwebsite/versioned_docs/version-0.85/metro.md create mode 100644 cnwebsite/versioned_docs/version-0.85/modal.md create mode 100644 cnwebsite/versioned_docs/version-0.85/more-resources.md create mode 100644 cnwebsite/versioned_docs/version-0.85/native-platforms.md create mode 100644 cnwebsite/versioned_docs/version-0.85/navigation.md create mode 100644 cnwebsite/versioned_docs/version-0.85/netinfo.md create mode 100644 cnwebsite/versioned_docs/version-0.85/network.md create mode 100644 cnwebsite/versioned_docs/version-0.85/new-architecture-app-intro.md create mode 100644 cnwebsite/versioned_docs/version-0.85/new-architecture-app-renderer-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/new-architecture-library-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/new-architecture-turbo-module.md create mode 100644 cnwebsite/versioned_docs/version-0.85/nodes.md create mode 100644 cnwebsite/versioned_docs/version-0.85/optimizing-flatlist-configuration.md create mode 100644 cnwebsite/versioned_docs/version-0.85/optimizing-javascript-loading.md create mode 100644 cnwebsite/versioned_docs/version-0.85/other-debugging-methods.md create mode 100644 cnwebsite/versioned_docs/version-0.85/out-of-tree-platforms.md create mode 100644 cnwebsite/versioned_docs/version-0.85/panresponder.md create mode 100644 cnwebsite/versioned_docs/version-0.85/performance.md create mode 100644 cnwebsite/versioned_docs/version-0.85/permissionsandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.85/pixelratio.md create mode 100644 cnwebsite/versioned_docs/version-0.85/platform-specific-code.md create mode 100644 cnwebsite/versioned_docs/version-0.85/platform.md create mode 100644 cnwebsite/versioned_docs/version-0.85/platformcolor.md create mode 100644 cnwebsite/versioned_docs/version-0.85/pressable.md create mode 100644 cnwebsite/versioned_docs/version-0.85/pressevent.md create mode 100644 cnwebsite/versioned_docs/version-0.85/profiling.md create mode 100644 cnwebsite/versioned_docs/version-0.85/progressbarandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.85/props.md create mode 100644 cnwebsite/versioned_docs/version-0.85/publishing-to-app-store.md create mode 100644 cnwebsite/versioned_docs/version-0.85/pushnotificationios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/ram-bundles-inline-requires.md create mode 100644 cnwebsite/versioned_docs/version-0.85/react-native-devtools.md create mode 100644 cnwebsite/versioned_docs/version-0.85/react-native-gradle-plugin.md create mode 100644 cnwebsite/versioned_docs/version-0.85/react-node.md create mode 100644 cnwebsite/versioned_docs/version-0.85/rect.md create mode 100644 cnwebsite/versioned_docs/version-0.85/refreshcontrol.md create mode 100644 cnwebsite/versioned_docs/version-0.85/releases/release-levels.md create mode 100644 cnwebsite/versioned_docs/version-0.85/releases/releases.md create mode 100644 cnwebsite/versioned_docs/version-0.85/releases/versioning-policy.md create mode 100644 cnwebsite/versioned_docs/version-0.85/render-pipeline.md create mode 100644 cnwebsite/versioned_docs/version-0.85/roottag.md create mode 100644 cnwebsite/versioned_docs/version-0.85/running-on-device.md create mode 100644 cnwebsite/versioned_docs/version-0.85/running-on-simulator-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/safeareaview.md create mode 100644 cnwebsite/versioned_docs/version-0.85/sample-application-movies.md create mode 100644 cnwebsite/versioned_docs/version-0.85/scrollview.md create mode 100644 cnwebsite/versioned_docs/version-0.85/sectionlist.md create mode 100644 cnwebsite/versioned_docs/version-0.85/security.md create mode 100644 cnwebsite/versioned_docs/version-0.85/segmentedcontrolios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/set-up-your-environment.md create mode 100644 cnwebsite/versioned_docs/version-0.85/settings.md create mode 100644 cnwebsite/versioned_docs/version-0.85/shadow-props.md create mode 100644 cnwebsite/versioned_docs/version-0.85/share.md create mode 100644 cnwebsite/versioned_docs/version-0.85/signed-apk-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/state.md create mode 100644 cnwebsite/versioned_docs/version-0.85/statusbar.md create mode 100644 cnwebsite/versioned_docs/version-0.85/statusbarios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/strict-typescript-api.md create mode 100644 cnwebsite/versioned_docs/version-0.85/style.md create mode 100644 cnwebsite/versioned_docs/version-0.85/stylesheet.md create mode 100644 cnwebsite/versioned_docs/version-0.85/switch.md create mode 100644 cnwebsite/versioned_docs/version-0.85/systrace.md create mode 100644 cnwebsite/versioned_docs/version-0.85/targetevent.md create mode 100644 cnwebsite/versioned_docs/version-0.85/testing-overview.md create mode 100644 cnwebsite/versioned_docs/version-0.85/text-nodes.md create mode 100644 cnwebsite/versioned_docs/version-0.85/text-style-props.md create mode 100644 cnwebsite/versioned_docs/version-0.85/text.md create mode 100644 cnwebsite/versioned_docs/version-0.85/textinput.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/_markdown_native_deprecation.mdx create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/advanced-topics-components.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/advanced-topics-modules.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/codegen-cli.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/create-module-library.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/custom-cxx-types.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/direct-manipulation.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/fabric-component-native-commands.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/layout-measurements.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/native-modules-custom-events.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/native-modules-lifecycle.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/pure-cxx-modules.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/turbo-modules-with-swift.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/using-codegen.md create mode 100644 cnwebsite/versioned_docs/version-0.85/the-new-architecture/what-is-codegen.md create mode 100644 cnwebsite/versioned_docs/version-0.85/timepickerandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.85/timers.md create mode 100644 cnwebsite/versioned_docs/version-0.85/toastandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.85/touchablehighlight.md create mode 100644 cnwebsite/versioned_docs/version-0.85/touchablenativefeedback.md create mode 100644 cnwebsite/versioned_docs/version-0.85/touchableopacity.md create mode 100644 cnwebsite/versioned_docs/version-0.85/touchablewithoutfeedback.md create mode 100644 cnwebsite/versioned_docs/version-0.85/transforms.md create mode 100644 cnwebsite/versioned_docs/version-0.85/troubleshooting.md create mode 100644 cnwebsite/versioned_docs/version-0.85/turbo-native-modules-android.md create mode 100644 cnwebsite/versioned_docs/version-0.85/turbo-native-modules-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.85/turbo-native-modules.md create mode 100644 cnwebsite/versioned_docs/version-0.85/tutorial.md create mode 100644 cnwebsite/versioned_docs/version-0.85/typescript.md create mode 100644 cnwebsite/versioned_docs/version-0.85/upgrading.md create mode 100644 cnwebsite/versioned_docs/version-0.85/usecolorscheme.md create mode 100644 cnwebsite/versioned_docs/version-0.85/usewindowdimensions.md create mode 100644 cnwebsite/versioned_docs/version-0.85/using-a-listview.md create mode 100644 cnwebsite/versioned_docs/version-0.85/using-a-scrollview.md create mode 100644 cnwebsite/versioned_docs/version-0.85/vibration.md create mode 100644 cnwebsite/versioned_docs/version-0.85/view-style-props.md create mode 100644 cnwebsite/versioned_docs/version-0.85/view.md create mode 100644 cnwebsite/versioned_docs/version-0.85/viewpagerandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.85/viewtoken.md create mode 100644 cnwebsite/versioned_docs/version-0.85/virtualizedlist.md create mode 100644 cnwebsite/versioned_docs/version-0.85/virtualview.md create mode 100644 cnwebsite/versioned_docs/version-0.85/xplat-implementation.md create mode 100644 cnwebsite/versioned_sidebars/version-0.85-sidebars.json diff --git a/cnwebsite/sidebars.ts b/cnwebsite/sidebars.ts index 800080854ea..b04f354b8ba 100644 --- a/cnwebsite/sidebars.ts +++ b/cnwebsite/sidebars.ts @@ -10,10 +10,12 @@ export default { 'using-a-scrollview', 'using-a-listview', 'platform-specific-code', + 'troubleshooting', 'more-resources', ], 环境搭建: [ 'environment-setup', + 'set-up-your-environment', 'integration-with-existing-apps', 'integration-with-android-fragment', 'building-for-tv', @@ -53,6 +55,13 @@ export default { collapsed: false, items: ['network', 'security'], }, + { + type: 'category', + label: '无障碍', + collapsible: false, + collapsed: false, + items: ['accessibility'], + }, ], 版本规划: [ 'releases/releases', @@ -260,6 +269,9 @@ export default { 'global-PerformanceMeasure', 'global-PerformanceObserver', 'global-PerformanceObserverEntryList', + 'global-PerformanceResourceTiming', + 'global-intersectionobserver', + 'global-intersectionobserverentry', 'global-process', 'global-queueMicrotask', 'global-Request', diff --git a/cnwebsite/versioned_docs/version-0.85/_canary-channel-api-warning.mdx b/cnwebsite/versioned_docs/version-0.85/_canary-channel-api-warning.mdx new file mode 100644 index 00000000000..e8b3934b850 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_canary-channel-api-warning.mdx @@ -0,0 +1,7 @@ +:::tip Canary 🧪 + +**This API is currently only available in React Native’s Canary and Experimental channels.** + +If you want to try it out, please [enable the Canary Channel](releases/release-levels) in your app. + +::: diff --git a/cnwebsite/versioned_docs/version-0.85/_experimental-api-warning.mdx b/cnwebsite/versioned_docs/version-0.85/_experimental-api-warning.mdx new file mode 100644 index 00000000000..d9a9173d63e --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_experimental-api-warning.mdx @@ -0,0 +1,5 @@ +:::important Experimental 🧪 + +**This API is experimental.** Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production. + +::: diff --git a/cnwebsite/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx b/cnwebsite/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx new file mode 100644 index 00000000000..8f290343124 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx @@ -0,0 +1,9 @@ +:::tip Experimental Feature 🧪 + +**This API is currently only available in React Native’s Experimental channels.** + +Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production. + +If you want to try it out, please [enable the Experimental Channel](releases/release-levels) in your app. + +::: diff --git a/cnwebsite/versioned_docs/version-0.85/_fabric-native-components.jsx b/cnwebsite/versioned_docs/version-0.85/_fabric-native-components.jsx new file mode 100644 index 00000000000..fc6a3171a4f --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_fabric-native-components.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import IOSContent from './fabric-native-components-ios.md'; +import AndroidContent from './fabric-native-components-android.md'; + +export function FabricNativeComponentsIOS() { + return ; +} + +export function FabricNativeComponentsAndroid() { + return ; +} diff --git a/cnwebsite/versioned_docs/version-0.85/_getting-started-linux-android.md b/cnwebsite/versioned_docs/version-0.85/_getting-started-linux-android.md new file mode 100644 index 00000000000..8330f7fe3ea --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_getting-started-linux-android.md @@ -0,0 +1,184 @@ +## 安装依赖 + +必须安装的依赖有：Node、JDK 和 Android Studio。 + +虽然你可以使用`任何编辑器`来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。 + +### Node + +参照 Node 官方的[Linux 安装指南](https://nodejs.org/en/download/package-manager/)来安装 Node 22.11.0 以上的版本。 + +> 注意：强烈建议始终选择 Node 当前的 LTS （长期维护）版本，一般是偶数版本，不要选择偏实验性质的奇数版本。 + +安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。 + +> 注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，react native 不能正常识别！ + +``` +# 使用nrm工具切换淘宝源 +npx nrm use taobao + +# 如果之后需要切换回官方源可使用 +npx nrm use npm +``` + +### Yarn + +[Yarn](http://yarnpkg.com)是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。 + +``` +npm install -g yarn +``` + +安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用`yarn`代替`npm install`命令，用`yarn add 某第三方库名`代替`npm install 某第三方库名`。 + +### Watchman + +参照[Watchman 的安装说明](https://facebook.github.io/watchman/docs/install.html#buildinstall)来从源码来编译和安装 Watchman。 + +> [Watchman](https://facebook.github.io/watchman/docs/install.html)是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（metro 可以快速捕捉文件的变化从而实现实时刷新）。 + +### Java Development Kit + +React Native 当前需要 Java Development Kit [JDK] 17。你可以在命令行中输入 +`javac -version`（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。如果版本不合要求，则可以去[Temurin](https://adoptium.net/?variant=openjdk17&jvmVariant=hotspot)或[Oracle JDK](https://www.oracle.com/java/technologies/downloads/#java17)上下载(后者下载需注册登录)。 + +> 低于 0.73 版本的 React Native 需要 JDK 11 版本，而低于 0.67 的需要 JDK 8 版本。 + +### Android 开发环境 + +如果你之前没有接触过 Android 的开发环境，那么请做好心理准备，这一过程相当繁琐。请`万分仔细`地阅读下面的说明，严格对照文档进行配置操作。 + +> 译注：请注意！！！国内用户`必须必须必须`有稳定的代理软件，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，无法进行开发工作。某些代理软件可能只提供浏览器的代理功能，或只针对特定网站代理等等，请自行研究配置或更换其他软件。总之如果报错中出现有网址，那就是因为链接源仓库的网络链接被阻断了，这一阻断现象可能因时间、地区、运营商而不同。 + +> 也可以尝试参考这里的做法[设置阿里云的 maven 镜像源](https://github.com/scwang90/SmartRefreshLayout/issues/1376#issuecomment-938422964)，但这个做法可能随 gradle 或者 rn 版本的不同而失效。 + +

1. 安装 Android Studio

+ +[首先下载和安装 Android Studio](https://developer.android.google.cn/studio/)，国内用户可能无法打开官方链接，可自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项： + +- `Android SDK` +- `Android SDK Platform` +- `Android Virtual Device` + +然后点击"Next"来安装选中的组件。 + +> 如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。 + +安装完成后，看到欢迎界面时，就可以进行下面的操作了。 + +

2. 安装 Android SDK

+ +Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是`Android 15 (VanillaIceCream)`版本的 SDK（注意 SDK 版本不等于对用户系统版本的要求，RN 目前最低要求的 Android 版本请点击[这里](https://github.com/facebook/react-native?tab=readme-ov-file#-requirements)查看）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。 + +你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。 + +> SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是**Appearance & Behavior** → **System Settings** → **Android SDK**。 + +在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开`Android 15 (VanillaIceCream)`选项，确保勾选了下面这些组件（如果看不到这个界面，则需要使用稳定的代理软件）： + +- `Android SDK Platform 35` +- `Intel x86 Atom_64 System Image`（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件） + +然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的`36.0.0`版本。你可以同时安装多个其他版本。 + +最后点击"Apply"来下载和安装这些组件。 + +

3. 配置 ANDROID_HOME 环境变量

+ +React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。 + +具体的做法是把下面的命令加入到 shell 的配置文件中。如果你的 shell 是 zsh，则配置文件为`~/.zshrc`，如果是 bash 则为`~/.bash_profile`（可以使用`echo $0`命令查看你所使用的 shell）： + +```shell +# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。 +export ANDROID_HOME=$HOME/Library/Android/sdk +export PATH=$PATH:$ANDROID_HOME/platform-tools +export PATH=$PATH:$ANDROID_HOME/emulator +``` + +使用`source $HOME/.zshrc`命令来使环境变量设置立即生效（否则重启后才生效）。可以使用`echo $ANDROID_HOME`检查此变量是否已正确设置 + +> 请确保你正确指定了 Android SDK 路径。你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是**Appearance & Behavior** → **System Settings** → **Android SDK** + +## 创建新项目 + +使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的`npx`命令来使用： + +```shell +npx @react-native-community/cli init AwesomeProject +``` + +如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +### [可选参数] 指定版本或项目模板 + +你可以使用`--version`参数（注意是`两`个杠）创建指定版本的项目。例如： + +```shell +npx @react-native-community/cli init AwesomeProject --version X.XX.X +``` + +还可以使用`--template`来使用一些社区提供的模板。 + +## 准备 Android 设备 + +你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。后面我们所有的文档除非特别说明，并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。此外还有很多第三方提供的模拟器如[Genymotion](https://www.genymotion.com/download)、BlueStack 等。一般来说官方模拟器免费、功能完整，但性能较差。第三方模拟器性能较好，但可能需要付费，或带有广告。 + +### 使用 Android 真机 + +你也可以使用 Android 真机来代替模拟器进行开发，只需用 usb 数据线连接到电脑，然后遵照[在设备上运行](running-on-device.md)这篇文档的说明操作即可。 + +### 使用 Android 模拟器 + +你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样： + +Android Studio AVD Manager + +如果你刚刚才安装 Android Studio，那么可能需要先[创建一个虚拟设备](https://developer.android.com/studio/run/managing-avds.html)。点击"Create Virtual Device..."，然后选择所需的设备类型并点击"Next". + +> 译注：请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。 + +> 建议先开启[虚拟加速技术](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux)以提高模拟器性能。 + +然后点击"Next"和"Finish"来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了。然后我们可以尝试运行应用了。 + +## 编译并运行 React Native 应用 + +确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行`yarn android`或者`yarn react-native run-android`： + +``` +cd AwesomeProject +yarn android +# 或者 +yarn react-native run-android +``` + +此命令会对项目的原生部分进行编译，同时在另外一个命令行中启动`Metro`服务对 js 代码进行实时打包处理（类似 webpack）。`Metro`服务也可以使用`yarn start`命令单独启动。 + +如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程`严重依赖稳定的代理软件`，否则将频繁遭遇链接超时和断开，导致无法运行。 + +`npx react-native run-android`只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。 + +> 译注：建议在`run-android`成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。 + +> 如果你无法正常运行，遇到奇奇怪怪的红屏错误，先回头`仔细对照文档检查`，然后可以看看[问题讨论区](https://github.com/reactnativecn/react-native-website/issues)。不同时期不同版本可能会碰到不同的问题，我们会在论坛中及时解答更新。但请注意***千万不要***执行 bundle 命令，那样会导致代码完全无法刷新。 + +### 修改项目 + +现在你已经成功运行了项目，我们可以开始尝试动手改一改了： + +- 使用你喜欢的文本编辑器打开`App.tsx`并随便改上几行 +- 按两下 R 键，或是在开发者菜单中选择 _Reload_，就可以看到你的最新修改。 + +### 完成了！ + +恭喜！你已经成功运行并修改了你的第一个 React Native 应用 + +
+ +## 接下来？ + +如果你想把 React Native 集成到现有的原生项目中，则请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +如果你想从头开始学习 React Native 开发，可以从[简介](getting-started.md)文档开始。 diff --git a/cnwebsite/versioned_docs/version-0.85/_getting-started-macos-android.md b/cnwebsite/versioned_docs/version-0.85/_getting-started-macos-android.md new file mode 100644 index 00000000000..a21a77e14d9 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_getting-started-macos-android.md @@ -0,0 +1,210 @@ +## 安装依赖 + +必须安装的依赖有：Node、JDK 和 Android Studio。 + +虽然你可以使用`任何编辑器`来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。 + +### Node & Watchman + +我们推荐使用[Homebrew](http://brew.sh/)来安装 Node 和 Watchman。在命令行中执行下列命令安装（如安装较慢可以尝试阿里云的[镜像源](https://developer.aliyun.com/mirror/homebrew)）： + +```shell +brew install node@22 +brew install watchman +``` + +如果你已经安装了 Node，请检查其版本是否在 22.11.0 以上。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。 + +> 注意：强烈建议始终选择 Node 当前的 LTS （长期维护）版本，一般是偶数版本，不要选择偏实验性质的奇数版本。 + +> 注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！ + +```shell +# 使用nrm工具切换淘宝源 +npx nrm use taobao + +# 如果之后需要切换回官方源可使用 +npx nrm use npm +``` + +[Watchman](https://facebook.github.io/watchman)则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。 + +### Yarn + +[Yarn](http://yarnpkg.com)是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。 + +``` +npm install -g yarn +``` + +安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用`yarn`代替`npm install`命令，用`yarn add 某第三方库名`代替`npm install 某第三方库名`。 + +### Java Development Kit + +我们推荐使用[Homebrew](http://brew.sh/)来安装由 Azul 提供的 名为 **Zulu** 的 OpenJDK 发行版。此发行版**同时为 Intel 和 M1 芯片提供支持**。在 M1 芯片架构的 Mac 上相比其他 JDK 在编译时有明显的性能优势。 + +```shell +brew install --cask zulu@17 + +# 获得 JDK 安装程序的路径 +brew info --cask zulu@17 + +# ==> zulu@17: <版本号> +# https://www.azul.com/downloads/ +# Installed +# /opt/homebrew/Caskroom/zulu@17/<版本号> (185.8MB) (注意在 Intel 芯片的 Mac 上，路径可能是 /usr/local/Caskroom/zulu@17/<版本号>) +# Installed using the formulae.brew.sh API on 2024-06-06 at 10:00:00 + +# 导航到上面打印出来的路径 +open /opt/homebrew/Caskroom/zulu@17/<版本号> +# 或者可能是 /usr/local/Caskroom/zulu@17/<版本号> +``` + +打开 Finder，双击 `Double-Click to Install Azul Zulu JDK 17.pkg` 包来安装 JDK。 + +安装 JDK 后，请更新 `JAVA_HOME` 环境变量。如果你是按照上述步骤操作，JDK 很可能位于 `/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home` + +React Native 当前需要 Java Development Kit [JDK] 17，不建议使用更高版本或更低版本，可能会碰到问题。你可以在命令行中输入 +`javac -version`（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。 + +> 低于 0.73 版本的 React Native 需要 JDK 11 版本，而低于 0.67 的需要 JDK 8 版本。 + +### Android 开发环境 + +如果你之前没有接触过 Android 的开发环境，那么请做好心理准备，这一过程相当繁琐。请`万分仔细`地阅读下面的说明，严格对照文档进行配置操作。 + +> 译注：请注意！！！国内用户`必须必须必须`有稳定的代理软件，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，无法进行开发工作。某些代理软件可能只提供浏览器的代理功能，或只针对特定网站代理等等，请自行研究配置或更换其他软件。总之如果报错中出现有网址，那就是因为链接源仓库的网络链接被阻断了，这一阻断现象可能因时间、地区、运营商而不同。 + +> 也可以尝试参考这里的做法[设置阿里云的 maven 镜像源](https://github.com/scwang90/SmartRefreshLayout/issues/1376#issuecomment-938422964)，但这个做法可能随 gradle 或者 rn 版本的不同而失效。 + +

1. 安装 Android Studio

+ +[首先下载和安装 Android Studio](https://developer.android.google.cn/studio/)，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项： + +- `Android SDK` +- `Android SDK Platform` +- `Android Virtual Device` + +然后点击"Next"来安装选中的组件。 + +> 如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。 + +安装完成后，看到欢迎界面时，就可以进行下面的操作了。 + +

2. 安装 Android SDK

+ +Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是`Android 15 (VanillaIceCream)`版本的 SDK（注意 SDK 版本不等于对用户系统版本的要求，RN 目前最低要求的 Android 版本请点击[这里](https://github.com/facebook/react-native?tab=readme-ov-file#-requirements)查看）。你可以在 Android Studio 的 SDK Manager 中选择同时安装各种不同版本的 SDK。 + +你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。 + +![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png) + +> SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是**Appearance & Behavior** → **System Settings** → **Android SDK**。 + +在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开`Android 15 (VanillaIceCream)`选项，确保勾选了下面这些组件（如果看不到这个界面，则需要使用稳定的代理软件）： + +- `Android SDK Platform 35` +- `Intel x86 Atom_64 System Image`（针对 Intel 芯片的官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）或是`Google APIs ARM 64 v8a System Image`（针对 Apple Silicon 系列机型） + +然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的`36.0.0`版本。你可以同时安装多个其他版本。 + +点击"Apply"来下载和安装选中的这些组件。 + +#### 3. 配置 ANDROID_HOME 环境变量 + +React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。 + +具体的做法是把下面的命令加入到 shell 的配置文件中。如果你的 shell 是 zsh，则配置文件为`~/.zshrc`，如果是 bash 则为`~/.bash_profile`（可以使用`echo $0`命令查看你所使用的 shell。）： + +```shell +# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚 +export ANDROID_HOME=$HOME/Library/Android/sdk +export PATH=$PATH:$ANDROID_HOME/emulator +export PATH=$PATH:$ANDROID_HOME/platform-tools +``` + +> 译注：~表示用户目录，即`/Users/你的用户名/`，而小数点开头的文件在 Finder 中是隐藏的，并且这个文件有可能并不存在。可在终端下使用`vi ~/.zshrc`命令创建或编辑。如不熟悉 vi 操作，请点击[这里](http://www.eepw.com.cn/article/48018.htm)学习。 + +使用`source $HOME/.zshrc`命令来使环境变量设置立即生效（否则重启后才生效）。可以使用`echo $ANDROID_HOME`检查此变量是否已正确设置。 + +> 请确保你正确指定了 Android SDK 路径。你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是**Appearance & Behavior** → **System Settings** → **Android SDK**。 + +

创建新项目

+ +使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的`npx`命令来使用： + +> **必须要看的注意事项**：请`不要`单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请`不要`使用与核心模块同名的项目名（如 react, react-native 等）。请`不要`在目录、文件名中使用中文、空格等特殊符号。 + +```shell +npx @react-native-community/cli init AwesomeProject +``` + +如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +

[可选参数] 指定版本或项目模板

+ +你可以使用`--version`参数（注意是`两`个杠）创建指定版本的项目。例如： + +```shell +npx @react-native-community/cli init AwesomeProject --version X.XX.X +``` + +还可以使用`--template`参数来使用一些社区提供的模板。 + +## 准备 Android 设备 + +你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。后面我们所有的文档除非特别说明，并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。此外还有很多第三方提供的模拟器如[Genymotion](https://www.genymotion.com/download)、BlueStack 等。一般来说官方模拟器免费、功能完整，但性能较差。第三方模拟器性能较好，但可能需要付费，或带有广告。 + +### 使用 Android 真机 + +你也可以使用 Android 真机来代替模拟器进行开发，只需用 usb 数据线连接到电脑，然后遵照[在设备上运行](running-on-device.md)这篇文档的说明操作即可。 + +### 使用 Android 模拟器 + +你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样： + +![Android Studio AVD Manager](/docs/assets/GettingStartedAndroidStudioAVD.png) + +如果你刚刚才安装 Android Studio，那么可能需要先[创建一个虚拟设备](https://developer.android.com/studio/run/managing-avds.html)。点击"Create Virtual Device..."，然后选择所需的设备类型并点击"Next". + +> 译注：请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。 + +## 编译并运行 React Native 应用 + +确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行`yarn android`或者`yarn react-native run-android`： + +``` +cd AwesomeProject +yarn android +# 或者 +yarn react-native run-android +``` + +此命令会对项目的原生部分进行编译，同时在另外一个命令行中启动`Metro`服务对 js 代码进行实时打包处理（类似 webpack）。`Metro`服务也可以使用`yarn start`命令单独启动。 + +如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程`严重依赖稳定的代理软件`，否则将频繁遭遇链接超时和断开，导致无法运行。 + +`npx react-native run-android`只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。 + +> 译注：建议在`run-android`成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。 + +> 如果你无法正常运行，遇到奇奇怪怪的红屏错误，先回头`仔细对照文档检查`，然后可以看看[问题讨论区](https://github.com/reactnativecn/react-native-website/issues)。不同时期不同版本可能会碰到不同的问题，我们会在论坛中及时解答更新。但请注意***千万不要***执行 bundle 命令，那样会导致代码完全无法刷新。 + +### 修改项目 + +现在你已经成功运行了项目，我们可以开始尝试动手改一改了： + +- 使用你喜欢的文本编辑器打开`App.js`并随便改上几行 +- 按两下 R 键，或是在开发者菜单中选择 _Reload_，就可以看到你的最新修改。 + +### 完成了！ + +恭喜！你已经成功运行并修改了你的第一个 React Native 应用 + +
+ +## 接下来？ + +如果你想把 React Native 集成到现有的原生项目中，则请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +如果你想从头开始学习 React Native 开发，可以从[简介](getting-started.md)文档开始。 diff --git a/cnwebsite/versioned_docs/version-0.85/_getting-started-macos-ios.md b/cnwebsite/versioned_docs/version-0.85/_getting-started-macos-ios.md new file mode 100644 index 00000000000..a3f1e0a23cc --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_getting-started-macos-ios.md @@ -0,0 +1,152 @@ +## 安装依赖 + +必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。 + +虽然你可以使用`任何编辑器`来开发应用（编写 js 代码），但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境。 + +### Node & Watchman + +我们推荐使用[Homebrew](http://brew.sh/)来安装 Node 和 Watchman。在命令行中执行下列命令安装（如安装较慢可以尝试阿里云的[镜像源](https://developer.aliyun.com/mirror/homebrew)）： + +``` +brew install node@22 +brew install watchman +``` + +如果你已经安装了 Node，请检查其版本是否在 22.11.0 以上。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。 + +> 注意：强烈建议始终选择 Node 当前的 LTS （长期维护）版本，一般是偶数版本，不要选择偏实验性质的奇数版本。 + +> 注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！ + +``` +# 使用nrm工具切换淘宝源 +npx nrm use taobao + +# 如果之后需要切换回官方源可使用 +npx nrm use npm +``` + +[Watchman](https://facebook.github.io/watchman)则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。 + +### Yarn + +[Yarn](https://classic.yarnpkg.com)是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。 + +``` +npm install -g yarn +``` + +安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用`yarn`代替`npm install`命令，用`yarn add 某第三方库名`代替`npm install 某第三方库名`。 + +### Xcode + +React Native 目前需要[Xcode](https://developer.apple.com/xcode/downloads/) 14.1 或更高版本（建议选择尽量新的版本）。你可以通过 [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12)或是到[Apple 开发者官网](https://developer.apple.com/xcode/downloads/)上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。 + +#### Xcode 的命令行工具 + +启动 Xcode，并在`Xcode | Preferences | Locations`菜单中检查一下是否装有某个版本的`Command Line Tools`。Xcode 的命令行工具中包含一些必须的工具，比如`git`等。 + +![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png) + +#### 在 Xcode 中安装 iOS 模拟器 + +安装模拟器只需打开 Xcode > Preferences... 菜单，然后选择 Components 选项，即可看到各种可供安装的不同的 iOS 版本的模拟器。 + +#### CocoaPods + +[CocoaPods](https://cocoapods.org/)是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 CocoaPods。CocoaPods 的版本需要 1.10 以上。 + +> 当然安装可能也不顺利，请使用代理软件。 + +```sh +sudo gem install cocoapods +``` + +或者可以使用 brew 来安装 + +```sh +brew install cocoapods +``` + +要了解更多信息，可以访问[CocoaPods 的官网](https://guides.cocoapods.org/using/getting-started.html)。 + +## 创建新项目 + +使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的`npx`命令来使用（注意 init 命令默认会创建最新的版本）： + +```shell +npx @react-native-community/cli init AwesomeProject +``` + +> **注意一**：请`不要`在目录、文件名中使用中文、空格等特殊符号。请`不要`单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请`不要`使用与核心模块同名的项目名（如 react, react-native 等）。 + +> **注意二**：0.60 及以上版本的原生依赖是通过 CocoaPods 集成安装的。CocoaPods 的源必须使用代理访问（镜像源也无效）。如果在 CocoaPods 的依赖安装步骤卡住（命令行停在 Installing CocoaPods dependencies 很久，或各种网络超时重置报错，或在 ios 目录中无法生成.xcworkspace 文件），请务必检查确定你的代理配置是否对命令行有效。 + +如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +### [可选参数] 指定版本或项目模板 + +你可以使用`--version`参数（注意是`两`个杠）创建指定版本的项目。注意版本号必须精确到两个小数点。 + +```shell +npx @react-native-community/cli init AwesomeProject --version X.XX.X +``` + +还可以使用`--template`来使用一些社区提供的模板。 + +### [可选文件] Xcode 的环境配置文件 + +从 React Native 版本 0.69 开始，可以使用模板提供的 `.xcode.env` 文件来配置 Xcode 环境。 + +`.xcode.env` 文件中包含一个环境变量示例，用于在 `NODE_BINARY` 变量中导出 `node` 执行文件的路径。这是将构建基础结构与`node`系统版本解耦的**推荐做法**。如果与默认值不同，则应使用您自己的路径或您自己的`node`版本管理器来自定义此变量。 + +此外，您还可以在构建脚本阶段中添加任何其他环境变量并导入 `.xcode.env` 文件。如果您需要运行需要特定环境的脚本，这也是将构建阶段与特定环境解耦的**推荐做法**。 + +## 编译并运行 React Native 应用 + +在你的项目目录中运行`yarn ios`或者`yarn react-native run-ios`： + +```sh +cd AwesomeProject +yarn ios +# 或者 +yarn react-native run-ios +``` + +此命令会对项目的原生部分进行编译，同时在另外一个命令行中启动`Metro`服务对 js 代码进行实时打包处理（类似 webpack）。`Metro`服务也可以使用`yarn start`命令单独启动。 + +> 提示：如果此命令无法正常运行，请使用 Xcode 运行来查看具体错误（run-ios 的报错没有任何具体信息）。注意 0.60 版本之后的主项目文件是`.xcworkspace`，不是`.xcodeproj`！ + +很快就应该能看到 iOS 模拟器自动启动并运行你的项目。 + +在正常编译完成后，开发期间请保持`Metro`命令行窗口运行而不要关闭。以后需要再次运行项目时，如果没有修改过 ios 目录中的任何文件，则只需单独启动`yarn start`命令。如果对 ios 目录中任何文件有修改，则需要再次运行`yarn ios`命令完成原生部分的编译。 + +![AwesomeProject on iOS](/docs/assets/GettingStartediOSSuccess.png) + +`yarn ios`只是运行应用的方式之一。你也可以在 Xcode 中直接运行应用。注意 0.60 版本之后的主项目文件是`.xcworkspace`，不是`.xcodeproj`。 + +> 如果你无法正常运行，先回头`仔细对照文档检查`，然后可以看看[讨论区](https://github.com/reactnativecn/react-native-website/issues)。 + +### 在真机上运行 + +上面的命令会自动在 iOS 模拟器上运行应用，如果你想在真机上运行，则请阅读[在设备上运行](running-on-device.md)这篇文档。 + +### 修改项目 + +现在你已经成功运行了项目，我们可以开始尝试动手改一改了： + +- 使用你喜欢的编辑器打开`App.js`并随便改上几行。 +- 在 iOS 模拟器中按下`⌘-R`就可以刷新 APP 并看到你的最新修改！（如果没有反应，请检查模拟器的 Hardware 菜单中，connect hardware keyboard 选项是否选中开启） + +### 完成了！ + +恭喜！你已经成功运行并修改了你的第一个 React Native 应用。 + +
+ +## 接下来？ + +如果你想把 React Native 集成到现有的原生项目中，则请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +如果你想从头开始学习 React Native 开发，可以从[简介](getting-started.md)文档开始。 diff --git a/cnwebsite/versioned_docs/version-0.85/_getting-started-windows-android.md b/cnwebsite/versioned_docs/version-0.85/_getting-started-windows-android.md new file mode 100644 index 00000000000..c372e6fa846 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_getting-started-windows-android.md @@ -0,0 +1,189 @@ +## 安装依赖 + +必须安装的依赖有：Node、JDK 和 Android Studio。 + +虽然你可以使用`任何编辑器`来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。 + +### Node, JDK + +我们建议直接使用搜索引擎搜索下载 Node 和[Java SE Development Kit (JDK)](https://www.oracle.com/java/technologies/downloads/#java17) + +注意 Node 的版本应大于等于 22.11.0，安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。 + +> 注意：强烈建议始终选择 Node 当前的 LTS （长期维护）版本，一般是偶数版本，不要选择偏实验性质的奇数版本。 + +> 注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！ + +React Native 需要 Java Development Kit [JDK] 17。你可以在命令行中输入 +`javac -version`（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。如果版本不合要求，则可以去[Temurin](https://adoptium.net/?variant=openjdk17&jvmVariant=hotspot)或[Oracle JDK](https://www.oracle.com/java/technologies/downloads/#java17)上下载(后者下载需注册登录)。 + +> 低于 0.73 版本的 React Native 需要 JDK 11 版本，而低于 0.67 的需要 JDK 8 版本。 + +``` +# 使用nrm工具切换淘宝源 +npx nrm use taobao + +# 如果之后需要切换回官方源可使用 +npx nrm use npm +``` + +### Yarn + +[Yarn](http://yarnpkg.com)是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。 + +``` +npm install -g yarn +``` + +安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用`yarn`代替`npm install`命令，用`yarn add 某第三方库名`代替`npm install 某第三方库名`。 + +### Android 开发环境 + +如果你之前没有接触过 Android 的开发环境，那么请做好心理准备，这一过程相当繁琐。请`万分仔细`地阅读下面的说明，严格对照文档进行配置操作。 + +> 译注：请注意！！！国内用户`必须必须必须`有稳定的代理软件，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，无法进行开发工作。某些代理软件可能只提供浏览器的代理功能，或只针对特定网站代理等等，请自行研究配置或更换其他软件。总之如果报错中出现有网址，那就是因为链接源仓库的网络链接被阻断了，这一阻断现象可能因时间、地区、运营商而不同。 + +> 也可以尝试参考这里的做法[设置阿里云的 maven 镜像源](https://github.com/scwang90/SmartRefreshLayout/issues/1376#issuecomment-938422964)，但这个做法可能随 gradle 或者 rn 版本的不同而失效。 + +#### 1. 安装 Android Studio + +[首先下载和安装 Android Studio](https://developer.android.google.cn/studio/)，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项： + +- `Android SDK` +- `Android SDK Platform` +- `Android Virtual Device` + +然后点击"Next"来安装选中的组件。 + +> 如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。 + +安装完成后，看到欢迎界面时，就可以进行下面的操作了。 + +#### 2. 安装 Android SDK + +Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是`Android 15 (VanillaIceCream)`版本的 SDK（注意 SDK 版本不等于对用户系统版本的要求，RN 目前最低要求的 Android 版本请点击[这里](https://github.com/facebook/react-native?tab=readme-ov-file#-requirements)查看）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。 + +你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。 + +![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png) + +> SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是**Appearance & Behavior** → **System Settings** → **Android SDK**。 + +在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开`Android 15 (VanillaIceCream)`选项，确保勾选了下面这些组件（如果你看不到这个界面，则需要使用稳定的代理软件）： + +- `Android SDK Platform 35` +- `Intel x86 Atom_64 System Image`（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件） + +然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的`36.0.0`版本。你可以同时安装多个其他版本。 + +最后点击"Apply"来下载和安装这些组件。 + +#### 3. 配置 ANDROID_HOME 环境变量 + +React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。 + +打开`控制面板` -> `系统和安全` -> `系统` -> `高级系统设置` -> `高级` -> `环境变量` -> `新建`，创建一个名为`ANDROID_HOME`的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）： + +![ANDROID_HOME Environment Variable](/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png) + +SDK 默认是安装在下面的目录： + +```powershell +C:\Users\你的用户名\AppData\Local\Android\Sdk +``` + +你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是**Appearance & Behavior** → **System Settings** → **Android SDK**。 + +你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。 + +#### 4. 把工具目录添加到环境变量 Path + +打开`控制面板` -> `系统和安全` -> `系统` -> `高级系统设置` -> `高级` -> `环境变量`，选中**Path**变量，然后点击**编辑**。点击**新建**然后把以下工具目录路径添加进去：platform-tools + +```powershell +%ANDROID_HOME%\platform-tools +``` + +## 创建新项目 + +使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的`npx`命令来使用： + +> **必须要看的注意事项一**：请`不要`在目录、文件名中使用`中文、空格`等特殊符号。请`不要`单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请`不要`使用与核心模块同名的项目名（如 react, react-native 等）。 + +> **必须要看的注意事项二**：请`不要`在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！ + +> **必须要看的注意事项三**：请`不要`使用一些移植的终端环境，例如`git bash`或`mingw`等等，这些在 windows 下可能导致找不到环境变量。请使用系统自带的命令行（CMD 或 powershell）运行。 + +```shell +npx @react-native-community/cli init AwesomeProject +``` + +如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +### [可选参数] 指定版本或项目模板 + +你可以使用`--version`参数（注意是`两`个杠）创建指定版本的项目。注意版本号必须精确到两个小数点。 + +```shell +npx @react-native-community/cli init AwesomeProject --version X.XX.X +``` + +还可以使用`--template`来使用一些社区提供的模板。 + +## 准备 Android 设备 + +你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。后面我们所有的文档除非特别说明，并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。此外还有很多第三方提供的模拟器如[Genymotion](https://www.genymotion.com/download)、BlueStack 等。一般来说官方模拟器免费、功能完整，但性能较差。第三方模拟器性能较好，但可能需要付费，或带有广告。 + +### 使用 Android 真机 + +你也可以使用 Android 真机来代替模拟器进行开发，只需用 usb 数据线连接到电脑，然后遵照[在设备上运行](running-on-device.md)这篇文档的说明操作即可。 + +### 使用 Android 模拟器 + +你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样： + +![Android Studio AVD Manager](/docs/assets/GettingStartedAndroidStudioAVD.png) + +如果你刚刚才安装 Android Studio，那么可能需要先[创建一个虚拟设备](https://developer.android.com/studio/run/managing-avds.html)。点击"Create Virtual Device..."，然后选择所需的设备类型并点击"Next". + +> 译注：请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。 + +## 编译并运行 React Native 应用 + +确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行`yarn android`或者`yarn react-native run-android`： + +``` +cd AwesomeProject +yarn android +# 或者 +yarn react-native run-android +``` + +此命令会对项目的原生部分进行编译，同时在另外一个命令行中启动`Metro`服务对 js 代码进行实时打包处理（类似 webpack）。`Metro`服务也可以使用`yarn start`命令单独启动。 + +如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程`严重依赖稳定的代理软件`，否则将频繁遭遇链接超时和断开，导致无法运行。 + +`npx react-native run-android`只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。 + +> 译注：建议在`run-android`成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。 + +> 如果你无法正常运行，遇到奇奇怪怪的红屏错误，先回头`仔细对照文档检查`，然后可以看看[问题讨论区](https://github.com/reactnativecn/react-native-website/issues)。不同时期不同版本可能会碰到不同的问题，我们会在论坛中及时解答更新。但请注意***千万不要***执行 bundle 命令，那样会导致代码完全无法刷新。 + +### 修改项目 + +现在你已经成功运行了项目，我们可以开始尝试动手改一改了： + +- 使用你喜欢的文本编辑器打开`App.js`并随便改上几行 +- 按两下 R 键，或是在开发者菜单中选择 _Reload_，就可以看到你的最新修改。 + +### 完成了！ + +恭喜！你已经成功运行并修改了你的第一个 React Native 应用 + +
+ +## 接下来？ + +如果你想把 React Native 集成到现有的原生项目中，则请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +如果你想从头开始学习 React Native 开发，可以从[简介](getting-started.md)文档开始。 diff --git a/cnwebsite/versioned_docs/version-0.85/_integration-with-existing-apps-ios.md b/cnwebsite/versioned_docs/version-0.85/_integration-with-existing-apps-ios.md new file mode 100644 index 00000000000..48a21245382 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_integration-with-existing-apps-ios.md @@ -0,0 +1,637 @@ +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + +## 关键概念 + +将 React Native 组件集成到 iOS 应用程序中的关键步骤是： + +1. 设置正确的目录结构。 +2. 安装必要的 NPM 依赖项。 +3. 在 Podfile 配置中添加 React Native。 +4. 为你的第一个 React Native 屏幕编写 TypeScript 代码。 +5. 使用`RCTRootView`将 React Native 与你的 iOS 代码集成。 +6. 通过运行打包器并查看应用程序运行情况来测试你的集成。 + +## 使用社区模板 + +在您遵循本指南时，我们建议您参考[React Native 社区模板](https://github.com/react-native-community/template/)。该模板包含一个**最小化的 iOS 应用**，将帮助您理解如何将 React Native 集成到现有的 iOS 应用中。 + +## 准备工作 + +请按照[设置开发环境](getting-started)指南指南来配置您的开发环境，以便构建 iOS 平台的 React Native 应用。 +本指南还假设您熟悉 iOS 开发的基础知识，如创建`UIViewController`和编辑`Podfile`文件。 + +### 1. 设置目录结构 + +为确保顺利体验，请为您的集成 React Native 项目创建一个新文件夹，然后**将现有的 iOS 项目移动到** `/ios` 子文件夹中。 + +## 2. 安装 NPM 依赖 + +进入根目录并运行以下命令： + +``` +curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/package.json +``` + +这将从[社区模板](https://github.com/react-native-community/template/blob/0.78-stable/template/package.json) 复制 `package.json` 文件到您的项目中。 + +接下来，运行以下命令安装 NPM 包： + + + + +```shell +npm install +``` + + + + +```shell +yarn install +``` + + + + +安装过程创建了一个新的 `node_modules` 文件夹。该文件夹存储了构建项目所需的 JavaScript 依赖项。 + +将 `node_modules/` 添加到您的 `.gitignore` 文件中（[社区默认文件](https://github.com/react-native-community/template/blob/0.78-stable/template/_gitignore)）。 + +### 3. 安装开发工具 + +### Xcode 命令行工具 + +安装命令行工具。选择 Xcode 菜单中的 **Settings...（或 Preferences...）**。转到位置面板，并安装工具，方法是选择命令行工具下拉菜单中最新的版本。 + +![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png) + +### CocoaPods + +[CocoaPods](https://cocoapods.org) 是 iOS 和 macOS 开发的包管理工具。我们使用它将实际的 React Native 框架代码添加到您的当前项目中。 + +我们建议使用 [Homebrew](https://brew.sh/) 安装 CocoaPods： + +```shell +brew install cocoapods +``` + +## 4. 将 React Native 添加到您的应用 + +### 配置 CocoaPods + +要配置 CocoaPods，我们需要两个文件： + +- 一个 **Gemfile** 文件，定义了我们需要的 Ruby 依赖项。 +- 一个 **Podfile** 文件，定义了如何正确安装我们的依赖项。 + +对于 **Gemfile**，请进入您的项目根目录并运行以下命令： + +```sh +curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/Gemfile +``` + +这将下载 Gemfile 文件。 +对于 **Podfile**，请进入您的项目 `ios` 文件夹并运行以下命令： + +```sh +curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/ios/Podfile +``` + +请使用社区模板 作为 [Gemfile](https://github.com/react-native-community/template/blob/0.78-stable/template/Gemfile) 和 [Podfile](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile) 的参考。 + +:::note +请记住更改 [Podfile](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile#L17) 中的这行，以匹配您的应用名称。 +::: + +现在，我们需要运行一些额外的命令来安装 Ruby Gem 和 Pods。 +进入 `ios` 文件夹并运行以下命令： + +```sh +bundle install +bundle exec pod install +``` + +第一个命令将安装 Ruby 依赖项，第二个命令将实际将 React Native 代码集成到您的应用程序中，以便您的 iOS 文件可以导入 React Native 头文件。 + +## 5. 编写 TypeScript 代码 + +现在我们将修改原生 iOS 应用程序以集成 React Native。 + +我们将编写的第一个代码片段是实际的 React Native 代码，该代码将集成到我们的应用程序中。 + +### 创建一个 `index.js` 文件 + +首先，在 React Native 项目的根目录中创建一个空的 `index.js` 文件。 + +`index.js` 是 React Native 应用程序的起点，并且总是需要。它可以是一个小文件，该文件 `import` 其他文件，这些文件是您的 React Native 组件或应用程序的一部分，或者它可以包含所有需要的代码。 + +我们的 `index.js` 文件应如下所示（[社区模板文件](https://github.com/react-native-community/template/blob/0.78-stable/template/index.js) 作为参考）： + +```js +import {AppRegistry} from 'react-native'; +import App from './App'; + +AppRegistry.registerComponent('HelloWorld', () => App); +``` + +### 创建一个 `App.tsx` 文件 + +让我们创建一个 `App.tsx` 文件。这是一个 [TypeScript](https://www.typescriptlang.org/) 文件，可以包含 [JSX]() 表达式。它包含我们要集成到 iOS 应用程序中的根 React Native 组件（[链接](https://github.com/react-native-community/template/blob/0.78-stable/template/App.tsx)）： + +```tsx +import React from 'react'; +import { + SafeAreaView, + ScrollView, + StatusBar, + StyleSheet, + Text, + useColorScheme, + View, +} from 'react-native'; + +import { + Colors, + DebugInstructions, + Header, + ReloadInstructions, +} from 'react-native/Libraries/NewAppScreen'; + +function App(): React.JSX.Element { + const isDarkMode = useColorScheme() === 'dark'; + + const backgroundStyle = { + backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, + }; + + return ( + + + +
+ + Step One + + Edit App.tsx to + change this screen and see your edits. + + See your changes + + Debug + + + + + ); +} + +const styles = StyleSheet.create({ + title: { + fontSize: 24, + fontWeight: '600', + }, + bold: { + fontWeight: '700', + }, +}); + +export default App; +``` + +[社区模板文件](https://github.com/react-native-community/template/blob/0.78-stable/template/App.tsx) 作为参考 + +## 5. 与 iOS 代码集成 + +我们现在需要添加一些原生代码，以便启动 React Native 运行时并告诉它渲染我们的 React 组件。 + +### 准备工作 + +React Native 的初始化与 iOS 应用的其他部分无关。 + +React Native 可以通过一个名为 `RCTReactNativeFactory` 的类来初始化，该类负责处理 React Native 的生命周期。 + +一旦类被初始化，您可以启动一个 React Native 视图，提供一个 `UIWindow` 对象，或者您可以要求工厂生成一个 `UIView`，您可以在任何 `UIViewController` 中加载它。 + +在以下示例中，我们将创建一个可以加载 React Native 视图的 ViewController。 + +#### 创建一个 ReactViewController + +从模板创建一个新文件 (⌘+N) 并选择 Cocoa Touch Class 模板。 + +确保选择 `UIViewController` 作为 "Subclass of" 字段。 + + + + +现在打开 `ReactViewController.m` 文件并应用以下更改 + +```diff title="ReactViewController.m" +#import "ReactViewController.h" ++#import ++#import ++#import ++#import + + +@interface ReactViewController () + +@end + ++@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate ++@end + +-@implementation ReactViewController ++@implementation ReactViewController { ++ RCTReactNativeFactory *_factory; ++ id _factoryDelegate; ++} + + - (void)viewDidLoad { + [super viewDidLoad]; + // Do any additional setup after loading the view. ++ _factoryDelegate = [ReactNativeFactoryDelegate new]; ++ _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new]; ++ _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate]; ++ self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"]; + } + +@end + ++@implementation ReactNativeFactoryDelegate ++ ++- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge ++{ ++ return [self bundleURL]; ++} ++ ++- (NSURL *)bundleURL ++{ ++#if DEBUG ++ return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"]; ++#else ++ return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"]; ++#endif ++} + +@end + +``` + + + + +现在打开 `ReactViewController.swift` 文件并应用以下更改 + +```diff title="ReactViewController.swift" +import UIKit ++import React ++import React_RCTAppDelegate ++import ReactAppDependencyProvider + +class ReactViewController: UIViewController { ++ var reactNativeFactory: RCTReactNativeFactory? ++ var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate? + + override func viewDidLoad() { + super.viewDidLoad() ++ reactNativeFactoryDelegate = ReactNativeDelegate() ++ reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider() ++ reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!) ++ view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld") + + } +} + ++class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate { ++ override func sourceURL(for bridge: RCTBridge) -> URL? { ++ self.bundleURL() ++ } ++ ++ override func bundleURL() -> URL? { ++ #if DEBUG ++ RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index") ++ #else ++ Bundle.main.url(forResource: "main", withExtension: "jsbundle") ++ #endif ++ } ++ ++} +``` + + + + +#### 在 rootViewController 中展示 React Native 视图 + +最后，我们可以展示我们的 React Native 视图。为此，我们需要一个可以承载视图的新视图控制器，我们可以在其中加载 JS 内容。 + +1. 从 Xcode 中，创建一个新 `UIViewController`（我们称之为 `ReactViewController`）。 +2. 让初始 `ViewController` 展示 `ReactViewController`。有几种方法可以做到这一点，具体取决于您的应用程序。对于此示例，我们假设您有一个按钮，用于模态展示 React Native。 + + + + +```diff title="ViewController.m" +#import "ViewController.h" ++#import "ReactViewController.h" + +@interface ViewController () + +@end + +- @implementation ViewController ++@implementation ViewController { ++ ReactViewController *reactViewController; ++} + + - (void)viewDidLoad { + [super viewDidLoad]; + // Do any additional setup after loading the view. + self.view.backgroundColor = UIColor.systemBackgroundColor; ++ UIButton *button = [UIButton new]; ++ [button setTitle:@"Open React Native" forState:UIControlStateNormal]; ++ [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal]; ++ [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted]; ++ [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside]; ++ [self.view addSubview:button]; + ++ button.translatesAutoresizingMaskIntoConstraints = NO; ++ [NSLayoutConstraint activateConstraints:@[ ++ [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor], ++ [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor], ++ [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor], ++ [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor], ++ ]]; + } + ++- (void)presentReactNative ++{ ++ if (reactViewController == NULL) { ++ reactViewController = [ReactViewController new]; ++ } ++ [self presentViewController:reactViewController animated:YES completion:nil]; ++} + +@end +``` + + + + +```diff title="ViewController.swift" +import UIKit + +class ViewController: UIViewController { + ++ var reactViewController: ReactViewController? + + override func viewDidLoad() { + super.viewDidLoad() + // Do any additional setup after loading the view. + self.view.backgroundColor = .systemBackground + ++ let button = UIButton() ++ button.setTitle("Open React Native", for: .normal) ++ button.setTitleColor(.systemBlue, for: .normal) ++ button.setTitleColor(.blue, for: .highlighted) ++ button.addAction(UIAction { [weak self] _ in ++ guard let self else { return } ++ if reactViewController == nil { ++ reactViewController = ReactViewController() ++ } ++ present(reactViewController!, animated: true) ++ }, for: .touchUpInside) ++ self.view.addSubview(button) ++ ++ button.translatesAutoresizingMaskIntoConstraints = false ++ NSLayoutConstraint.activate([ ++ button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor), ++ button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor), ++ button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor), ++ button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor), ++ ]) + } +} +``` + + + + +确保禁用沙盒脚本。为此，在 Xcode 中，点击您的应用，然后点击构建设置。过滤脚本并设置 `User Script Sandboxing` 为 `NO`。这一步是为了在调试和发布版本之间正确切换 [Hermes 引擎](https://github.com/facebook/hermes/blob/main/README.md)。 + +![Disable Sandboxing](/docs/assets/disable-sandboxing.png); + +最后，确保在您的 `Info.plist` 文件中添加 `UIViewControllerBasedStatusBarAppearance` 键，值为 `NO`。 + +![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png) + +## 6. 测试您的集成 + +您已经完成了将 React Native 与您的应用程序集成所需的所有基本步骤。现在我们将启动 [Metro bundler](https://metrobundler.dev/) 来构建您的 TypeScript 应用程序代码。Metro 的 HTTP 服务器从您的开发环境共享 bundle 到模拟器或设备。这允许 [热重载](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading)。 + +首先，您需要在项目根目录中创建一个 `metro.config.js` 文件，如下所示： + +```js +const {getDefaultConfig} = require('@react-native/metro-config'); +module.exports = getDefaultConfig(__dirname); +``` + +您可以查看[社区模板文件](https://github.com/react-native-community/template/blob/0.78-stable/template/metro.config.js) 作为参考。 + +Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object: + +```sh +echo {} > .watchmanconfig +``` + +一旦您有了配置文件，您可以运行 bundler。在项目根目录下运行以下命令： + + + + +```shell +npm start +``` + + + + +```shell +yarn start +``` + + + + +现在，像往常一样构建和运行您的 iOS 应用。 + +一旦您到达您的 React 驱动的 Activity 中，它应该从开发服务器加载 JavaScript 代码并显示： + +
+ +### 在 Xcode 中创建发布版本 + +您可以使用 Xcode 创建您的发布版本！唯一的额外步骤是添加一个脚本，当应用程序构建时，将您的 JS 和图像打包到 iOS 应用程序中。 + +1. 在 Xcode 中，选择您的应用 +2. 点击 `Build Phases` +3. 点击左上角的 `+` 并选择 `New Run Script Phase` +4. 点击 `Run Script` 行并重命名脚本为 `Bundle React Native code and images` +5. 在文本框中粘贴以下脚本 + +```sh title="Build React Native code and image" +set -e + +WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh" +REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh" + +/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE" +``` + +6. 将脚本拖放到名为 `[CP] Embed Pods Frameworks` 的脚本之前。 + +现在，如果您为发布版本构建您的应用，它将按预期工作。 + +## 7. 将初始属性传递给 React Native 视图 + +在某些情况下，您可能希望从原生应用传递一些信息到 JavaScript。例如，您可能希望传递当前登录用户的用户 ID 和令牌，以便从数据库中检索信息。 + +这可以通过使用 `RCTReactNativeFactory` 类的 `view(withModuleName:initialProperty)` 重载的 `initialProperties` 参数来实现。以下步骤展示了如何实现。 + +### 更新 App.tsx 文件以读取初始属性 + +打开 `App.tsx` 文件并添加以下代码： + +```diff title="App.tsx" +import { + Colors, + DebugInstructions, + Header, + ReloadInstructions, +} from 'react-native/Libraries/NewAppScreen'; + +-function App(): React.JSX.Element { ++function App(props): React.JSX.Element { + const isDarkMode = useColorScheme() === 'dark'; + + const backgroundStyle = { + backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, + }; + + return ( + + + +
+- +- Step One +- +- Edit App.tsx to +- change this screen and see your edits. +- +- See your changes +- +- Debug +- ++ UserID: {props.userID} ++ Token: {props.token} + + + + ); +} + +const styles = StyleSheet.create({ + title: { + fontSize: 24, + fontWeight: '600', ++ marginLeft: 20, + }, + bold: { + fontWeight: '700', + }, +}); + +export default App; +``` + +这些更改将告诉 React Native 您的 App 组件现在接受一些属性。`RCTreactNativeFactory` 将负责在组件渲染时将它们传递给它。 + +### 更新原生代码以将初始属性传递给 JavaScript + + + + +修改 `ReactViewController.mm` 以将初始属性传递给 JavaScript。 + +```diff title="ReactViewController.mm" + - (void)viewDidLoad { + [super viewDidLoad]; + // Do any additional setup after loading the view. + + _factoryDelegate = [ReactNativeFactoryDelegate new]; + _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new]; + _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate]; +- self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"]; ++ self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{ ++ @"userID": @"12345678", ++ @"token": @"secretToken" ++ }]; +} +``` + + + + +修改 `ReactViewController.swift` 以将初始属性传递给 React Native 视图。 + +```diff title="ReactViewController.swift" + override func viewDidLoad() { + super.viewDidLoad() + reactNativeFactoryDelegate = ReactNativeDelegate() + reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider() + reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!) +- view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld") ++ view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [ ++ "userID": "12345678", ++ "token": "secretToken" ++]) + + } +} +``` + + + + +3. 再次运行您的应用。您应该在展示 `ReactViewController` 后看到以下屏幕： + +
+ +
+ +### 现在呢？ + +此时，您可以继续像往常一样开发您的应用。请参阅我们的[调试](debugging)和[部署](running-on-device)文档，了解更多关于使用 React Native 的信息。 diff --git a/cnwebsite/versioned_docs/version-0.85/_integration-with-existing-apps-kotlin.md b/cnwebsite/versioned_docs/version-0.85/_integration-with-existing-apps-kotlin.md new file mode 100644 index 00000000000..6f066155861 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_integration-with-existing-apps-kotlin.md @@ -0,0 +1,508 @@ +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + +## 核心概念 + +把 React Native 组件集成到 Android 应用中有如下几个主要步骤： + +1. 配置好项目结构。 +2. 安装必要的 JavaScript 依赖。 +3. 在 Gradle 中配置 React Native 依赖。 +4. 创建 ts 文件，编写 React Native 组件的 ts 代码。 +5. 使用 ReactActivity 来把 React Native 集成到你的 Android 项目代码中。 +6. 运行 Metro 服务，验证集成结果。 + +## 使用社区模板 + +在跟随本指南时，我们建议你使用 [React Native Community Template](https://github.com/react-native-community/template/) 作为参考。模板包含一个 **精简的 Android app** 并且可以帮助你理解如何将 React Native 集成到现有的 Android 应用中。 + +## 开发环境准备 + +首先按照[开发环境搭建教程](environment-setup)来安装 React Native 在 Android 平台上所需的一切依赖软件。 + +### 1. 配置项目目录结构 + +首先创建一个空目录用于存放 React Native 项目，然后在其中创建一个`/android`子目录，把你现有的 Android 项目拷贝到`/android`子目录中。 + +### 2. 安装 JavaScript 依赖包 + +在根目录下运行以下命令： + +```shell +curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json +``` + +这将把 [React Native 社区模板](https://github.com/react-native-community/template/blob/0.75-stable/template/package.json) 中的 `package.json` 文件复制到你的项目中。 + +接下来我们使用 yarn 或 npm（两者都是 node 的包管理器）来安装必要的模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），然后运行下列命令来安装： + + + + +```shell +npm install +``` + + + + +```shell +yarn install +``` + + + + +所有 JavaScript 依赖模块都会被安装到项目根目录下的`node_modules/`目录中（这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。 + +把`node_modules/`目录记录到`.gitignore`文件中（即不上传到版本控制系统，只保留在本地）。可以参考 [React Native 社区模板](https://github.com/react-native-community/template/blob/0.77-stable/template/_gitignore) 中的`.gitignore`文件。 + +## 把 React Native 添加到你的应用中 + +### 配置 Gradle + +React Native 使用 React Native Gradle Plugin 来配置您的依赖项和项目设置。 + +首先，让我们通过添加以下行来编辑您的`settings.gradle`文件： +（请参考 [社区模板](https://github.com/react-native-community/template/blob/0.77-stable/template/android/settings.gradle)）: + +```groovy +// 此处配置用于自动链接第三方原生库的 React Native Gradle 插件 +pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") } +plugins { id("com.facebook.react.settings") } +extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() } +// 如果使用 .gradle.kts 文件: +// extensions.configure { autolinkLibrariesFromCommand() } +includeBuild("../node_modules/@react-native/gradle-plugin") + +// 在这里引入你已有的其他 Gradle 模块。 +// include(":app") +``` + +然后你需要打开顶层的 `build.gradle` 文件并添加这一行： + +```diff +buildscript { + repositories { + google() + mavenCentral() + } + dependencies { + classpath("com.android.tools.build:gradle:7.3.1") ++ classpath("com.facebook.react:react-native-gradle-plugin") + } +} +``` + +这将确保 React Native Gradle Plugin 在您的项目中可用。 +最后，在 `app/build.gradle` 文件中添加以下行（注意它的路径不同于上面，这次是 `app/build.gradle`）： + +```diff +apply plugin: "com.android.application" ++apply plugin: "com.facebook.react" + +repositories { + mavenCentral() +} + +dependencies { + // Other dependencies here ++ // 注：我们故意不在这里指定版本号，因为 React Native Gradle Plugin 会自动处理它。 ++ // 如果您不使用 React Native Gradle Plugin，则必须手动指定版本。 ++ implementation "com.facebook.react:react-android" ++ implementation "com.facebook.react:hermes-android" +} + ++react { ++ // 启用自动链接需要添加以下行，参考： https://github.com/react-native-community/cli/blob/master/docs/autolinking.md ++ autolinkLibrariesWithApp() ++} +``` + +最后，打开应用的 `gradle.properties` 文件并添加以下行（请参考 [社区模板](https://github.com/react-native-community/template/blob/0.77-stable/template/android/gradle.properties)）： + +```diff ++reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 ++newArchEnabled=true ++hermesEnabled=true +``` + +### 配置权限 + +接着，在 `AndroidManifest.xml` 清单文件中声明网络权限: + +```diff + + ++ + + + + +``` + +然后你需要在 `AndroidManifest.xml` 中启用 [允许明文传输](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) （在`src/debug/AndroidManifest.xml` 中）： + +> 从 Android 9 (API level 28)开始，默认情况下明文传输（http 接口）是禁用的，只能访问 https 接口。这将阻止应用程序连接到[Metro bundler](https://facebook.github.io/metro)。下面的更改允许调试版本中的明文通信。 + +```diff + + + + + +``` + +同样可以参考社区模板的 AndroidManifest.xml 文件：[main](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/AndroidManifest.xml) 和 [debug](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/debug/AndroidManifest.xml) + +如果希望在正式打包后也能继续访问 http 接口，则需要在`src/main/AndroidManifest.xml`中也添加这一选项。 + +要了解有关网络安全配置和明文通信策略的更多信息，请参阅[此链接](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted)。 + +### 代码集成 + +现在我们将修改原生 Android 应用程序以集成 React Native。 + +#### React Native 组件 + +我们首先要写的是"High Score"（得分排行榜）的 JavaScript 端的代码。 + +### 创建一个`index.js`文件 + +首先在项目根目录中创建一个空的`index.js`文件。 + +`index.js`是 React Native 应用在 Android 上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行`require/import`导入语句。 + +本教程的`index.js`文件应该如下所示（请参考 [社区模板](https://github.com/react-native-community/template/blob/0.77-stable/template/index.js)）： + +```js +import {AppRegistry} from 'react-native'; +import App from './App'; + +AppRegistry.registerComponent('HelloWorld', () => App); +``` + +### 创建一个 `App.tsx` 文件 + +下面我们创建一个 `App.tsx` 文件。这是一个 [TypeScript](https://www.typescriptlang.org/) 文件，可以包含 [JSX]() 表达式。它包含了我们将在 Android 应用中集成的根 React Native 组件（请参考 [社区模板](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)）： + +```tsx +import React from 'react'; +import { + SafeAreaView, + ScrollView, + StatusBar, + StyleSheet, + Text, + useColorScheme, + View, +} from 'react-native'; + +import { + Colors, + DebugInstructions, + Header, + ReloadInstructions, +} from 'react-native/Libraries/NewAppScreen'; + +function App(): React.JSX.Element { + const isDarkMode = useColorScheme() === 'dark'; + + const backgroundStyle = { + backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, + }; + + return ( + + + +
+ + Step One + + Edit App.tsx to + change this screen and see your edits. + + See your changes + + Debug + + + + + ); +} + +const styles = StyleSheet.create({ + title: { + fontSize: 24, + fontWeight: '600', + }, + bold: { + fontWeight: '700', + }, +}); + +export default App; +``` + +## 5. Integrating with your Android code + +We now need to add some native code in order to start the React Native runtime and tell it to render our React components. + +### Updating your Application class + +First, we need to update your `Application` class to properly initialize React Native as follows: + + + + + +```diff +package ; + +import android.app.Application; ++import com.facebook.react.PackageList; ++import com.facebook.react.ReactApplication; ++import com.facebook.react.ReactHost; ++import com.facebook.react.ReactNativeHost; ++import com.facebook.react.ReactPackage; ++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; ++import com.facebook.react.defaults.DefaultReactHost; ++import com.facebook.react.defaults.DefaultReactNativeHost; ++import com.facebook.soloader.SoLoader; ++import com.facebook.react.soloader.OpenSourceMergedSoMapping ++import java.util.List; + +-class MainApplication extends Application { ++class MainApplication extends Application implements ReactApplication { ++ @Override ++ public ReactNativeHost getReactNativeHost() { ++ return new DefaultReactNativeHost(this) { ++ @Override ++ protected List getPackages() { return new PackageList(this).getPackages(); } ++ @Override ++ protected String getJSMainModuleName() { return "index"; } ++ @Override ++ public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } ++ @Override ++ protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; } ++ @Override ++ protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; } ++ }; ++ } + ++ @Override ++ public ReactHost getReactHost() { ++ return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost()); ++ } + + @Override + public void onCreate() { + super.onCreate(); ++ SoLoader.init(this, OpenSourceMergedSoMapping); ++ if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { ++ DefaultNewArchitectureEntryPoint.load(); ++ } + } +} +``` + + + + + +```diff +// package + +import android.app.Application ++import com.facebook.react.PackageList ++import com.facebook.react.ReactApplication ++import com.facebook.react.ReactHost ++import com.facebook.react.ReactNativeHost ++import com.facebook.react.ReactPackage ++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load ++import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost ++import com.facebook.react.defaults.DefaultReactNativeHost ++import com.facebook.soloader.SoLoader ++import com.facebook.react.soloader.OpenSourceMergedSoMapping + +-class MainApplication : Application() { ++class MainApplication : Application(), ReactApplication { + ++ override val reactNativeHost: ReactNativeHost = ++ object : DefaultReactNativeHost(this) { ++ override fun getPackages(): List = PackageList(this).packages ++ override fun getJSMainModuleName(): String = "index" ++ override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG ++ override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED ++ override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED ++ } + ++ override val reactHost: ReactHost ++ get() = getDefaultReactHost(applicationContext, reactNativeHost) + + override fun onCreate() { + super.onCreate() ++ SoLoader.init(this, OpenSourceMergedSoMapping) ++ if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { ++ load() ++ } + } +} +``` + + + + +As usual, here the [MainApplication.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt) + +#### Creating a `ReactActivity` + +Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component. + + + + + +```java +// package ; + +import com.facebook.react.ReactActivity; +import com.facebook.react.ReactActivityDelegate; +import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; +import com.facebook.react.defaults.DefaultReactActivityDelegate; + +public class MyReactActivity extends ReactActivity { + + @Override + protected String getMainComponentName() { + return "HelloWorld"; + } + + @Override + protected ReactActivityDelegate createReactActivityDelegate() { + return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled()); + } +} +``` + + + + + +```kotlin +// package + +import com.facebook.react.ReactActivity +import com.facebook.react.ReactActivityDelegate +import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled +import com.facebook.react.defaults.DefaultReactActivityDelegate + +class MyReactActivity : ReactActivity() { + + override fun getMainComponentName(): String = "HelloWorld" + + override fun createReactActivityDelegate(): ReactActivityDelegate = + DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) +} +``` + + + + +As usual, here the [MainActivity.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt) + +Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen: + +```diff + + + + + + ++ ++ + + +``` + +Now your activity is ready to run some JavaScript code. + +## 6. Test your integration + +You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading). + +First, you need to create a `metro.config.js` file in the root of your project as follows: + +```js +const {getDefaultConfig} = require('@react-native/metro-config'); +module.exports = getDefaultConfig(__dirname); +``` + +You can checkout the [metro.config.js file](https://github.com/react-native-community/template/blob/0.77-stable/template/metro.config.js) from the Community template file as reference. + +Once you have the config file in place, you can run the bundler. Run the following command in the root directory of your project: + + + + +```shell +npm start +``` + + + + +```shell +yarn start +``` + + + + +Now build and run your Android app as normal. + +Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display: + +
+ +### Creating a release build in Android Studio + +You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app. + +The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle. + +If you're not using Android Studio, you can create a release build with: + +``` +cd android +# For a Release APK +./gradlew :app:assembleRelease +# For a Release AAB +./gradlew :app:bundleRelease +``` + +### Now what? + +At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. diff --git a/cnwebsite/versioned_docs/version-0.85/_markdown-new-architecture-warning.mdx b/cnwebsite/versioned_docs/version-0.85/_markdown-new-architecture-warning.mdx new file mode 100644 index 00000000000..842504b5055 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_markdown-new-architecture-warning.mdx @@ -0,0 +1,7 @@ +:::caution 注意 + +这个文档仍然是**实验性**的，随着我们的迭代，细节会有变化。欢迎在[工作小组内的讨论](https://github.com/reactwg/react-native-new-architecture/discussions/8)中分享你的反馈。 + +此外，它还包含几个**手动步骤**。请注意新架构尚未稳定下来，最终的开发者体验会继续迭代改善。我们正在努力开发工具、模板和库，以帮助你在新架构上快速入门，而不需要经历整个设置过程。 + +::: diff --git a/cnwebsite/versioned_docs/version-0.85/_remove-global-cli.md b/cnwebsite/versioned_docs/version-0.85/_remove-global-cli.md new file mode 100644 index 00000000000..8a1e0883b3d --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_remove-global-cli.md @@ -0,0 +1,8 @@ +:::warning +如果你之前全局安装过 `react-native-cli` 包，请将其移除，因为它可能会导致一些意外问题： + +```shell +npm uninstall -g react-native-cli @react-native-community/cli +``` + +::: diff --git a/cnwebsite/versioned_docs/version-0.85/_turbo-native-modules-components.jsx b/cnwebsite/versioned_docs/version-0.85/_turbo-native-modules-components.jsx new file mode 100644 index 00000000000..1bb5a1b5edb --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/_turbo-native-modules-components.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import IOSContent from './turbo-native-modules-ios.md'; +import AndroidContent from './turbo-native-modules-android.md'; + +export function TurboNativeModulesIOS() { + return ; +} + +export function TurboNativeModulesAndroid() { + return ; +} diff --git a/cnwebsite/versioned_docs/version-0.85/accessibility.md b/cnwebsite/versioned_docs/version-0.85/accessibility.md new file mode 100644 index 00000000000..8f2a0218b0f --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/accessibility.md @@ -0,0 +1,604 @@ +--- +id: accessibility +title: 无障碍功能 +description: 使用 React Native 面向 Android 和 iOS 的无障碍 API，构建可被辅助技术访问的移动应用。 +--- + +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; + +Android 和 iOS 都提供了与辅助技术集成的能力，例如系统自带的读屏器 VoiceOver（iOS）和 TalkBack（Android）。React Native 提供了配套 API，帮助你的应用更好地服务所有用户。 + +:::info +Android 与 iOS 在无障碍实现方式上有差异，因此 React Native 的具体行为也可能因平台而不同。 +::: + +## 无障碍属性 + +### `accessible` + +当值为 `true` 时，表示该视图可被读屏器、硬件键盘等辅助技术发现。注意：可发现不一定等于一定会被 VoiceOver / TalkBack 聚焦；例如 VoiceOver 不允许嵌套无障碍元素，或 TalkBack 可能优先聚焦父元素。 + +默认情况下，所有可触摸元素（Touchable 系列）都具有无障碍能力。 + +在 Android 上，`accessible` 会映射为原生 [`focusable`]()；在 iOS 上会映射为原生 [`isAccessibilityElement`](https://developer.apple.com/documentation/uikit/uiaccessibilityelement/isaccessibilityelement?language=objc)。 + +```tsx + + + + +``` + +以上示例中，只有第一个子视图（设置了 `accessible`）可获得无障碍焦点；父视图和未设置 `accessible` 的兄弟视图不可获得焦点。 + +### `accessibilityLabel` + +当一个视图被标记为可访问时，建议同时设置 `accessibilityLabel`，让 VoiceOver / TalkBack 用户知道当前选中了什么。被选中时，读屏器会朗读该文本。 + +可在 View、Text、Touchable 上设置 `accessibilityLabel`： + +```tsx + + + Press me! + + +``` + +在上例中，如果不显式设置 `accessibilityLabel`，TouchableOpacity 的标签默认会是 "Press me!"（由其所有 Text 子节点用空格拼接而成）。 + +### `accessibilityLabelledBy`
Android
+ +用于引用另一个元素的 [nativeID](view.md#nativeid)，常用于复杂表单。 +`accessibilityLabelledBy` 的值应与对应元素的 `nativeID` 一致： + +```tsx + + Label for Input Field + + +``` + +上例中，读屏器聚焦 TextInput 时会朗读：`Input, Edit Box for Label for Input Field`。 + +### `accessibilityHint` + +当仅凭 `accessibilityLabel` 仍不足以说明操作结果时，可使用无障碍提示（hint）补充上下文。 + +```tsx + + + Back + + +``` + +
iOS
+ +如果用户在设备 VoiceOver 设置中启用了提示，VoiceOver 会在 label 之后朗读 hint。更多建议请见 [iOS Developer Docs](https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint)。 + +
Android
+ +TalkBack 会在 label 后朗读 hint；当前 Android 不支持关闭 hint。 + +### `accessibilityLanguage`
iOS
+ +通过 `accessibilityLanguage` 指定读屏器朗读 **label**、**value**、**hint** 所使用的语言。值必须符合 [BCP 47 规范](https://www.rfc-editor.org/info/bcp47)。 + +```tsx + + 🍕 + +``` + +### `accessibilityIgnoresInvertColors`
iOS
+ +iOS / iPadOS 提供“反转颜色”辅助功能，帮助色弱、低视力等用户。若某些视图（如照片）不希望在开启该设置时被反色，可将此属性设为 `true`。 + +### `accessibilityLiveRegion`
Android
+ +当组件内容动态变化时，可通过 `accessibilityLiveRegion` 让 TalkBack 及时播报：`none`、`polite`、`assertive`。 + +- **none** 不应播报该视图变化。 +- **polite** 应播报该视图变化。 +- **assertive** 立即打断当前语音并播报该视图变化。 + +```tsx + + + Click me + + + + Clicked {count} times + +``` + +上例中，`addOne` 会更新 `count`。触发 TouchableWithoutFeedback 后，TalkBack 会因 `accessibilityLiveRegion="polite"` 朗读 Text 的变化。 + +### `accessibilityRole` + +`accessibilityRole` 用来向辅助技术说明组件用途。 + +可选值： + +- **adjustable** 可调整元素（如滑块）。 +- **alert** 需要呈现给用户的重要文本。 +- **button** 按钮。 +- **checkbox** 复选框（选中/未选中/混合）。 +- **combobox** 组合框。 +- **header** 内容区标题（如导航栏标题）。 +- **image** 图片（可与 button/link 组合）。 +- **imagebutton** 图片按钮。 +- **keyboardkey** 键盘按键。 +- **link** 链接。 +- **menu** 菜单。 +- **menubar** 菜单栏容器。 +- **menuitem** 菜单项。 +- **none** 无角色。 +- **progressbar** 进度条。 +- **radio** 单选项。 +- **radiogroup** 单选组。 +- **scrollbar** 滚动条。 +- **search** 搜索输入框。 +- **spinbutton** 打开选项列表的按钮。 +- **summary** 应用首次启动时用于概述当前状态。 +- **switch** 开关。 +- **tab** 标签页。 +- **tablist** 标签页列表。 +- **text** 静态文本。 +- **timer** 计时器。 +- **togglebutton** 切换按钮（应结合 accessibilityState.checked 使用）。 +- **toolbar** 工具栏容器。 +- **grid** 与 ScrollView / VirtualizedList / FlatList / SectionList 结合，表示网格，并为 Android GridView 增加进出网格播报。 + +### `accessibilityShowsLargeContentViewer`
iOS
+ +布尔值。是否在用户对元素长按时显示 large content viewer。 + +iOS 13.0+ 可用。 + +### `accessibilityLargeContentTitle`
iOS
+ +large content viewer 显示时使用的标题文本。 + +要求 `accessibilityShowsLargeContentViewer={true}`。 + +```tsx + + Home + +``` + +### `accessibilityState` + +向辅助技术用户描述组件当前状态。 + +`accessibilityState` 是对象，包含： + +| Name | Description | Type | Required | +| -------- | ------------------------------------------------------------ | ------------------ | -------- | +| disabled | 元素是否禁用。 | boolean | No | +| selected | 可选元素当前是否选中。 | boolean | No | +| checked | 可勾选元素状态。可为布尔值，或字符串 `"mixed"`（混合状态）。 | boolean or 'mixed' | No | +| busy | 元素当前是否忙碌。 | boolean | No | +| expanded | 可展开元素当前是展开还是折叠。 | boolean | No | + +使用时，将 `accessibilityState` 设为符合上述结构的对象。 + +### `accessibilityValue` + +表示组件当前值。可为文本描述；对于范围型组件（如滑块、进度条），可包含范围信息（最小、当前、最大）。 + +`accessibilityValue` 是对象，包含： + +| Name | Description | Type | Required | +| ---- | -------------------------------------------------------- | ------- | ------------------------- | +| min | 范围最小值。 | integer | Required if `now` is set. | +| max | 范围最大值。 | integer | Required if `now` is set. | +| now | 当前值。 | integer | No | +| text | 值的文本描述。若设置该字段，会覆盖 `min`、`now`、`max`。 | string | No | + +### `accessibilityViewIsModal`
iOS
+ +布尔值。指示 VoiceOver 是否应忽略与当前视图同级的其他视图中的元素。 + +例如窗口中有同级视图 `A`、`B`：若在 `B` 上设为 `true`，VoiceOver 会忽略 `A` 内元素；若 `B` 内有子视图 `C`，并在 `C` 上设为 `true`，则 VoiceOver 不会忽略 `A`。 + +### `accessibilityElementsHidden`
iOS
+ +布尔值。指示当前无障碍元素及其包含的无障碍元素是否被隐藏。 + +例如窗口中有同级视图 `A`、`B`：在 `B` 上设 `accessibilityElementsHidden={true}` 时，VoiceOver 会忽略 `B` 及其子元素。其效果类似 Android 的 `importantForAccessibility="no-hide-descendants"`。 + +### `aria-valuemax` + +表示范围型组件（如滑块、进度条）的最大值。 + +### `aria-valuemin` + +表示范围型组件（如滑块、进度条）的最小值。 + +### `aria-valuenow` + +表示范围型组件（如滑块、进度条）的当前值。 + +### `aria-valuetext` + +表示组件值的文本描述。 + +### `aria-busy` + +表示元素正在被修改，辅助技术可能应在变更完成后再通知用户。 + +| Type | Default | +| ------- | ------- | +| boolean | false | + +### `aria-checked` + +表示可勾选元素状态。可为布尔值或 `"mixed"`（混合状态）。 + +| Type | Default | +| ---------------- | ------- | +| boolean, 'mixed' | false | + +### `aria-disabled` + +表示元素可被感知但处于禁用状态，不可编辑或不可操作。 + +| Type | Default | +| ------- | ------- | +| boolean | false | + +### `aria-expanded` + +表示可展开元素当前为展开还是折叠。 + +| Type | Default | +| ------- | ------- | +| boolean | false | + +### `aria-hidden` + +表示元素是否对辅助技术隐藏。 + +例如窗口中有同级视图 `A`、`B`：若将 `B` 设为 `aria-hidden`，VoiceOver 会忽略 `B` 及其子元素。 + +| Type | Default | +| ------- | ------- | +| boolean | false | + +### `aria-label` + +定义可用于命名元素的字符串。 + +| Type | +| ------ | +| string | + +### `aria-labelledby`
Android
+ +用于标识为当前元素提供标签的元素。其值应与相关元素的 [`nativeID`](view.md#nativeid) 一致： + +```tsx + + Label for Input Field + + +``` + +| Type | +| ------ | +| string | + +### `aria-live`
Android
+ +表示该元素会更新，并描述用户代理、辅助技术及用户可预期的更新播报方式。 + +- **off** 不播报变化。 +- **polite** 播报变化。 +- **assertive** 立即打断当前语音并播报。 + +| Type | Default | +| ---------------------------------------- | ------- | +| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` | + +--- + +### `aria-modal`
iOS
+ +布尔值。指示 VoiceOver 是否应忽略与当前视图同级的其他视图中的元素。 + +| Type | Default | +| ------- | ------- | +| boolean | false | + +### `aria-selected` + +表示可选元素当前是否被选中。 + +| Type | +| ------- | +| boolean | + +### `experimental_accessibilityOrder` + + + +:::note +为简化示例，下文省略布局代码。默认聚焦顺序受布局影响，这里假定文档顺序与布局顺序一致。 +::: + +`experimental_accessibilityOrder` 允许你定义辅助技术聚焦后代组件的顺序。它是一个 [`nativeID`](view.md#nativeid) 数组，指定需要控制顺序的组件。例如： + +``` + + + + + +``` + +辅助技术会按 `B`、`C`、`A` 的顺序聚焦。 + +`experimental_accessibilityOrder` 不会替引用到的组件“自动开启”无障碍，仍需组件本身可访问。例如把上面 `C` 的 `accessible={true}` 去掉： + +``` + + + + + +``` + +新的顺序会是 `B`、`A`；虽然 `C` 在数组中，但它本身不可访问。 + +另一方面，`experimental_accessibilityOrder` 会“排除”未被引用的可访问组件： + +``` + + + + + + +``` + +顺序为 `B`、`C`、`A`，`D` 永远不会被聚焦。也就是说它是“穷举式（exhaustive）”的。 + +某些情况下，把不可访问组件放进 `experimental_accessibilityOrder` 仍有意义。比如： + +``` + + + + + + + + + +``` + +顺序会是 `B`、`D`、`E`、`F`、`A`。虽然后代 `D/E/F` 没被直接引用，但 `C` 被直接引用，并且 `C` 是一个无障碍容器（自身不可访问，但包含可访问元素）。当容器被引用时，其内部元素按默认顺序参与聚焦，即它是“可嵌套（nestable）”的。 + +`experimental_accessibilityOrder` 也可以引用另一个也设置了 `experimental_accessibilityOrder` 的组件： + +``` + + + + + + + + + +``` + +顺序会是 `B`、`F`、`E`、`D`、`A`。 + +组件不能同时既是无障碍容器又是无障碍元素（`accessible={true}`）。例如： + +``` + + + + + + + + + +``` + +顺序将是 `B`、`C`、`A`。`D/E/F` 不再处于容器中，因此会被穷举规则排除。 + +### `importantForAccessibility`
Android
+ +当同一父级下有重叠 UI 时，默认无障碍焦点可能不可预测。`importantForAccessibility` 可控制视图是否触发无障碍事件，以及是否上报给无障碍服务。可选：`auto`、`yes`、`no`、`no-hide-descendants`（最后一个会强制忽略当前组件及其全部子组件）。 + +```tsx + + + First layout + + + Second layout + + +``` + +上例中，黄色布局及其后代对 TalkBack 和其他无障碍服务完全不可见，因此可在重叠视图场景下避免焦点混乱。 + +### `onAccessibilityEscape`
iOS
+ +绑定一个自定义函数，当用户执行“escape”手势（双指画 Z）时调用。该函数通常应执行层级返回操作：如返回上一级页面、回退导航层级或关闭模态界面。若当前选中元素未实现该函数，系统会沿视图层级向上查找；若仍找不到则发出失败提示音。 + +### `onAccessibilityTap`
iOS
+ +绑定一个自定义函数。当用户选中该无障碍元素后执行双击时触发。 + +### `onMagicTap`
iOS
+ +绑定一个自定义函数，当用户执行“magic tap”（双指双击）时触发。该函数应执行该场景下最相关的操作。比如 iPhone 电话应用中，magic tap 会接听来电或结束当前通话。若当前元素未实现该函数，系统会沿视图层级向上查找。 + +### `role` + +`role` 用于说明组件用途，并且其优先级高于 [`accessibilityRole`](accessibility#accessibilityrole)。 + +`role` 可选值： + +- **alert** 显示重要提示文本。 +- **button** 按钮。 +- **checkbox** 复选框（选中/未选中/混合）。 +- **combobox** 组合框。 +- **grid** 与 ScrollView / VirtualizedList / FlatList / SectionList 结合表示网格，并为 Android GridView 增加进出网格播报。 +- **heading** 内容区标题。 +- **img** 图片（可与按钮或链接组合）。 +- **link** 链接。 +- **list** 列表。 +- **listitem** 列表项。 +- **menu** 菜单。 +- **menubar** 菜单栏容器。 +- **menuitem** 菜单项。 +- **none** 无角色。 +- **presentation** 无角色。 +- **progressbar** 进度条。 +- **radio** 单选项。 +- **radiogroup** 单选组。 +- **scrollbar** 滚动条。 +- **searchbox** 搜索输入框。 +- **slider** 可调整元素（如滑块）。 +- **spinbutton** 打开选项列表的按钮。 +- **summary** 应用首次启动时用于快速概述当前状态。 +- **switch** 开关。 +- **tab** 标签页。 +- **tablist** 标签页列表。 +- **timer** 计时器。 +- **toolbar** 工具栏容器。 + +## 无障碍操作（Accessibility Actions） + +无障碍操作允许辅助技术以编程方式触发组件动作。要支持它，组件需要： + +- 通过 `accessibilityActions` 定义支持的动作列表； +- 实现 `onAccessibilityAction` 处理动作请求。 + +`accessibilityActions` 是动作对象数组，每项字段如下： + +| Name | Type | Required | +| ----- | ------ | -------- | +| name | string | Yes | +| label | string | No | + +动作既可表示标准动作（如点击、调节），也可表示组件特有的自定义动作（如删除邮件）。 +`name` 对标准与自定义动作都必填；`label` 对标准动作可选。 + +支持标准动作时，`name` 可为： + +- `'magicTap'` - iOS only - VoiceOver 焦点在组件上/内部时，用户双指双击。 +- `'escape'` - iOS only - VoiceOver 焦点在组件上/内部时，用户执行双指擦拭手势（左、右、左）。 +- `'activate'` - 激活动作。应与普通（非辅助技术）操作保持一致；读屏用户双击组件时触发。 +- `'increment'` - 增加可调整组件值。iOS 上，当角色为 `'adjustable'` 且用户上滑时触发；Android 上，当用户聚焦后按音量加键触发。 +- `'decrement'` - 减少可调整组件值。iOS 上，当角色为 `'adjustable'` 且用户下滑时触发；Android 上，当用户聚焦后按音量减键触发。 +- `'longpress'` - Android only - 用户聚焦后双击并按住触发；应与普通长按行为一致。 +- `'expand'` - Android only - 展开组件，TalkBack 会播报“已展开”提示。 +- `'collapse'` - Android only - 折叠组件，TalkBack 会播报“已折叠”提示。 + +`label` 对标准动作通常不会被辅助技术使用；对自定义动作，`label` 应是本地化字符串，用于向用户描述该动作。 + +处理动作请求时，实现 `onAccessibilityAction`，其参数事件中包含动作名。示例： + +```tsx + { + switch (event.nativeEvent.actionName) { + case 'cut': + Alert.alert('Alert', 'cut action success'); + break; + case 'copy': + Alert.alert('Alert', 'copy action success'); + break; + case 'paste': + Alert.alert('Alert', 'paste action success'); + break; + } + }} +/> +``` + +## 检查读屏器是否开启 + +`AccessibilityInfo` API 可用于判断读屏器当前是否激活。详见 [AccessibilityInfo 文档](accessibilityinfo)。 + +## 发送无障碍事件
Android
+ +有时你需要主动在某个 UI 组件上触发无障碍事件（例如自定义视图出现，或希望将无障碍焦点移到某个视图）。原生 `UIManager` 模块提供了 `sendAccessibilityEvent` 方法，接收两个参数：视图 tag 与事件类型。支持事件类型：`typeWindowStateChanged`、`typeViewFocused`、`typeViewClicked`。 + +```tsx +import {Platform, UIManager, findNodeHandle} from 'react-native'; + +if (Platform.OS === 'android') { + UIManager.sendAccessibilityEvent( + findNodeHandle(this), + UIManager.AccessibilityEventTypes.typeViewFocused, + ); +} +``` + +## 测试 TalkBack 支持
Android
+ +在 Android 设备或模拟器中，打开“设置”→“无障碍”→“TalkBack”，切换“使用服务”开关即可启用或停用。 + +Android 模拟器默认不一定预装 TalkBack。你可通过 Google Play 商店安装 TalkBack。请确保选择带 Google Play 的模拟器镜像（可在 Android Studio 中创建）。 + +你也可使用音量键快捷方式切换 TalkBack：在“设置”→“无障碍”中开启“音量键快捷方式”，随后同时按住两侧音量键 3 秒启动无障碍工具。 + +另外，也可通过命令行切换 TalkBack： + +```shell +# disable +adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService + +# enable +adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService +``` + +## 测试 VoiceOver 支持
iOS
+ +在 iOS / iPadOS 设备中，进入“设置”应用，点“通用”→“辅助功能”，即可找到 VoiceOver 等多种可访问性工具。进入“视觉”下的 VoiceOver 并开启顶部开关即可启用。 + +在辅助功能设置底部可看到“辅助功能快捷键”，可通过三击 Home 键快速切换 VoiceOver。 + +模拟器不提供 VoiceOver，但可以使用 Xcode 的 Accessibility Inspector 通过 macOS VoiceOver 对应用进行辅助测试。注意：仍建议优先在真机测试，因为 macOS VoiceOver 的体验可能与 iOS 设备不同。 + +## 更多资源 + +- [Making React Native Apps Accessible](https://engineering.fb.com/ios/making-react-native-apps-accessible/) diff --git a/cnwebsite/versioned_docs/version-0.85/accessibilityinfo.md b/cnwebsite/versioned_docs/version-0.85/accessibilityinfo.md new file mode 100644 index 00000000000..5ae9b0f9196 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/accessibilityinfo.md @@ -0,0 +1,293 @@ +--- +id: accessibilityinfo +title: AccessibilityInfo +--- + +有时我们需要知道设备当前是否启用了读屏器。`AccessibilityInfo` API 就是为此而设计的。你可以用它查询读屏器当前状态，也可以监听状态变化事件。 + +## 示例 + +```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios +import React, {useState, useEffect} from 'react'; +import {AccessibilityInfo, Text, StyleSheet} from 'react-native'; +import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; + +const App = () => { + const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false); + const [screenReaderEnabled, setScreenReaderEnabled] = useState(false); + + useEffect(() => { + const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener( + 'reduceMotionChanged', + isReduceMotionEnabled => { + setReduceMotionEnabled(isReduceMotionEnabled); + }, + ); + const screenReaderChangedSubscription = AccessibilityInfo.addEventListener( + 'screenReaderChanged', + isScreenReaderEnabled => { + setScreenReaderEnabled(isScreenReaderEnabled); + }, + ); + + AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => { + setReduceMotionEnabled(isReduceMotionEnabled); + }); + AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => { + setScreenReaderEnabled(isScreenReaderEnabled); + }); + + return () => { + reduceMotionChangedSubscription.remove(); + screenReaderChangedSubscription.remove(); + }; + }, []); + + return ( + + + + The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}. + + + The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}. + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + status: { + margin: 30, + }, +}); + +export default App; +``` + +--- + +# 参考 + +## 方法 + +### `addEventListener()` + +```tsx +static addEventListener( + eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName, + handler: ( + event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent, + ) => void, +): EmitterSubscription; +``` + +添加事件处理函数。支持的事件如下： + +| 事件名 | 说明 | +| ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityServiceChanged`
Android
| 当 TalkBack、其他 Android 辅助技术或第三方无障碍服务被启用时触发。处理函数参数为布尔值：当任一无障碍服务启用时为 `true`，否则为 `false`。 | +| `announcementFinished`
iOS
| 当读屏器完成播报时触发。处理函数参数是一个对象，包含：
  • `announcement`：读屏器播报的文本。
  • `success`：是否成功播报的布尔值。
| +| `boldTextChanged`
iOS
| 当“粗体文本”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | +| `grayscaleChanged`
iOS
| 当“灰度”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | +| `invertColorsChanged`
iOS
| 当“反转颜色”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | +| `reduceMotionChanged` | 当“减少动态效果”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。（在 Android 上，“开发者选项”中的“过渡动画比例”设为“动画关闭”也会返回 `true`。） | +| `reduceTransparencyChanged`
iOS
| 当“降低透明度”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | +| `screenReaderChanged` | 当读屏器状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | + +--- + +### `announceForAccessibility()` + +```tsx +static announceForAccessibility(announcement: string); +``` + +发送一段字符串，让读屏器播报。 + +--- + +### `announceForAccessibilityWithOptions()` + +```tsx +static announceForAccessibilityWithOptions( + announcement: string, + options: {queue?: boolean}, +); +``` + +发送一段字符串让读屏器播报，并可附带选项。默认会打断当前播报；在 iOS 上可通过将 `queue` 设为 `true`，把新播报排队到当前播报之后。 + +**参数：** + +| 名称 | 类型 | 说明 | +| ----------------------------------------------------------------- | ------ | --------------------------------------------------------------------- | +| announcement
Required
| string | 要播报的字符串 | +| options
Required
| object | `queue` - 是否排队到当前播报之后
iOS
| + +--- + +### `getRecommendedTimeoutMillis()`
Android
+ +```tsx +static getRecommendedTimeoutMillis(originalTimeout: number): Promise; +``` + +获取用户建议的超时时长（毫秒）。 +该值来自“辅助功能”设置中的“执行操作所需时间（辅助功能超时）”。 + +**参数：** + +| 名称 | 类型 | 说明 | +| -------------------------------------------------------------------- | ------ | ---------------------------------------------- | +| originalTimeout
Required
| number | 当“辅助功能超时”未设置时返回的超时值（毫秒）。 | + +--- + +### `isAccessibilityServiceEnabled()`
Android
+ +```tsx +static isAccessibilityServiceEnabled(): Promise; +``` + +检查是否启用了任意无障碍服务。它不仅包含 TalkBack，也包括已安装的第三方无障碍应用。若只检查 TalkBack，请使用 [isScreenReaderEnabled](#isscreenreaderenabled)。 +返回 Promise，解析为布尔值：有无障碍服务启用时为 `true`，否则为 `false`。 + +:::note +如果你只想检查 TalkBack 状态，请使用 [`isScreenReaderEnabled`](#isscreenreaderenabled)。 +::: + +--- + +### `isBoldTextEnabled()`
iOS
+ +```tsx +static isBoldTextEnabled(): Promise: +``` + +查询是否启用了粗体文本。返回 Promise，启用为 `true`，否则为 `false`。 + +--- + +### `isGrayscaleEnabled()`
iOS
+ +```tsx +static isGrayscaleEnabled(): Promise; +``` + +查询是否启用了灰度显示。返回 Promise，启用为 `true`，否则为 `false`。 + +--- + +### `isInvertColorsEnabled()`
iOS
+ +```tsx +static isInvertColorsEnabled(): Promise; +``` + +查询是否启用了反转颜色。返回 Promise，启用为 `true`，否则为 `false`。 + +--- + +### `isReduceMotionEnabled()` + +```tsx +static isReduceMotionEnabled(): Promise; +``` + +查询是否启用了减少动态效果。返回 Promise，启用为 `true`，否则为 `false`。 + +--- + +### `isReduceTransparencyEnabled()`
iOS
+ +```tsx +static isReduceTransparencyEnabled(): Promise; +``` + +查询是否启用了降低透明度。返回 Promise，启用为 `true`，否则为 `false`。 + +--- + +### `isScreenReaderEnabled()` + +```tsx +static isScreenReaderEnabled(): Promise; +``` + +查询是否启用了读屏器。返回 Promise，启用为 `true`，否则为 `false`。 + +--- + +### `isHighTextContrastEnabled()`
Android
+ +```tsx +static isHighTextContrastEnabled(): Promise +``` + +查询是否启用了高对比度文本。返回 Promise，启用为 `true`，否则为 `false`。 + +--- + +### `isDarkerSystemColorsEnabled()`
iOS
+ +```tsx +static isDarkerSystemColorsEnabled(): Promise +``` + +查询是否启用了更深的系统颜色。返回 Promise，启用为 `true`，否则为 `false`。 + +--- + +### `prefersCrossFadeTransitions()`
iOS
+ +```tsx +static prefersCrossFadeTransitions(): Promise; +``` + +查询是否同时启用了“减少动态效果”与“偏好交叉淡入淡出过渡”。返回 Promise，启用为 `true`，否则为 `false`。 + +--- + +### 🗑️ `setAccessibilityFocus()` + +:::warning Deprecated +建议改用 `sendAccessibilityEvent`，并将 `eventType` 设为 `focus`。 +::: + +```tsx +static setAccessibilityFocus(reactTag: number); +``` + +将无障碍焦点设置到某个 React 组件。 + +在 Android 上，它会调用 `UIManager.sendAccessibilityEvent`，并传入 `reactTag` 与 `UIManager.AccessibilityEventTypes.typeViewFocused`。 + +:::note +确保希望接收无障碍焦点的 `View` 设置了 `accessible={true}`。 +::: + +--- + +### `sendAccessibilityEvent()` + +```tsx +static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes); +``` + +以命令式方式在 React 组件上触发无障碍事件，例如为读屏器切换当前聚焦元素。 + +:::note +确保希望接收无障碍焦点的 `View` 设置了 `accessible={true}`。 +::: + +| 名称 | 类型 | 说明 | +| -------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------- | +| host
Required
| HostInstance | 要向其发送事件的组件 ref。 | +| eventType
Required
| AccessibilityEventTypes | `'click'`（仅 Android）、`'focus'`、`'viewHoverEnter'`（仅 Android）或 `'windowStateChange'`（仅 Android）之一 | diff --git a/cnwebsite/versioned_docs/version-0.85/actionsheetios.md b/cnwebsite/versioned_docs/version-0.85/actionsheetios.md new file mode 100644 index 00000000000..f08a31d818f --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.85/actionsheetios.md @@ -0,0 +1,144 @@ +--- +id: actionsheetios +title: ActionSheetIOS +--- + +显示 iOS 原生的 [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) 组件。 + +## 示例 + +```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios +import React, {useState} from 'react'; +import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native'; +import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; + +const App = () => { + const [result, setResult] = useState('🔮'); + + const onPress = () => + ActionSheetIOS.showActionSheetWithOptions( + { + options: ['Cancel', 'Generate number', 'Reset'], + destructiveButtonIndex: 2, + cancelButtonIndex: 0, + userInterfaceStyle: 'dark', + }, + buttonIndex => { + if (buttonIndex === 0) { + // cancel action + } else if (buttonIndex === 1) { + setResult(String(Math.floor(Math.random() * 100) + 1)); + } else if (buttonIndex === 2) { + setResult('🔮'); + } + }, + ); + + return ( + + + {result} +