From bbb1871f55753a2f4c8e2a62b4b0083daec93a38 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Wed, 21 Aug 2024 22:06:04 +0800 Subject: [PATCH] 0.75 --- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../integration-with-existing-apps.md | 2 +- .../_integration-with-exisiting-apps-objc.md | 2 +- .../_integration-with-exisiting-apps-objc.md | 2 +- .../_integration-with-exisiting-apps-objc.md | 2 +- .../_integration-with-exisiting-apps-objc.md | 2 +- .../_integration-with-exisiting-apps-objc.md | 2 +- .../_integration-with-exisiting-apps-objc.md | 2 +- .../_integration-with-exisiting-apps-objc.md | 2 +- cndocs/_getting-started-linux-android.md | 6 +- .../_integration-with-existing-apps-objc.md | 2 +- cnwebsite/sidebars.json | 2 +- .../_integration-with-exisiting-apps-objc.md | 21 +- .../_integration-with-exisiting-apps-objc.md | 21 +- .../_integration-with-existing-apps-objc.md | 12 +- .../_integration-with-existing-apps-objc.md | 12 +- .../_integration-with-existing-apps-objc.md | 2 +- .../_getting-started-linux-android.md | 188 ++ .../_getting-started-macos-android.md | 202 ++ .../_getting-started-macos-ios.md | 156 ++ .../_getting-started-windows-android.md | 193 ++ .../_integration-with-existing-apps-java.md | 405 ++++ .../_integration-with-existing-apps-kotlin.md | 383 ++++ .../_integration-with-existing-apps-objc.md | 312 +++ .../_integration-with-existing-apps-swift.md | 310 +++ .../version-0.75/_markdown-m1-cocoapods.mdx | 11 + .../_markdown-new-architecture-warning.mdx | 7 + .../version-0.75/_remove-global-cli.md | 5 + .../version-0.75/accessibility.md | 354 ++++ .../version-0.75/accessibilityinfo.md | 229 +++ .../version-0.75/actionsheetios.md | 130 ++ .../version-0.75/activityindicator.md | 84 + .../versioned_docs/version-0.75/alert.md | 229 +++ .../versioned_docs/version-0.75/alertios.md | 190 ++ .../versioned_docs/version-0.75/animated.md | 529 +++++ .../version-0.75/animatedvalue.md | 210 ++ .../version-0.75/animatedvaluexy.md | 224 +++ .../versioned_docs/version-0.75/animations.md | 822 ++++++++ .../version-0.75/app-extensions.md | 28 + .../versioned_docs/version-0.75/appearance.md | 103 + .../version-0.75/appregistry.md | 383 ++++ .../versioned_docs/version-0.75/appstate.md | 114 ++ .../version-0.75/architecture-overview.md | 6 + .../version-0.75/assets/AddToBuildPhases.png | Bin 0 -> 390224 bytes .../version-0.75/assets/AddToLibraries.png | Bin 0 -> 539519 bytes .../version-0.75/assets/AddToSearchPaths.png | Bin 0 -> 357664 bytes .../assets/Alert/exampleandroid.gif | Bin 0 -> 301696 bytes .../version-0.75/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.75/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.75/assets/DevMenu.png | Bin 0 -> 381552 bytes .../version-0.75/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.75/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.75/assets/HermesLogo.svg | 1 + .../version-0.75/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.75/assets/PerfUtil.png | Bin 0 -> 12585 bytes .../version-0.75/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.75/assets/SystraceBadJS.png | Bin 0 -> 14389 bytes .../version-0.75/assets/SystraceBadJS2.png | Bin 0 -> 10222 bytes .../version-0.75/assets/SystraceBadUI.png | Bin 0 -> 15926 bytes .../version-0.75/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.75/assets/XcodeBuildIP.png | Bin 0 -> 167773 bytes .../version-0.75/assets/buttonExample.png | Bin 0 -> 208394 bytes .../assets/d_pressable_anatomy.svg | 1 + .../assets/d_pressable_pressing.svg | 1 + .../version-0.75/assets/d_security_chart.svg | 1 + .../assets/d_security_deep-linking.svg | 1 + .../assets/diagram_ios-android-views.svg | 1 + .../version-0.75/assets/diagram_pkce.svg | 1 + .../diagram_react-native-components.svg | 1 + .../version-0.75/assets/diagram_testing.svg | 1 + .../version-0.75/assets/favicon.png | Bin 0 -> 1012 bytes .../version-0.75/assets/metro-new-arch.png | Bin 0 -> 117503 bytes .../version-0.75/assets/oauth-pkce.png | Bin 0 -> 467603 bytes .../assets/p_android-ios-devices.svg | 1 + .../version-0.75/assets/p_cat1.png | Bin 0 -> 1828 bytes .../version-0.75/assets/p_cat2.png | Bin 0 -> 2241 bytes .../version-0.75/assets/p_tests-component.svg | 1 + .../version-0.75/assets/p_tests-e2e.svg | 1 + .../assets/p_tests-integration.svg | 1 + .../version-0.75/assets/p_tests-snapshot.svg | 1 + .../version-0.75/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.75/asyncstorage.md | 364 ++++ .../version-0.75/backhandler.md | 132 ++ .../version-0.75/build-speed.md | 193 ++ .../version-0.75/building-for-tv.md | 182 ++ .../versioned_docs/version-0.75/button.md | 295 +++ .../versioned_docs/version-0.75/checkbox.md | 107 + .../versioned_docs/version-0.75/clipboard.md | 96 + .../versioned_docs/version-0.75/colors.md | 206 ++ .../version-0.75/communication-android.md | 149 ++ .../version-0.75/communication-ios.md | 208 ++ .../version-0.75/components-and-apis.md | 161 ++ .../version-0.75/custom-webview-android.md | 258 +++ .../version-0.75/custom-webview-ios.md | 232 +++ .../version-0.75/datepickerandroid.md | 84 + .../version-0.75/datepickerios.md | 178 ++ .../version-0.75/debugging-release-builds.md | 99 + .../versioned_docs/version-0.75/debugging.md | 142 ++ .../version-0.75/devsettings.md | 47 + .../versioned_docs/version-0.75/dimensions.md | 153 ++ .../version-0.75/direct-manipulation.md | 274 +++ .../version-0.75/drawerlayoutandroid.md | 227 +++ .../version-0.75/dynamiccolorios.md | 57 + .../versioned_docs/version-0.75/easing.md | 475 +++++ .../version-0.75/fabric-renderer.md | 40 + .../version-0.75/fast-refresh.md | 47 + .../versioned_docs/version-0.75/flatlist.md | 898 +++++++++ .../versioned_docs/version-0.75/flexbox.md | 1743 +++++++++++++++++ .../version-0.75/gesture-responder-system.md | 63 + .../version-0.75/getting-started.md | 190 ++ .../versioned_docs/version-0.75/glossary.md | 48 + .../version-0.75/handling-text-input.md | 38 + .../version-0.75/handling-touches.md | 179 ++ .../version-0.75/headless-js-android.md | 392 ++++ .../version-0.75/height-and-width.md | 84 + .../versioned_docs/version-0.75/hermes.md | 181 ++ .../version-0.75/image-style-props.md | 389 ++++ .../versioned_docs/version-0.75/image.md | 603 ++++++ .../version-0.75/imagebackground.md | 83 + .../version-0.75/imagepickerios.md | 77 + .../versioned_docs/version-0.75/images.md | 245 +++ .../version-0.75/improvingux.md | 57 + .../version-0.75/inputaccessoryview.md | 78 + .../integration-with-android-fragment.md | 308 +++ .../integration-with-existing-apps.md | 35 + .../version-0.75/interactionmanager.md | 232 +++ .../intro-react-native-components.md | 76 + .../version-0.75/intro-react.md | 535 +++++ .../version-0.75/introduction.md | 134 ++ .../version-0.75/javascript-environment.md | 111 ++ .../versioned_docs/version-0.75/keyboard.md | 142 ++ .../version-0.75/keyboardavoidingview.md | 111 ++ .../version-0.75/layout-props.md | 996 ++++++++++ .../version-0.75/layoutanimation.md | 545 ++++++ .../version-0.75/layoutevent.md | 72 + .../versioned_docs/version-0.75/libraries.md | 81 + .../version-0.75/linking-libraries-ios.md | 58 + .../versioned_docs/version-0.75/linking.md | 658 +++++++ .../versioned_docs/version-0.75/metro.md | 108 + .../versioned_docs/version-0.75/modal.md | 345 ++++ .../version-0.75/more-resources.md | 42 + .../version-0.75/native-components-android.md | 870 ++++++++ .../version-0.75/native-components-ios.md | 514 +++++ .../version-0.75/native-debugging.md | 32 + .../version-0.75/native-module-setup.md | 35 + .../version-0.75/native-modules-android.md | 1179 +++++++++++ .../version-0.75/native-modules-intro.md | 30 + .../version-0.75/native-modules-ios.md | 526 +++++ .../versioned_docs/version-0.75/navigation.md | 16 + .../versioned_docs/version-0.75/netinfo.md | 166 ++ .../versioned_docs/version-0.75/network.md | 274 +++ .../new-architecture-app-intro.md | 124 ++ .../new-architecture-app-modules-ios.md | 173 ++ .../new-architecture-app-renderer-android.md | 453 +++++ .../new-architecture-app-renderer-ios.md | 90 + .../version-0.75/new-architecture-appendix.md | 301 +++ .../version-0.75/new-architecture-intro.md | 33 + .../new-architecture-library-android.md | 118 ++ .../new-architecture-library-intro.md | 555 ++++++ .../new-architecture-library-ios.md | 73 + .../new-architecture-troubleshooting.md | 62 + .../new-architecture-turbo-module.md | 900 +++++++++ .../optimizing-flatlist-configuration.md | 157 ++ .../optimizing-javascript-loading.md | 219 +++ .../version-0.75/other-debugging-methods.md | 95 + .../version-0.75/out-of-tree-platforms.md | 43 + .../version-0.75/panresponder.md | 192 ++ .../version-0.75/performance.md | 98 + .../version-0.75/permissionsandroid.md | 255 +++ .../versioned_docs/version-0.75/pixelratio.md | 163 ++ .../version-0.75/platform-specific-code.md | 121 ++ .../versioned_docs/version-0.75/platform.md | 222 +++ .../version-0.75/platformcolor.md | 82 + .../versioned_docs/version-0.75/pressable.md | 232 +++ .../versioned_docs/version-0.75/pressevent.md | 118 ++ .../version-0.75/profile-hermes.md | 137 ++ .../versioned_docs/version-0.75/profiling.md | 146 ++ .../version-0.75/progressbarandroid.md | 127 ++ .../version-0.75/progressviewios.md | 122 ++ .../versioned_docs/version-0.75/props.md | 59 + .../version-0.75/publishing-to-app-store.md | 50 + .../version-0.75/pushnotificationios.md | 494 +++++ .../ram-bundles-inline-requires.md | 180 ++ .../version-0.75/react-18-and-react-native.md | 122 ++ .../version-0.75/react-devtools.md | 79 + .../react-native-gradle-plugin.md | 187 ++ .../versioned_docs/version-0.75/react-node.md | 13 + cnwebsite/versioned_docs/version-0.75/rect.md | 50 + .../versioned_docs/version-0.75/rectorsize.md | 43 + .../version-0.75/refreshcontrol.md | 170 ++ .../removing-default-permissions.md | 59 + .../version-0.75/render-pipeline.md | 232 +++ .../versioned_docs/version-0.75/roottag.md | 74 + .../version-0.75/running-on-device.md | 340 ++++ .../version-0.75/running-on-simulator-ios.md | 16 + .../version-0.75/safeareaview.md | 53 + .../version-0.75/sample-application-movies.md | 486 +++++ .../versioned_docs/version-0.75/scrollview.md | 710 +++++++ .../version-0.75/sectionlist.md | 374 ++++ .../versioned_docs/version-0.75/security.md | 117 ++ .../version-0.75/segmentedcontrolios.md | 106 + .../versioned_docs/version-0.75/settings.md | 97 + .../version-0.75/shadow-props.md | 142 ++ .../versioned_docs/version-0.75/share.md | 136 ++ .../version-0.75/signed-apk-android.md | 149 ++ .../versioned_docs/version-0.75/slider.md | 174 ++ .../version-0.75/speeding-ci-builds.md | 54 + .../versioned_docs/version-0.75/state.md | 60 + .../versioned_docs/version-0.75/statusbar.md | 329 ++++ .../versioned_docs/version-0.75/style.md | 48 + .../versioned_docs/version-0.75/stylesheet.md | 343 ++++ .../versioned_docs/version-0.75/switch.md | 124 ++ .../version-0.75/symbolication.md | 39 + .../versioned_docs/version-0.75/systrace.md | 193 ++ .../version-0.75/testing-overview.md | 274 +++ .../version-0.75/text-style-props.md | 508 +++++ cnwebsite/versioned_docs/version-0.75/text.md | 665 +++++++ .../versioned_docs/version-0.75/textinput.md | 807 ++++++++ .../_markdown_beta_ts_support.mdx | 3 + .../_markdown_native_deprecation.mdx | 4 + ...ackward-compatibility-fabric-components.md | 520 +++++ .../backward-compatibility-turbomodules.md | 463 +++++ .../backward-compatibility.md | 25 + .../the-new-architecture/cxx-custom-types.md | 285 +++ .../cxx-cxxturbomodules.md | 519 +++++ .../the-new-architecture/landing-page.md | 32 + .../the-new-architecture/pillars-codegen.md | 231 +++ .../pillars-fabric-components.md | 844 ++++++++ .../pillars-turbomodule.md | 693 +++++++ .../the-new-architecture/pillars.md | 32 + .../the-new-architecture/use-app-template.md | 132 ++ .../version-0.75/the-new-architecture/why.md | 45 + .../version-0.75/threading-model.md | 64 + .../version-0.75/timepickerandroid.md | 71 + .../versioned_docs/version-0.75/timers.md | 72 + .../version-0.75/toastandroid.md | 198 ++ .../version-0.75/touchablehighlight.md | 204 ++ .../version-0.75/touchablenativefeedback.md | 133 ++ .../version-0.75/touchableopacity.md | 223 +++ .../version-0.75/touchablewithoutfeedback.md | 278 +++ .../versioned_docs/version-0.75/transforms.md | 326 +++ .../version-0.75/troubleshooting.md | 112 ++ .../versioned_docs/version-0.75/tutorial.md | 60 + .../versioned_docs/version-0.75/typescript.md | 238 +++ .../versioned_docs/version-0.75/upgrading.md | 81 + .../version-0.75/usecolorscheme.md | 46 + .../version-0.75/usewindowdimensions.md | 79 + .../version-0.75/using-a-listview.md | 103 + .../version-0.75/using-a-scrollview.md | 61 + .../versioned_docs/version-0.75/vibration.md | 236 +++ .../version-0.75/view-flattening.md | 47 + .../version-0.75/view-style-props.md | 261 +++ cnwebsite/versioned_docs/version-0.75/view.md | 590 ++++++ .../version-0.75/viewpagerandroid.md | 180 ++ .../versioned_docs/version-0.75/viewtoken.md | 65 + .../version-0.75/virtualizedlist.md | 640 ++++++ .../version-0.75/xplat-implementation.md | 38 + .../version-0.75-sidebars.json | 299 +++ cnwebsite/versions.json | 1 + docs/_integration-with-existing-apps-objc.md | 2 +- .../integration-with-existing-apps.md | 13 +- .../integration-with-existing-apps.md | 13 +- .../_integration-with-existing-apps-objc.md | 2 +- .../_integration-with-existing-apps-objc.md | 2 +- .../_integration-with-existing-apps-objc.md | 2 +- .../_integration-with-existing-apps-objc.md | 2 +- .../_integration-with-existing-apps-objc.md | 2 +- 360 files changed, 45989 insertions(+), 81 deletions(-) create mode 100644 cnwebsite/versioned_docs/version-0.75/_getting-started-linux-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/_getting-started-macos-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/_getting-started-macos-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/_getting-started-windows-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-java.md create mode 100644 cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-kotlin.md create mode 100644 cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-objc.md create mode 100644 cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-swift.md create mode 100644 cnwebsite/versioned_docs/version-0.75/_markdown-m1-cocoapods.mdx create mode 100644 cnwebsite/versioned_docs/version-0.75/_markdown-new-architecture-warning.mdx create mode 100644 cnwebsite/versioned_docs/version-0.75/_remove-global-cli.md create mode 100644 cnwebsite/versioned_docs/version-0.75/accessibility.md create mode 100644 cnwebsite/versioned_docs/version-0.75/accessibilityinfo.md create mode 100644 cnwebsite/versioned_docs/version-0.75/actionsheetios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/activityindicator.md create mode 100644 cnwebsite/versioned_docs/version-0.75/alert.md create mode 100644 cnwebsite/versioned_docs/version-0.75/alertios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/animated.md create mode 100644 cnwebsite/versioned_docs/version-0.75/animatedvalue.md create mode 100644 cnwebsite/versioned_docs/version-0.75/animatedvaluexy.md create mode 100644 cnwebsite/versioned_docs/version-0.75/animations.md create mode 100644 cnwebsite/versioned_docs/version-0.75/app-extensions.md create mode 100644 cnwebsite/versioned_docs/version-0.75/appearance.md create mode 100644 cnwebsite/versioned_docs/version-0.75/appregistry.md create mode 100644 cnwebsite/versioned_docs/version-0.75/appstate.md create mode 100644 cnwebsite/versioned_docs/version-0.75/architecture-overview.md create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/AddToBuildPhases.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/AddToLibraries.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/AddToSearchPaths.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Alert/exampleandroid.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Alert/exampleios.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-phase-one.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-phase-three.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-phase-two.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-pipeline/data-flow.jpg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-pipeline/phase-one-render.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-pipeline/phase-three-mount.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-pipeline/phase-two-commit.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-pipeline/render-pipeline-1.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-pipeline/render-pipeline-2.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-pipeline/render-pipeline-3.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-pipeline/render-pipeline-4.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-pipeline/render-pipeline-5.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/renderer-pipeline/render-pipeline-6.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/threading-model/case-1.jpg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/threading-model/case-2.jpg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/threading-model/case-3.jpg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/threading-model/case-4.jpg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/threading-model/case-5.jpg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/threading-model/case-6.jpg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/threading-model/symbols.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/view-flattening/diagram-one.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/view-flattening/diagram-two.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Architecture/xplat-implementation/xplat-implementation-diagram.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Button.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/ConfigureReleaseScheme.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/DatePickerIOS/example.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/DatePickerIOS/maximumDate.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/DatePickerIOS/minuteInterval.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/DatePickerIOS/mode.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/DevMenu.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/DeveloperMenu.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/EmbeddedAppAndroid.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAVDManagerMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAVDManagerWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidSDKManagerInstallsWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidSDKManagerMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidSDKManagerWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidStudioAVD.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidStudioWelcomeMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidStudioWelcomeWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidSuccessMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedAndroidSuccessWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedCongratulations.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedCreateAVDMacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedCreateAVDWindows.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedCreateAVDx86MacOS.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedCreateAVDx86Windows.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartedXcodeCommandLineTools.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/GettingStartediOSSuccess.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/HermesApp.jpg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/HermesDebugChromeConfig.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/HermesDebugChromeInspect.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/HermesDebugChromeMetroAddress.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/HermesDebugChromePause.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/HermesLogo.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/Inspector.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/KeyboardAvoidingView/example.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/MaskedViewIOS/example.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/NavigationStack-NavigatorIOS.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/ObjectObserveError.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/PerfUtil.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/ReactDevTools.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/ReactDevToolsDollarR.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/ReactDevToolsInspector.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/RunningOnDeviceCodeSigning.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/RunningOnDeviceReady.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SegmentedControlIOS/enabled.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SegmentedControlIOS/example.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SegmentedControlIOS/momentary.gif create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SegmentedControlIOS/tintColor.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceBadCreateUI.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceBadJS.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceBadJS2.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceBadUI.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceExample.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceHighlightVSync.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceJSThreadExample.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceNativeModulesThreadExample.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceRenderThreadExample.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceUIThreadExample.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/SystraceWellBehaved.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/TodayWidgetUnableToLoad.jpg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/XcodeBuildIP.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/buttonExample.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/d_pressable_anatomy.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/d_pressable_pressing.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/d_security_chart.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/d_security_deep-linking.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/diagram_ios-android-views.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/diagram_pkce.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/diagram_react-native-components.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/diagram_testing.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/favicon.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/metro-new-arch.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/oauth-pkce.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/p_android-ios-devices.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/p_cat1.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/p_cat2.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/p_tests-component.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/p_tests-e2e.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/p_tests-integration.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/p_tests-snapshot.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/p_tests-unit.svg create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/react-native-add-react-native-integration-example-high-scores.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/react-native-add-react-native-integration-example-home-screen.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/react-native-add-react-native-integration-link.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/react-native-add-react-native-integration-wire-up.png create mode 100644 cnwebsite/versioned_docs/version-0.75/assets/react-native-existing-app-integration-ios-before.png create mode 100644 cnwebsite/versioned_docs/version-0.75/asyncstorage.md create mode 100644 cnwebsite/versioned_docs/version-0.75/backhandler.md create mode 100644 cnwebsite/versioned_docs/version-0.75/build-speed.md create mode 100644 cnwebsite/versioned_docs/version-0.75/building-for-tv.md create mode 100644 cnwebsite/versioned_docs/version-0.75/button.md create mode 100644 cnwebsite/versioned_docs/version-0.75/checkbox.md create mode 100644 cnwebsite/versioned_docs/version-0.75/clipboard.md create mode 100644 cnwebsite/versioned_docs/version-0.75/colors.md create mode 100644 cnwebsite/versioned_docs/version-0.75/communication-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/communication-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/components-and-apis.md create mode 100644 cnwebsite/versioned_docs/version-0.75/custom-webview-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/custom-webview-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/datepickerandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.75/datepickerios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/debugging-release-builds.md create mode 100644 cnwebsite/versioned_docs/version-0.75/debugging.md create mode 100644 cnwebsite/versioned_docs/version-0.75/devsettings.md create mode 100644 cnwebsite/versioned_docs/version-0.75/dimensions.md create mode 100644 cnwebsite/versioned_docs/version-0.75/direct-manipulation.md create mode 100644 cnwebsite/versioned_docs/version-0.75/drawerlayoutandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.75/dynamiccolorios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/easing.md create mode 100644 cnwebsite/versioned_docs/version-0.75/fabric-renderer.md create mode 100644 cnwebsite/versioned_docs/version-0.75/fast-refresh.md create mode 100644 cnwebsite/versioned_docs/version-0.75/flatlist.md create mode 100644 cnwebsite/versioned_docs/version-0.75/flexbox.md create mode 100644 cnwebsite/versioned_docs/version-0.75/gesture-responder-system.md create mode 100644 cnwebsite/versioned_docs/version-0.75/getting-started.md create mode 100644 cnwebsite/versioned_docs/version-0.75/glossary.md create mode 100644 cnwebsite/versioned_docs/version-0.75/handling-text-input.md create mode 100644 cnwebsite/versioned_docs/version-0.75/handling-touches.md create mode 100644 cnwebsite/versioned_docs/version-0.75/headless-js-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/height-and-width.md create mode 100644 cnwebsite/versioned_docs/version-0.75/hermes.md create mode 100644 cnwebsite/versioned_docs/version-0.75/image-style-props.md create mode 100644 cnwebsite/versioned_docs/version-0.75/image.md create mode 100644 cnwebsite/versioned_docs/version-0.75/imagebackground.md create mode 100644 cnwebsite/versioned_docs/version-0.75/imagepickerios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/images.md create mode 100644 cnwebsite/versioned_docs/version-0.75/improvingux.md create mode 100644 cnwebsite/versioned_docs/version-0.75/inputaccessoryview.md create mode 100644 cnwebsite/versioned_docs/version-0.75/integration-with-android-fragment.md create mode 100644 cnwebsite/versioned_docs/version-0.75/integration-with-existing-apps.md create mode 100644 cnwebsite/versioned_docs/version-0.75/interactionmanager.md create mode 100644 cnwebsite/versioned_docs/version-0.75/intro-react-native-components.md create mode 100644 cnwebsite/versioned_docs/version-0.75/intro-react.md create mode 100644 cnwebsite/versioned_docs/version-0.75/introduction.md create mode 100644 cnwebsite/versioned_docs/version-0.75/javascript-environment.md create mode 100644 cnwebsite/versioned_docs/version-0.75/keyboard.md create mode 100644 cnwebsite/versioned_docs/version-0.75/keyboardavoidingview.md create mode 100644 cnwebsite/versioned_docs/version-0.75/layout-props.md create mode 100644 cnwebsite/versioned_docs/version-0.75/layoutanimation.md create mode 100644 cnwebsite/versioned_docs/version-0.75/layoutevent.md create mode 100644 cnwebsite/versioned_docs/version-0.75/libraries.md create mode 100644 cnwebsite/versioned_docs/version-0.75/linking-libraries-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/linking.md create mode 100644 cnwebsite/versioned_docs/version-0.75/metro.md create mode 100644 cnwebsite/versioned_docs/version-0.75/modal.md create mode 100644 cnwebsite/versioned_docs/version-0.75/more-resources.md create mode 100644 cnwebsite/versioned_docs/version-0.75/native-components-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/native-components-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/native-debugging.md create mode 100644 cnwebsite/versioned_docs/version-0.75/native-module-setup.md create mode 100644 cnwebsite/versioned_docs/version-0.75/native-modules-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/native-modules-intro.md create mode 100644 cnwebsite/versioned_docs/version-0.75/native-modules-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/navigation.md create mode 100644 cnwebsite/versioned_docs/version-0.75/netinfo.md create mode 100644 cnwebsite/versioned_docs/version-0.75/network.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-app-intro.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-app-modules-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-app-renderer-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-app-renderer-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-appendix.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-intro.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-library-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-library-intro.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-library-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-troubleshooting.md create mode 100644 cnwebsite/versioned_docs/version-0.75/new-architecture-turbo-module.md create mode 100644 cnwebsite/versioned_docs/version-0.75/optimizing-flatlist-configuration.md create mode 100644 cnwebsite/versioned_docs/version-0.75/optimizing-javascript-loading.md create mode 100644 cnwebsite/versioned_docs/version-0.75/other-debugging-methods.md create mode 100644 cnwebsite/versioned_docs/version-0.75/out-of-tree-platforms.md create mode 100644 cnwebsite/versioned_docs/version-0.75/panresponder.md create mode 100644 cnwebsite/versioned_docs/version-0.75/performance.md create mode 100644 cnwebsite/versioned_docs/version-0.75/permissionsandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.75/pixelratio.md create mode 100644 cnwebsite/versioned_docs/version-0.75/platform-specific-code.md create mode 100644 cnwebsite/versioned_docs/version-0.75/platform.md create mode 100644 cnwebsite/versioned_docs/version-0.75/platformcolor.md create mode 100644 cnwebsite/versioned_docs/version-0.75/pressable.md create mode 100644 cnwebsite/versioned_docs/version-0.75/pressevent.md create mode 100644 cnwebsite/versioned_docs/version-0.75/profile-hermes.md create mode 100644 cnwebsite/versioned_docs/version-0.75/profiling.md create mode 100644 cnwebsite/versioned_docs/version-0.75/progressbarandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.75/progressviewios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/props.md create mode 100644 cnwebsite/versioned_docs/version-0.75/publishing-to-app-store.md create mode 100644 cnwebsite/versioned_docs/version-0.75/pushnotificationios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/ram-bundles-inline-requires.md create mode 100644 cnwebsite/versioned_docs/version-0.75/react-18-and-react-native.md create mode 100644 cnwebsite/versioned_docs/version-0.75/react-devtools.md create mode 100644 cnwebsite/versioned_docs/version-0.75/react-native-gradle-plugin.md create mode 100644 cnwebsite/versioned_docs/version-0.75/react-node.md create mode 100644 cnwebsite/versioned_docs/version-0.75/rect.md create mode 100644 cnwebsite/versioned_docs/version-0.75/rectorsize.md create mode 100644 cnwebsite/versioned_docs/version-0.75/refreshcontrol.md create mode 100644 cnwebsite/versioned_docs/version-0.75/removing-default-permissions.md create mode 100644 cnwebsite/versioned_docs/version-0.75/render-pipeline.md create mode 100644 cnwebsite/versioned_docs/version-0.75/roottag.md create mode 100644 cnwebsite/versioned_docs/version-0.75/running-on-device.md create mode 100644 cnwebsite/versioned_docs/version-0.75/running-on-simulator-ios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/safeareaview.md create mode 100644 cnwebsite/versioned_docs/version-0.75/sample-application-movies.md create mode 100644 cnwebsite/versioned_docs/version-0.75/scrollview.md create mode 100644 cnwebsite/versioned_docs/version-0.75/sectionlist.md create mode 100644 cnwebsite/versioned_docs/version-0.75/security.md create mode 100644 cnwebsite/versioned_docs/version-0.75/segmentedcontrolios.md create mode 100644 cnwebsite/versioned_docs/version-0.75/settings.md create mode 100644 cnwebsite/versioned_docs/version-0.75/shadow-props.md create mode 100644 cnwebsite/versioned_docs/version-0.75/share.md create mode 100644 cnwebsite/versioned_docs/version-0.75/signed-apk-android.md create mode 100644 cnwebsite/versioned_docs/version-0.75/slider.md create mode 100644 cnwebsite/versioned_docs/version-0.75/speeding-ci-builds.md create mode 100644 cnwebsite/versioned_docs/version-0.75/state.md create mode 100644 cnwebsite/versioned_docs/version-0.75/statusbar.md create mode 100644 cnwebsite/versioned_docs/version-0.75/style.md create mode 100644 cnwebsite/versioned_docs/version-0.75/stylesheet.md create mode 100644 cnwebsite/versioned_docs/version-0.75/switch.md create mode 100644 cnwebsite/versioned_docs/version-0.75/symbolication.md create mode 100644 cnwebsite/versioned_docs/version-0.75/systrace.md create mode 100644 cnwebsite/versioned_docs/version-0.75/testing-overview.md create mode 100644 cnwebsite/versioned_docs/version-0.75/text-style-props.md create mode 100644 cnwebsite/versioned_docs/version-0.75/text.md create mode 100644 cnwebsite/versioned_docs/version-0.75/textinput.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/_markdown_beta_ts_support.mdx create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/_markdown_native_deprecation.mdx create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/backward-compatibility-fabric-components.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/backward-compatibility-turbomodules.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/backward-compatibility.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/cxx-custom-types.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/cxx-cxxturbomodules.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/landing-page.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/pillars-codegen.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/pillars-fabric-components.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/pillars-turbomodule.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/pillars.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/use-app-template.md create mode 100644 cnwebsite/versioned_docs/version-0.75/the-new-architecture/why.md create mode 100644 cnwebsite/versioned_docs/version-0.75/threading-model.md create mode 100644 cnwebsite/versioned_docs/version-0.75/timepickerandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.75/timers.md create mode 100644 cnwebsite/versioned_docs/version-0.75/toastandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.75/touchablehighlight.md create mode 100644 cnwebsite/versioned_docs/version-0.75/touchablenativefeedback.md create mode 100644 cnwebsite/versioned_docs/version-0.75/touchableopacity.md create mode 100644 cnwebsite/versioned_docs/version-0.75/touchablewithoutfeedback.md create mode 100644 cnwebsite/versioned_docs/version-0.75/transforms.md create mode 100644 cnwebsite/versioned_docs/version-0.75/troubleshooting.md create mode 100644 cnwebsite/versioned_docs/version-0.75/tutorial.md create mode 100644 cnwebsite/versioned_docs/version-0.75/typescript.md create mode 100644 cnwebsite/versioned_docs/version-0.75/upgrading.md create mode 100644 cnwebsite/versioned_docs/version-0.75/usecolorscheme.md create mode 100644 cnwebsite/versioned_docs/version-0.75/usewindowdimensions.md create mode 100644 cnwebsite/versioned_docs/version-0.75/using-a-listview.md create mode 100644 cnwebsite/versioned_docs/version-0.75/using-a-scrollview.md create mode 100644 cnwebsite/versioned_docs/version-0.75/vibration.md create mode 100644 cnwebsite/versioned_docs/version-0.75/view-flattening.md create mode 100644 cnwebsite/versioned_docs/version-0.75/view-style-props.md create mode 100644 cnwebsite/versioned_docs/version-0.75/view.md create mode 100644 cnwebsite/versioned_docs/version-0.75/viewpagerandroid.md create mode 100644 cnwebsite/versioned_docs/version-0.75/viewtoken.md create mode 100644 cnwebsite/versioned_docs/version-0.75/virtualizedlist.md create mode 100644 cnwebsite/versioned_docs/version-0.75/xplat-implementation.md create mode 100644 cnwebsite/versioned_sidebars/version-0.75-sidebars.json diff --git a/archived_docs/version-0.44/integration-with-existing-apps.md b/archived_docs/version-0.44/integration-with-existing-apps.md index 3b8b645d94c..19e3438333a 100644 --- a/archived_docs/version-0.44/integration-with-existing-apps.md +++ b/archived_docs/version-0.44/integration-with-existing-apps.md @@ -393,7 +393,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
diff --git a/archived_docs/version-0.45/integration-with-existing-apps.md b/archived_docs/version-0.45/integration-with-existing-apps.md index 6fd8e07d1a2..1a909e8127a 100644 --- a/archived_docs/version-0.45/integration-with-existing-apps.md +++ b/archived_docs/version-0.45/integration-with-existing-apps.md @@ -393,7 +393,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
diff --git a/archived_docs/version-0.46/integration-with-existing-apps.md b/archived_docs/version-0.46/integration-with-existing-apps.md index b9255494bdf..bf347ce7abd 100644 --- a/archived_docs/version-0.46/integration-with-existing-apps.md +++ b/archived_docs/version-0.46/integration-with-existing-apps.md @@ -393,7 +393,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
diff --git a/archived_docs/version-0.47/integration-with-existing-apps.md b/archived_docs/version-0.47/integration-with-existing-apps.md index 5cc91d0a458..c9a48ccbca0 100644 --- a/archived_docs/version-0.47/integration-with-existing-apps.md +++ b/archived_docs/version-0.47/integration-with-existing-apps.md @@ -393,7 +393,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
diff --git a/archived_docs/version-0.48/integration-with-existing-apps.md b/archived_docs/version-0.48/integration-with-existing-apps.md index d6a8fb3e982..c193d428b5f 100644 --- a/archived_docs/version-0.48/integration-with-existing-apps.md +++ b/archived_docs/version-0.48/integration-with-existing-apps.md @@ -393,7 +393,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
diff --git a/archived_docs/version-0.49/integration-with-existing-apps.md b/archived_docs/version-0.49/integration-with-existing-apps.md index 4c6ca00afd6..fab0d73c673 100644 --- a/archived_docs/version-0.49/integration-with-existing-apps.md +++ b/archived_docs/version-0.49/integration-with-existing-apps.md @@ -391,7 +391,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
diff --git a/archived_docs/version-0.50/integration-with-existing-apps.md b/archived_docs/version-0.50/integration-with-existing-apps.md index 42fb19ff91f..3a99f51d656 100644 --- a/archived_docs/version-0.50/integration-with-existing-apps.md +++ b/archived_docs/version-0.50/integration-with-existing-apps.md @@ -402,7 +402,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
diff --git a/archived_docs/version-0.51/integration-with-existing-apps.md b/archived_docs/version-0.51/integration-with-existing-apps.md index c379594bae9..77412b65686 100644 --- a/archived_docs/version-0.51/integration-with-existing-apps.md +++ b/archived_docs/version-0.51/integration-with-existing-apps.md @@ -402,7 +402,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
diff --git a/archived_docs/version-0.55/integration-with-existing-apps.md b/archived_docs/version-0.55/integration-with-existing-apps.md index 9114a11a39d..3e8fa2f0a97 100644 --- a/archived_docs/version-0.55/integration-with-existing-apps.md +++ b/archived_docs/version-0.55/integration-with-existing-apps.md @@ -380,7 +380,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. diff --git a/archived_docs/version-0.56/integration-with-existing-apps.md b/archived_docs/version-0.56/integration-with-existing-apps.md index 63996a5ac27..2db4453b2be 100644 --- a/archived_docs/version-0.56/integration-with-existing-apps.md +++ b/archived_docs/version-0.56/integration-with-existing-apps.md @@ -380,7 +380,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. diff --git a/archived_docs/version-0.57/integration-with-existing-apps.md b/archived_docs/version-0.57/integration-with-existing-apps.md index 96b7b580d82..d6abc241894 100644 --- a/archived_docs/version-0.57/integration-with-existing-apps.md +++ b/archived_docs/version-0.57/integration-with-existing-apps.md @@ -380,7 +380,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. diff --git a/archived_docs/version-0.58/integration-with-existing-apps.md b/archived_docs/version-0.58/integration-with-existing-apps.md index f4908a6d330..ea6cd048fc1 100644 --- a/archived_docs/version-0.58/integration-with-existing-apps.md +++ b/archived_docs/version-0.58/integration-with-existing-apps.md @@ -380,7 +380,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. diff --git a/archived_docs/version-0.59/integration-with-existing-apps.md b/archived_docs/version-0.59/integration-with-existing-apps.md index 107449bb5ed..4203582ae07 100644 --- a/archived_docs/version-0.59/integration-with-existing-apps.md +++ b/archived_docs/version-0.59/integration-with-existing-apps.md @@ -380,7 +380,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. diff --git a/archived_docs/version-0.60/integration-with-existing-apps.md b/archived_docs/version-0.60/integration-with-existing-apps.md index 1dc47babf6c..98e7f0beb7b 100644 --- a/archived_docs/version-0.60/integration-with-existing-apps.md +++ b/archived_docs/version-0.60/integration-with-existing-apps.md @@ -396,7 +396,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. diff --git a/archived_docs/version-0.61/integration-with-existing-apps.md b/archived_docs/version-0.61/integration-with-existing-apps.md index 3c0a0dfa9db..8c930a982ae 100644 --- a/archived_docs/version-0.61/integration-with-existing-apps.md +++ b/archived_docs/version-0.61/integration-with-existing-apps.md @@ -394,7 +394,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. diff --git a/archived_docs/version-0.62/integration-with-existing-apps.md b/archived_docs/version-0.62/integration-with-existing-apps.md index dda3ac57934..371a0b734a3 100644 --- a/archived_docs/version-0.62/integration-with-existing-apps.md +++ b/archived_docs/version-0.62/integration-with-existing-apps.md @@ -394,7 +394,7 @@ We will, for debugging purposes, log that the event handler was invoked. Then, w } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. diff --git a/archived_docs/version-0.63/_integration-with-exisiting-apps-objc.md b/archived_docs/version-0.63/_integration-with-exisiting-apps-objc.md index ef61f909d21..0f7603fda7b 100644 --- a/archived_docs/version-0.63/_integration-with-exisiting-apps-objc.md +++ b/archived_docs/version-0.63/_integration-with-exisiting-apps-objc.md @@ -272,7 +272,7 @@ You can add a new link on the main game menu to go to the "High Score" React Nat } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/archived_docs/version-0.64/_integration-with-exisiting-apps-objc.md b/archived_docs/version-0.64/_integration-with-exisiting-apps-objc.md index 1aa816ade81..3fac721c725 100644 --- a/archived_docs/version-0.64/_integration-with-exisiting-apps-objc.md +++ b/archived_docs/version-0.64/_integration-with-exisiting-apps-objc.md @@ -272,7 +272,7 @@ You can add a new link on the main game menu to go to the "High Score" React Nat } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/archived_docs/version-0.65/_integration-with-exisiting-apps-objc.md b/archived_docs/version-0.65/_integration-with-exisiting-apps-objc.md index 1aa816ade81..3fac721c725 100644 --- a/archived_docs/version-0.65/_integration-with-exisiting-apps-objc.md +++ b/archived_docs/version-0.65/_integration-with-exisiting-apps-objc.md @@ -272,7 +272,7 @@ You can add a new link on the main game menu to go to the "High Score" React Nat } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/archived_docs/version-0.66/_integration-with-exisiting-apps-objc.md b/archived_docs/version-0.66/_integration-with-exisiting-apps-objc.md index 1aa816ade81..3fac721c725 100644 --- a/archived_docs/version-0.66/_integration-with-exisiting-apps-objc.md +++ b/archived_docs/version-0.66/_integration-with-exisiting-apps-objc.md @@ -272,7 +272,7 @@ You can add a new link on the main game menu to go to the "High Score" React Nat } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/archived_docs/version-0.67/_integration-with-exisiting-apps-objc.md b/archived_docs/version-0.67/_integration-with-exisiting-apps-objc.md index abc26b8ee6a..a18e19ddb61 100644 --- a/archived_docs/version-0.67/_integration-with-exisiting-apps-objc.md +++ b/archived_docs/version-0.67/_integration-with-exisiting-apps-objc.md @@ -276,7 +276,7 @@ You can add a new link on the main game menu to go to the "High Score" React Nat } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/archived_docs/version-0.68/_integration-with-exisiting-apps-objc.md b/archived_docs/version-0.68/_integration-with-exisiting-apps-objc.md index abc26b8ee6a..a18e19ddb61 100644 --- a/archived_docs/version-0.68/_integration-with-exisiting-apps-objc.md +++ b/archived_docs/version-0.68/_integration-with-exisiting-apps-objc.md @@ -276,7 +276,7 @@ You can add a new link on the main game menu to go to the "High Score" React Nat } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/archived_docs/version-0.69/_integration-with-exisiting-apps-objc.md b/archived_docs/version-0.69/_integration-with-exisiting-apps-objc.md index abc26b8ee6a..a18e19ddb61 100644 --- a/archived_docs/version-0.69/_integration-with-exisiting-apps-objc.md +++ b/archived_docs/version-0.69/_integration-with-exisiting-apps-objc.md @@ -276,7 +276,7 @@ You can add a new link on the main game menu to go to the "High Score" React Nat } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/cndocs/_getting-started-linux-android.md b/cndocs/_getting-started-linux-android.md index 8a0013c1246..5977e1744ec 100644 --- a/cndocs/_getting-started-linux-android.md +++ b/cndocs/_getting-started-linux-android.md @@ -55,7 +55,7 @@ React Native 当前需要 Java Development Kit [JDK] 17。你可以在命令行 > 也可以尝试参考这里的做法[设置阿里云的 maven 镜像源](https://github.com/scwang90/SmartRefreshLayout/issues/1376#issuecomment-938422964)，但这个做法可能随 gradle 或者 rn 版本的不同而失效。 -#### 1. 安装 Android Studio +

1. 安装 Android Studio

[首先下载和安装 Android Studio](https://developer.android.google.cn/studio/)，国内用户可能无法打开官方链接，可自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项： @@ -69,7 +69,7 @@ React Native 当前需要 Java Development Kit [JDK] 17。你可以在命令行 安装完成后，看到欢迎界面时，就可以进行下面的操作了。 -#### 2. 安装 Android SDK +

2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是`Android 14 (UpsideDownCake)`版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android 6 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。 @@ -86,7 +86,7 @@ Android Studio 默认会安装最新版本的 Android SDK。目前编译 React N 最后点击"Apply"来下载和安装这些组件。 -#### 3. 配置 ANDROID_HOME 环境变量 +

3. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。 diff --git a/cndocs/_integration-with-existing-apps-objc.md b/cndocs/_integration-with-existing-apps-objc.md index 6e0c6632bb8..5b00a805c62 100644 --- a/cndocs/_integration-with-existing-apps-objc.md +++ b/cndocs/_integration-with-existing-apps-objc.md @@ -240,7 +240,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores); } ``` -> 请注意，`RCTRootView initWithURL` 会启动一个新的 JSC VM。为了节省资源并简化原生应用程序中不同部分的 RN 视图之间的通信，您可以拥有多个由 React Native 提供支持且与单个 JS 运行时相关联的视图。要实现这一点，请使用 [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h#L94) 创建桥接器，然后使用 `RCTRootView initWithBridge`。 +> 请注意，`RCTRootView initWithBundleURL` 会启动一个新的 JSC VM。为了节省资源并简化原生应用程序中不同部分的 RN 视图之间的通信，您可以拥有多个由 React Native 提供支持且与单个 JS 运行时相关联的视图。要实现这一点，请使用 [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h#L94) 创建桥接器，然后使用 `RCTRootView initWithBridge`。 > 在将应用程序移至生产环境时，`NSURL` 可以通过类似于 `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];` 的方式指向磁盘上预打包文件。您可以在 `node_modules/react-native/scripts/` 中使用 `react-native-xcode.sh` 脚本生成该预打包文件。 diff --git a/cnwebsite/sidebars.json b/cnwebsite/sidebars.json index 5bcbf232e58..134226bc527 100644 --- a/cnwebsite/sidebars.json +++ b/cnwebsite/sidebars.json @@ -25,7 +25,7 @@ "typescript", "upgrading" ], - "UI 与交互": [ + "界面与交互": [ "style", "height-and-width", "flexbox", diff --git a/cnwebsite/versioned_docs/version-0.70/_integration-with-exisiting-apps-objc.md b/cnwebsite/versioned_docs/version-0.70/_integration-with-exisiting-apps-objc.md index fa6e1d252a1..a18e19ddb61 100644 --- a/cnwebsite/versioned_docs/version-0.70/_integration-with-exisiting-apps-objc.md +++ b/cnwebsite/versioned_docs/version-0.70/_integration-with-exisiting-apps-objc.md @@ -73,7 +73,7 @@ $ brew install cocoapods ## 把 React Native 添加到你的应用中 -在本教程中我们用于[示范的 app](https://github.com/JoelMarcey/iOS-2048)是一个[2048](https://en.wikipedia.org/wiki/2048_%28video_game%29)类型的游戏。下面是这个游戏还没有集成React Native 时的主界面： +在本教程中我们用于[示范的 app](https://github.com/JoelMarcey/iOS-2048)是一个[2048](https://en.wikipedia.org/wiki/2048_%28video_game%29)类型的游戏。下面是这个游戏还没有集成 React Native 时的主界面： ![Before RN Integration](/docs/assets/react-native-existing-app-integration-ios-before.png) ### 配置 CocoaPods 的依赖 @@ -174,16 +174,11 @@ Pod installation complete! There are 3 dependencies from the Podfile and 1 total ```jsx import React from 'react'; -import { - AppRegistry, - StyleSheet, - Text, - View -} from 'react-native'; +import {AppRegistry, StyleSheet, Text, View} from 'react-native'; class RNHighScores extends React.Component { render() { - var contents = this.props['scores'].map((score) => ( + var contents = this.props['scores'].map(score => ( {score.name}:{score.value} {'\n'} @@ -205,18 +200,18 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'center', alignItems: 'center', - backgroundColor: '#FFFFFF' + backgroundColor: '#FFFFFF', }, highScoresTitle: { fontSize: 20, textAlign: 'center', - margin: 10 + margin: 10, }, scores: { textAlign: 'center', color: '#333333', - marginBottom: 5 - } + marginBottom: 5, + }, }); // Module name @@ -281,7 +276,7 @@ You can add a new link on the main game menu to go to the "High Score" React Nat } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/cnwebsite/versioned_docs/version-0.71/_integration-with-exisiting-apps-objc.md b/cnwebsite/versioned_docs/version-0.71/_integration-with-exisiting-apps-objc.md index 7f7ee642563..42be127d451 100644 --- a/cnwebsite/versioned_docs/version-0.71/_integration-with-exisiting-apps-objc.md +++ b/cnwebsite/versioned_docs/version-0.71/_integration-with-exisiting-apps-objc.md @@ -73,7 +73,7 @@ $ brew install cocoapods ## 把 React Native 添加到你的应用中 -在本教程中我们用于[示范的 app](https://github.com/JoelMarcey/iOS-2048)是一个[2048](https://en.wikipedia.org/wiki/2048_%28video_game%29)类型的游戏。下面是这个游戏还没有集成React Native 时的主界面： +在本教程中我们用于[示范的 app](https://github.com/JoelMarcey/iOS-2048)是一个[2048](https://en.wikipedia.org/wiki/2048_%28video_game%29)类型的游戏。下面是这个游戏还没有集成 React Native 时的主界面： ![Before RN Integration](/docs/assets/react-native-existing-app-integration-ios-before.png) ### 配置 CocoaPods 的依赖 @@ -172,16 +172,11 @@ Pod installation complete! There are 3 dependencies from the Podfile and 1 total ```jsx import React from 'react'; -import { - AppRegistry, - StyleSheet, - Text, - View -} from 'react-native'; +import {AppRegistry, StyleSheet, Text, View} from 'react-native'; class RNHighScores extends React.Component { render() { - var contents = this.props['scores'].map((score) => ( + var contents = this.props['scores'].map(score => ( {score.name}:{score.value} {'\n'} @@ -203,18 +198,18 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'center', alignItems: 'center', - backgroundColor: '#FFFFFF' + backgroundColor: '#FFFFFF', }, highScoresTitle: { fontSize: 20, textAlign: 'center', - margin: 10 + margin: 10, }, scores: { textAlign: 'center', color: '#333333', - marginBottom: 5 - } + marginBottom: 5, + }, }); // Module name @@ -279,7 +274,7 @@ You can add a new link on the main game menu to go to the "High Score" React Nat } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithBundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithBundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/cnwebsite/versioned_docs/version-0.72/_integration-with-existing-apps-objc.md b/cnwebsite/versioned_docs/version-0.72/_integration-with-existing-apps-objc.md index 7f67c6db0de..c4e9f28a91d 100644 --- a/cnwebsite/versioned_docs/version-0.72/_integration-with-existing-apps-objc.md +++ b/cnwebsite/versioned_docs/version-0.72/_integration-with-existing-apps-objc.md @@ -78,7 +78,7 @@ $ brew install cocoapods ### Xcode 命令行工具 -安装Xcode命令行工具。在Xcode菜单中选择**Settings... (或者是 Preferences...)**，进入 Locations 面板并通过在 Command Line Tools 下拉菜单中选择最新版本来安装工具。 +安装 Xcode 命令行工具。在 Xcode 菜单中选择**Settings... (或者是 Preferences...)**，进入 Locations 面板并通过在 Command Line Tools 下拉菜单中选择最新版本来安装工具。 ![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png) @@ -188,7 +188,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores); 现在我们已经在`index.js`中创建了 React Native 组件，下一步就是把这个组件添加给一个新的或已有的`ViewController`。最简单的方法是可选地为您的组件创建一个事件路径，然后将该组件添加到现有的“ViewController”中。 -我们将把React Native组件与名为“RCTRootView”的新原生视图绑定在一起，该视图实际上包含它。 +我们将把 React Native 组件与名为“RCTRootView”的新原生视图绑定在一起，该视图实际上包含它。 ##### 1. 创建一个事件路径 @@ -240,7 +240,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores); } ``` -> 请注意，`RCTRootView initWithURL` 会启动一个新的 JSC VM。为了节省资源并简化本机应用程序中不同部分的 RN 视图之间的通信，您可以拥有多个由 React Native 提供支持且与单个 JS 运行时相关联的视图。要实现这一点，请使用 [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h#L94) 创建桥接器，然后使用 `RCTRootView initWithBridge`。 +> 请注意，`RCTRootView initWithBundleURL` 会启动一个新的 JSC VM。为了节省资源并简化本机应用程序中不同部分的 RN 视图之间的通信，您可以拥有多个由 React Native 提供支持且与单个 JS 运行时相关联的视图。要实现这一点，请使用 [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h#L94) 创建桥接器，然后使用 `RCTRootView initWithBridge`。 > 在将应用程序移至生产环境时，`NSURL` 可以通过类似于 `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];` 的方式指向磁盘上预打包文件。您可以在 `node_modules/react-native/scripts/` 中使用 `react-native-xcode.sh` 脚本生成该预打包文件。 @@ -250,7 +250,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores); ![Event Path](/docs/assets/react-native-add-react-native-integration-wire-up.png) -> 其中一种更简单的方法是在Storyboard中打开视图，右键单击新链接。选择诸如“Touch Up Inside”事件之类的内容，将其拖到Storyboard上，然后从提供的列表中选择所创建的方法。 +> 其中一种更简单的方法是在 Storyboard 中打开视图，右键单击新链接。选择诸如“Touch Up Inside”事件之类的内容，将其拖到 Storyboard 上，然后从提供的列表中选择所创建的方法。 ### 测试集成结果 @@ -295,11 +295,11 @@ $ npx react-native run-ios 在我们的示例应用程序中，您应该会看到"High Scores"链接，然后当您单击它时，将会看到 React Native 组件的呈现。 -这是应用_原生_部分的主页面： +这是应用*原生*部分的主页面： ![Home Screen](/docs/assets/react-native-add-react-native-integration-example-home-screen.png) -这是应用_React Native_部分的 high score 页面: +这是应用*React Native*部分的 high score 页面: ![High Scores](/docs/assets/react-native-add-react-native-integration-example-high-scores.png) diff --git a/cnwebsite/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md b/cnwebsite/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md index 7f67c6db0de..c4e9f28a91d 100644 --- a/cnwebsite/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md +++ b/cnwebsite/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md @@ -78,7 +78,7 @@ $ brew install cocoapods ### Xcode 命令行工具 -安装Xcode命令行工具。在Xcode菜单中选择**Settings... (或者是 Preferences...)**，进入 Locations 面板并通过在 Command Line Tools 下拉菜单中选择最新版本来安装工具。 +安装 Xcode 命令行工具。在 Xcode 菜单中选择**Settings... (或者是 Preferences...)**，进入 Locations 面板并通过在 Command Line Tools 下拉菜单中选择最新版本来安装工具。 ![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png) @@ -188,7 +188,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores); 现在我们已经在`index.js`中创建了 React Native 组件，下一步就是把这个组件添加给一个新的或已有的`ViewController`。最简单的方法是可选地为您的组件创建一个事件路径，然后将该组件添加到现有的“ViewController”中。 -我们将把React Native组件与名为“RCTRootView”的新原生视图绑定在一起，该视图实际上包含它。 +我们将把 React Native 组件与名为“RCTRootView”的新原生视图绑定在一起，该视图实际上包含它。 ##### 1. 创建一个事件路径 @@ -240,7 +240,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores); } ``` -> 请注意，`RCTRootView initWithURL` 会启动一个新的 JSC VM。为了节省资源并简化本机应用程序中不同部分的 RN 视图之间的通信，您可以拥有多个由 React Native 提供支持且与单个 JS 运行时相关联的视图。要实现这一点，请使用 [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h#L94) 创建桥接器，然后使用 `RCTRootView initWithBridge`。 +> 请注意，`RCTRootView initWithBundleURL` 会启动一个新的 JSC VM。为了节省资源并简化本机应用程序中不同部分的 RN 视图之间的通信，您可以拥有多个由 React Native 提供支持且与单个 JS 运行时相关联的视图。要实现这一点，请使用 [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h#L94) 创建桥接器，然后使用 `RCTRootView initWithBridge`。 > 在将应用程序移至生产环境时，`NSURL` 可以通过类似于 `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];` 的方式指向磁盘上预打包文件。您可以在 `node_modules/react-native/scripts/` 中使用 `react-native-xcode.sh` 脚本生成该预打包文件。 @@ -250,7 +250,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores); ![Event Path](/docs/assets/react-native-add-react-native-integration-wire-up.png) -> 其中一种更简单的方法是在Storyboard中打开视图，右键单击新链接。选择诸如“Touch Up Inside”事件之类的内容，将其拖到Storyboard上，然后从提供的列表中选择所创建的方法。 +> 其中一种更简单的方法是在 Storyboard 中打开视图，右键单击新链接。选择诸如“Touch Up Inside”事件之类的内容，将其拖到 Storyboard 上，然后从提供的列表中选择所创建的方法。 ### 测试集成结果 @@ -295,11 +295,11 @@ $ npx react-native run-ios 在我们的示例应用程序中，您应该会看到"High Scores"链接，然后当您单击它时，将会看到 React Native 组件的呈现。 -这是应用_原生_部分的主页面： +这是应用*原生*部分的主页面： ![Home Screen](/docs/assets/react-native-add-react-native-integration-example-home-screen.png) -这是应用_React Native_部分的 high score 页面: +这是应用*React Native*部分的 high score 页面: ![High Scores](/docs/assets/react-native-add-react-native-integration-example-high-scores.png) diff --git a/cnwebsite/versioned_docs/version-0.74/_integration-with-existing-apps-objc.md b/cnwebsite/versioned_docs/version-0.74/_integration-with-existing-apps-objc.md index 6e0c6632bb8..5b00a805c62 100644 --- a/cnwebsite/versioned_docs/version-0.74/_integration-with-existing-apps-objc.md +++ b/cnwebsite/versioned_docs/version-0.74/_integration-with-existing-apps-objc.md @@ -240,7 +240,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores); } ``` -> 请注意，`RCTRootView initWithURL` 会启动一个新的 JSC VM。为了节省资源并简化原生应用程序中不同部分的 RN 视图之间的通信，您可以拥有多个由 React Native 提供支持且与单个 JS 运行时相关联的视图。要实现这一点，请使用 [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h#L94) 创建桥接器，然后使用 `RCTRootView initWithBridge`。 +> 请注意，`RCTRootView initWithBundleURL` 会启动一个新的 JSC VM。为了节省资源并简化原生应用程序中不同部分的 RN 视图之间的通信，您可以拥有多个由 React Native 提供支持且与单个 JS 运行时相关联的视图。要实现这一点，请使用 [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h#L94) 创建桥接器，然后使用 `RCTRootView initWithBridge`。 > 在将应用程序移至生产环境时，`NSURL` 可以通过类似于 `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];` 的方式指向磁盘上预打包文件。您可以在 `node_modules/react-native/scripts/` 中使用 `react-native-xcode.sh` 脚本生成该预打包文件。 diff --git a/cnwebsite/versioned_docs/version-0.75/_getting-started-linux-android.md b/cnwebsite/versioned_docs/version-0.75/_getting-started-linux-android.md new file mode 100644 index 00000000000..5977e1744ec --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_getting-started-linux-android.md @@ -0,0 +1,188 @@ +import RemoveGlobalCLI from './\_remove-global-cli.md'; + +## 安装依赖 + +必须安装的依赖有：Node、JDK 和 Android Studio。 + +虽然你可以使用`任何编辑器`来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。 + +### Node + +参照 Node 官方的[Linux 安装指南](https://nodejs.org/en/download/package-manager/)来安装 Node 18 以上的版本。 + +> 注意：强烈建议始终选择 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 14 (UpsideDownCake)`版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android 6 以上设备）。你可以在 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 14 (UpsideDownCake)`选项，确保勾选了下面这些组件（如果看不到这个界面，则需要使用稳定的代理软件）： + +- `Android SDK Platform 34` +- `Intel x86 Atom_64 System Image`（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件） + +然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的`34.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@latest init AwesomeProject +``` + +如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +### [可选参数] 指定版本或项目模板 + +你可以使用`--version`参数（注意是`两`个杠）创建指定版本的项目。例如： + +```shell +npx react-native@X.XX.X 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](assets/GettingStartedAndroidStudioAVD.png) + +如果你刚刚才安装 Android Studio，那么可能需要先[创建一个虚拟设备](https://developer.android.com/studio/run/managing-avds.html)。点击"Create Virtual Device..."，然后选择所需的设备类型并点击"Next"，然后选择**Tiramisu** API Level 33 image. + +> 译注：请不要轻易点击 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.75/_getting-started-macos-android.md b/cnwebsite/versioned_docs/version-0.75/_getting-started-macos-android.md new file mode 100644 index 00000000000..f6c01c5fcd8 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_getting-started-macos-android.md @@ -0,0 +1,202 @@ +import RemoveGlobalCLI from './\_remove-global-cli.md'; + +## 安装依赖 + +必须安装的依赖有：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@18 +brew install watchman +``` + +如果你已经安装了 Node，请检查其版本是否在 18 以上。安装完 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 + +# Get path to where cask was installed to double-click installer +brew info --cask zulu@17 +``` + +安装 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 14 (UpsideDownCake)`版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android 6 以上设备）。你可以在 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 14 (UpsideDownCake)`选项，确保勾选了下面这些组件（如果看不到这个界面，则需要使用稳定的代理软件）： + +- `Android SDK Platform 34` +- `Intel x86 Atom_64 System Image`（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）或是`Google APIs ARM 64 v8a System Image`（针对 Apple Silicon 系列机型） + +然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的`34.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@latest init AwesomeProject +``` + +如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +

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

+ +你可以使用`--version`参数（注意是`两`个杠）创建指定版本的项目。例如： + +```shell +npx react-native@X.XX.X 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"，然后选择**Tiramisu** API Level 33 image. + +> 译注：请不要轻易点击 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.75/_getting-started-macos-ios.md b/cnwebsite/versioned_docs/version-0.75/_getting-started-macos-ios.md new file mode 100644 index 00000000000..bf056c5b872 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_getting-started-macos-ios.md @@ -0,0 +1,156 @@ +import RemoveGlobalCLI from './\_remove-global-cli.md'; + +## 安装依赖 + +必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。 + +虽然你可以使用`任何编辑器`来开发应用（编写 js 代码），但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境。 + +### Node & Watchman + +我们推荐使用[Homebrew](http://brew.sh/)来安装 Node 和 Watchman。在命令行中执行下列命令安装（如安装较慢可以尝试阿里云的[镜像源](https://developer.aliyun.com/mirror/homebrew)）： + +``` +brew install node@18 +brew install watchman +``` + +如果你已经安装了 Node，请检查其版本是否在 18 以上。安装完 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 或更高版本。你可以通过 App Store 或是到[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@latest 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@X.XX.X 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.75/_getting-started-windows-android.md b/cnwebsite/versioned_docs/version-0.75/_getting-started-windows-android.md new file mode 100644 index 00000000000..92fcfe2f663 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_getting-started-windows-android.md @@ -0,0 +1,193 @@ +import RemoveGlobalCLI from './\_remove-global-cli.md'; + +## 安装依赖 + +必须安装的依赖有：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 的版本应大于等于 18，安装完 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 14 (UpsideDownCake)`版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android 6 以上设备）。你可以在 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 14 (UpsideDownCake)`选项，确保勾选了下面这些组件（如果你看不到这个界面，则需要使用稳定的代理软件）： + +- `Android SDK Platform 34` +- `Intel x86 Atom_64 System Image`（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件） + +然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的`34.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@latest init AwesomeProject +``` + +如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考[集成到现有原生应用](integration-with-existing-apps.md)。 + +### [可选参数] 指定版本或项目模板 + +你可以使用`--version`参数（注意是`两`个杠）创建指定版本的项目。注意版本号必须精确到两个小数点。 + +```shell +npx react-native@X.XX.X 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"，然后选择**Tiramisu** API Level 33 image. + +> 译注：请不要轻易点击 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.75/_integration-with-existing-apps-java.md b/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-java.md new file mode 100644 index 00000000000..9119dbf2fb9 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-java.md @@ -0,0 +1,405 @@ +## 核心概念 + +把 React Native 组件集成到 Android 应用中有如下几个主要步骤： + +1. 配置好 React Native 依赖和项目结构。 +2. 创建 js 文件，编写 React Native 组件的 js 代码。 +3. 在应用中添加一个`ReactRootView`。这个`ReactRootView`正是用来承载你的 React Native 组件的容器。 +4. 启动 React Native 的 Metro 服务，运行应用。 +5. 验证这部分组件是否正常工作。 + +## 开发环境准备 + +首先按照[开发环境搭建教程](environment-setup)来安装 React Native 在 Android 平台上所需的一切依赖软件。 + +### 1. 配置项目目录结构 + +首先创建一个空目录用于存放 React Native 项目，然后在其中创建一个`/android`子目录，把你现有的 Android 项目拷贝到`/android`子目录中。 + +### 2. 安装 JavaScript 依赖包 + +在项目根目录下创建一个名为`package.json`的空文本文件，然后填入以下内容： + +``` +{ + "name": "MyReactNativeApp", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "react-native start" + } +} +``` + +> 示例中的`version`字段没有太大意义（除非你要把你的项目发布到 npm 仓库）。`scripts`中是用于启动 Metro 服务的命令。 + +接下来我们使用 yarn 或 npm（两者都是 node 的包管理器）来安装 React 和 React Native 模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），然后运行下列命令来安装： + +```shell +$ yarn add react-native +``` + +这样默认会安装最新版本的 React Native，同时会打印出类似下面的警告信息（你可能需要滚动屏幕才能注意到）： + +> warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0". + +这是正常现象，意味着我们还需要安装指定版本的 React： + +``` +$ yarn add react@16.2.0 +``` + +注意必须严格匹配警告信息中所列出的版本，高了或者低了都不可以。 + +> 如果你使用多个第三方依赖，可能这些第三方各自要求的 react 版本有所冲突，此时应优先满足`react-native`所需要的`react`版本。其他第三方能用则用，不能用则只能考虑选择其他库。 + +所有 JavaScript 依赖模块都会被安装到项目根目录下的`node_modules/`目录中（这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。 + +把`node_modules/`目录记录到`.gitignore`文件中（即不上传到版本控制系统，只保留在本地）。 + +## 把 React Native 添加到你的应用中 + +### 配置 Gradle + +React Native 使用 React Native Gradle Plugin 来配置您的依赖项和项目设置。 + +首先，让我们通过添加以下行来编辑您的`settings.gradle`文件： + +```groovy +includeBuild('../node_modules/@react-native/gradle-plugin') +``` + +然后你需要打开顶层的 `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 ++ implementation "com.facebook.react:react-android" ++ implementation "com.facebook.react:hermes-android" +} +``` + +这些依赖项可在 `mavenCentral()` 上获得，因此请确保您已在 `repositories{}` 块中定义它。 + +:::info 提示 +我们故意不为这些`implementation`依赖项指定版本，因为 React Native Gradle Plugin 会自动处理它。如果您不使用 React Native Gradle Plugin，则必须手动指定版本。 +::: + +### 启用原生模块的自动链接 + +要使用[自动链接](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md)的功能，我们必须将其应用于几个地方。首先，将以下内容添加到`settings.gradle`: + +```gradle +apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) +``` + +接下来，在`app/build.gradle`的最底部添加以下内容: + +```gradle +apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) +``` + +### 配置权限 + +接着，在 `AndroidManifest.xml` 清单文件中声明网络权限: + +```xml + +``` + +如果需要访问 `DevSettingsActivity` 界面（即开发者菜单），则还需要在 `AndroidManifest.xml` 中声明: + +```xml + +``` + +开发者菜单一般仅用于在开发时从 Packager 服务器刷新 JavaScript 代码，所以在正式发布时你可以去掉这一权限。 + +### 允许明文传输（http 接口） (API level 28+) + +> 从 Android 9 (API level 28)开始，默认情况下明文传输（http 接口）是禁用的，只能访问 https 接口。这将阻止应用程序连接到[Metro bundler](https://facebook.github.io/metro)。下面的更改允许调试版本中的明文通信。 + +#### 1. 为 debug 版本启用 `usesCleartextTraffic`选项 + +在`src/debug/AndroidManifest.xml`中添加`usesCleartextTraffic`选项： + +```xml + + + + + +``` + +如果希望在正式打包后也能继续访问 http 接口，则需要在`src/main/AndroidManifest.xml`中也添加这一选项。 + +要了解有关网络安全配置和明文通信策略的更多信息，请参阅[此链接](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted)。 + +### 代码集成 + +现在我们将修改原生 Android 应用程序以集成 React Native。 + +#### React Native 组件 + +我们首先要写的是"High Score"（得分排行榜）的 JavaScript 端的代码。 + +##### 1. 创建一个`index.js`文件 + +首先在项目根目录中创建一个空的`index.js`文件。(注意一些老的教程可能提到，在 0.49 版本之前是 index.android.js 文件) + +`index.js`是 React Native 应用在 Android 上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行`require/import`导入语句。本教程中为了简单示范，把全部的代码都写到了`index.js`里（当然实际开发中我们并不推荐这样做）。 + +##### 2. 添加你自己的 React Native 代码 + +在`index.js`中添加你自己的组件。这里我们只是简单的添加一个``组件，然后用一个带有样式的``组件把它包起来。 + +```jsx +import React from 'react'; +import {AppRegistry, StyleSheet, Text, View} from 'react-native'; + +const HelloWorld = () => { + return ( + + Hello, World + + ); +}; +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + }, + hello: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, +}); + +AppRegistry.registerComponent( + 'MyReactNativeApp', + () => HelloWorld, +); +``` + +##### 3. 配置权限以便开发中的红屏错误能正确显示 + +如果你的应用会运行在 Android 6.0（API level 23）或更高版本，请确保你在开发版本中有打开`悬浮窗(overlay)`权限。你可以在代码中使用`Settings.canDrawOverlays(this);`来检查。之所以需要这一权限，是因为我们会把开发中的报错显示在悬浮窗中（仅在开发阶段需要）。在 Android 6.0（API level 23）中用户需要手动同意授权。具体请求授权的做法是在`onCreate()`中添加如下代码。其中`OVERLAY_PERMISSION_REQ_CODE`是用于回传授权结果的字段。 + +```java +private final int OVERLAY_PERMISSION_REQ_CODE = 1; // 任写一个值 + +... + +if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { + if (!Settings.canDrawOverlays(this)) { + Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, + Uri.parse("package:" + getPackageName())); + startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE); + } +} +``` + +最后，必须重写`onActivityResult()`方法（如下面的代码所示）来处理权限接受或拒绝情况以实现一致的用户体验。此外，为了集成使用 startActivityForResult 的原生模块，我们需要将结果传递给 ReactInstanceManager 实例的 onActivityResult 方法。 + +```java +@Override +protected void onActivityResult(int requestCode, int resultCode, Intent data) { + if (requestCode == OVERLAY_PERMISSION_REQ_CODE) { + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { + if (!Settings.canDrawOverlays(this)) { + // SYSTEM_ALERT_WINDOW permission not granted + } + } + } + mReactInstanceManager.onActivityResult( this, requestCode, resultCode, data ); +} +``` + +#### 核心组件：`ReactRootView` + +我们还需要添加一些原生代码来启动 React Native 的运行时环境并让它开始渲染。首先需要在一个`Activity`中创建一个`ReactRootView`对象，然后在这个对象之中启动 React Native 应用，并将它设为界面的主视图。 + +> 如果你要在安卓 5.0 以下的系统上运行，请用 `com.android.support:appcompat` 包中的 `AppCompatActivity` 代替 `Activity` 。 + +```java +public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler { + private ReactRootView mReactRootView; + private ReactInstanceManager mReactInstanceManager; + + @Override + protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + SoLoader.init(this, false); + + mReactRootView = new ReactRootView(this); + List packages = new PackageList(getApplication()).getPackages(); + // 有一些第三方可能不能自动链接，对于这些包我们可以用下面的方式手动添加进来： + // packages.add(new MyReactNativePackage()); + // 同时需要手动把他们添加到`settings.gradle`和 `app/build.gradle`配置文件中。 + + mReactInstanceManager = ReactInstanceManager.builder() + .setApplication(getApplication()) + .setCurrentActivity(this) + .setBundleAssetName("index.android.bundle") + .setJSMainModulePath("index") + .addPackages(packages) + .setUseDeveloperSupport(BuildConfig.DEBUG) + .setInitialLifecycleState(LifecycleState.RESUMED) + .build(); + // 注意这里的MyReactNativeApp 必须对应"index.js"中的 + // "AppRegistry.registerComponent()"的第一个参数 + mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null); + + setContentView(mReactRootView); + } + + @Override + public void invokeDefaultOnBackPressed() { + super.onBackPressed(); + } +} +``` + +执行"Sync Project files with Gradle"操作。 + +如果你使用的是 Android Studio , 可以使用`Alt + Enter`快捷键来自动为 MyReactActivity 类补上缺失的 import 语句。注意`BuildConfig`应该是在你自己的包中自动生成，无需额外引入。千万不要从`com.facebook...`的包中引入！ + +我们需要把 `MyReactActivity` 的主题设定为 `Theme.AppCompat.Light.NoActionBar` ，因为里面有许多组件都使用了这一主题。 + +```xml + + +``` + +> 一个`ReactInstanceManager`可以在多个 activities 或 fragments 间共享。你将需要创建自己的`ReactFragment`或`ReactActivity`，并拥有一个保存`ReactInstanceManager`的单例持有者。当你需要`ReactInstanceManager`（例如，将`ReactInstanceManager`连接到这些 Activities 或 Fragments 的生命周期）时，请使用单例提供的那个。 + +下一步我们需要把一些 activity 的生命周期回调传递给`ReactInstanceManager`： + +```java +@Override +protected void onPause() { + super.onPause(); + + if (mReactInstanceManager != null) { + mReactInstanceManager.onHostPause(this); + } +} + +@Override +protected void onResume() { + super.onResume(); + + if (mReactInstanceManager != null) { + mReactInstanceManager.onHostResume(this, this); + } +} + +@Override +protected void onDestroy() { + super.onDestroy(); + + if (mReactInstanceManager != null) { + mReactInstanceManager.onHostDestroy(this); + } + if (mReactRootView != null) { + mReactRootView.unmountReactApplication(); + } +} +``` + +我们还需要把后退按钮事件传递给 React Native： + +```java +@Override + public void onBackPressed() { + if (mReactInstanceManager != null) { + mReactInstanceManager.onBackPressed(); + } else { + super.onBackPressed(); + } +} +``` + +这允许 JavaScript 控制用户按下设备后退按钮时发生的情况（例如，执行导航时）。当 JavaScript 不处理后退按钮按下的情况时，将调用`invokeDefaultOnBackPressed`方法。默认情况下，这将完成你的`Activity`。 + +最后，我们需要连接开发菜单。默认情况下通过（狂）摇晃设备来激活，但这在模拟器中不是很有用，只有当你按下设备菜单按钮时才显示（如果你使用的是 Android Studio 模拟器，请使用`Ctrl + M`）: + +```java +@Override +public boolean onKeyUp(int keyCode, KeyEvent event) { + if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { + mReactInstanceManager.showDevOptionsDialog(); + return true; + } + return super.onKeyUp(keyCode, event); +} +``` + +现在 activity 已就绪，可以运行一些 JavaScript 代码了。 + +### 测试集成结果 + +你已经完成了将 React Native 与当前应用程序集成的所有基本步骤。现在我们将启动[Metro bundler](https://facebook.github.io/metro)来构建`index.bundle`包，并通过本地主机提供服务。 + +##### 1. 运行 Metro 服务 + +运行应用首先需要启动开发服务器（Metro）。你只需在项目根目录中执行以下命令即可： + +```shell +$ yarn start +``` + +##### 2. 运行你的应用 + +保持 Metro 的窗口运行不要关闭，然后像往常一样编译运行你的 Android 应用(在命令行中执行`./gradlew installDebug`或是在 Android Studio 中编译运行)。 + +编译执行一切顺利进行之后，在进入到 MyReactActivity 时应该就能立刻从 Metro 中读取 JavaScript 代码并执行和显示： + +![Screenshot](/docs/assets/EmbeddedAppAndroid.png) + +### 在 Android Studio 中打包 + +你也可以使用 Android Studio 来打 release 包！其步骤基本和原生应用一样，只是如果你**没有**使用 React Native Gradle Plugin 的话，则在每次编译打包之前需要先执行 js 文件的打包(即生成离线的 jsbundle 文件)。具体的 js 打包命令如下： + +```shell +# 注：如果你使用了 React Native Gradle Plugin，则其会自动执行以下命令，不需要手动执行 +$ npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/ +``` + +> 注意把上述命令中的路径替换为你实际项目的路径。如果 assets 目录不存在，则需要提前自己创建一个。 + +然后在 Android Studio 中正常生成 release 版本即可！ + +### 然后呢？ + +然后就可以开发啦~可是我完全不会 React Native 怎么办？ + +我们建议你先通读本站的所有文档，看看博客，看看论坛。如果觉得知识太零散，不够系统，那么你也可以考虑下购买我们的[付费咨询服务](/about#技术支持与商务合作)。 diff --git a/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-kotlin.md b/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-kotlin.md new file mode 100644 index 00000000000..6729913478e --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-kotlin.md @@ -0,0 +1,383 @@ +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + +## 核心概念 + +把 React Native 组件集成到 Android 应用中有如下几个主要步骤： + +1. 配置好 React Native 依赖和项目结构。 +2. 创建 js 文件，编写 React Native 组件的 js 代码。 +3. 在应用中添加一个`ReactRootView`。这个`ReactRootView`正是用来承载你的 React Native 组件的容器。 +4. 启动 React Native 的 Metro 服务，运行应用。 +5. 验证这部分组件是否正常工作。 + +## 开发环境准备 + +首先按照[开发环境搭建教程](environment-setup)来安装 React Native 在 Android 平台上所需的一切依赖软件。 + +### 1. 配置项目目录结构 + +首先创建一个空目录用于存放 React Native 项目，然后在其中创建一个`/android`子目录，把你现有的 Android 项目拷贝到`/android`子目录中。 + +### 2. 安装 JavaScript 依赖包 + +在项目根目录下创建一个名为`package.json`的空文本文件，然后填入以下内容： + +``` +{ + "name": "MyReactNativeApp", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "react-native start" + } +} +``` + +> 示例中的`version`字段没有太大意义（除非你要把你的项目发布到 npm 仓库）。`scripts`中是用于启动 Metro 服务的命令。 + +接下来我们使用 yarn 或 npm（两者都是 node 的包管理器）来安装 React 和 React Native 模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），然后运行下列命令来安装： + +```shell +$ yarn add react-native +``` + +这样默认会安装最新版本的 React Native，同时会打印出类似下面的警告信息（你可能需要滚动屏幕才能注意到）： + +> warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0". + +这是正常现象，意味着我们还需要安装指定版本的 React： + +``` +$ yarn add react@16.2.0 +``` + +注意必须严格匹配警告信息中所列出的版本，高了或者低了都不可以。 + +> 如果你使用多个第三方依赖，可能这些第三方各自要求的 react 版本有所冲突，此时应优先满足`react-native`所需要的`react`版本。其他第三方能用则用，不能用则只能考虑选择其他库。 + +所有 JavaScript 依赖模块都会被安装到项目根目录下的`node_modules/`目录中（这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。 + +把`node_modules/`目录记录到`.gitignore`文件中（即不上传到版本控制系统，只保留在本地）。 + +## 把 React Native 添加到你的应用中 + +### 配置 Gradle + +React Native 使用 React Native Gradle Plugin 来配置您的依赖项和项目设置。 + +首先，让我们通过添加以下行来编辑您的`settings.gradle`文件： + +```groovy +includeBuild('../node_modules/@react-native/gradle-plugin') +``` + +然后你需要打开顶层的 `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 ++ implementation "com.facebook.react:react-android" ++ implementation "com.facebook.react:hermes-android" +} +``` + +这些依赖项可在 `mavenCentral()` 上获得，因此请确保您已在 `repositories{}` 块中定义它。 + +:::info 提示 +我们故意不为这些`implementation`依赖项指定版本，因为 React Native Gradle Plugin 会自动处理它。如果您不使用 React Native Gradle Plugin，则必须手动指定版本。 +::: + +### 启用原生模块的自动链接 + +要使用[自动链接](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md)的功能，我们必须将其应用于几个地方。首先，将以下内容添加到`settings.gradle`: + +```gradle +apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) +``` + +接下来，在`app/build.gradle`的最底部添加以下内容: + +```gradle +apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) +``` + +### 配置权限 + +接着，在 `AndroidManifest.xml` 清单文件中声明网络权限: + +```xml + +``` + +如果需要访问 `DevSettingsActivity` 界面（即开发者菜单），则还需要在 `AndroidManifest.xml` 中声明: + +```xml + +``` + +开发者菜单一般仅用于在开发时从 Packager 服务器刷新 JavaScript 代码，所以在正式发布时你可以去掉这一权限。 + +### 允许明文传输（http 接口） (API level 28+) + +> 从 Android 9 (API level 28)开始，默认情况下明文传输（http 接口）是禁用的，只能访问 https 接口。这将阻止应用程序连接到[Metro bundler](https://facebook.github.io/metro)。下面的更改允许调试版本中的明文通信。 + +#### 1. 为 debug 版本启用 `usesCleartextTraffic`选项 + +在`src/debug/AndroidManifest.xml`中添加`usesCleartextTraffic`选项： + +```xml + + + + + +``` + +如果希望在正式打包后也能继续访问 http 接口，则需要在`src/main/AndroidManifest.xml`中也添加这一选项。 + +要了解有关网络安全配置和明文通信策略的更多信息，请参阅[此链接](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted)。 + +### 代码集成 + +现在我们将修改原生 Android 应用程序以集成 React Native。 + +#### React Native 组件 + +我们首先要写的是"High Score"（得分排行榜）的 JavaScript 端的代码。 + +##### 1. 创建一个`index.js`文件 + +首先在项目根目录中创建一个空的`index.js`文件。(注意一些老的教程可能提到，在 0.49 版本之前是 index.android.js 文件) + +`index.js`是 React Native 应用在 Android 上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行`require/import`导入语句。本教程中为了简单示范，把全部的代码都写到了`index.js`里（当然实际开发中我们并不推荐这样做）。 + +##### 2. 添加你自己的 React Native 代码 + +在`index.js`中添加你自己的组件。这里我们只是简单的添加一个``组件，然后用一个带有样式的``组件把它包起来。 + +```jsx +import React from 'react'; +import {AppRegistry, StyleSheet, Text, View} from 'react-native'; + +const HelloWorld = () => { + return ( + + Hello, World + + ); +}; +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + }, + hello: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, +}); + +AppRegistry.registerComponent( + 'MyReactNativeApp', + () => HelloWorld, +); +``` + +##### 3. 配置权限以便开发中的红屏错误能正确显示 + +如果你的应用会运行在 Android 6.0（API level 23）或更高版本，请确保你在开发版本中有打开`悬浮窗(overlay)`权限。你可以在代码中使用`Settings.canDrawOverlays(this);`来检查。之所以需要这一权限，是因为我们会把开发中的报错显示在悬浮窗中（仅在开发阶段需要）。在 Android 6.0（API level 23）中用户需要手动同意授权。具体请求授权的做法是在`onCreate()`中添加如下代码。其中`OVERLAY_PERMISSION_REQ_CODE`是用于回传授权结果的字段。 + +```kotlin +companion object { + const val OVERLAY_PERMISSION_REQ_CODE = 1 // 任写一个值 +} + +... + +if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { + if(!Settings.canDrawOverlays(this)) { + val intent = Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, + Uri.parse("package: $packageName")) + startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE); + } +} +``` + +最后，必须重写`onActivityResult()`方法（如下面的代码所示）来处理权限接受或拒绝情况以实现一致的用户体验。此外，为了集成使用 startActivityForResult 的原生模块，我们需要将结果传递给 ReactInstanceManager 实例的 onActivityResult 方法。 + +```kotlin +override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) { + if (requestCode == OVERLAY_PERMISSION_REQ_CODE) { + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { + if (!Settings.canDrawOverlays(this)) { + // SYSTEM_ALERT_WINDOW permission not granted + } + } + } + reactInstanceManager?.onActivityResult(this, requestCode, resultCode, data) +} +``` + +#### 核心组件：`ReactRootView` + +我们还需要添加一些原生代码来启动 React Native 的运行时环境并让它开始渲染。首先需要在一个`Activity`中创建一个`ReactRootView`对象，然后在这个对象之中启动 React Native 应用，并将它设为界面的主视图。 + +> 如果你要在安卓 5.0 以下的系统上运行，请用 `com.android.support:appcompat` 包中的 `AppCompatActivity` 代替 `Activity` 。 + +```kotlin +class MyReactActivity : Activity(), DefaultHardwareBackBtnHandler { + private lateinit var reactRootView: ReactRootView + private lateinit var reactInstanceManager: ReactInstanceManager + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + SoLoader.init(this, false) + reactRootView = ReactRootView(this) + val packages: List = PackageList(application).packages + // 有一些第三方可能不能自动链接，对于这些包我们可以用下面的方式手动添加进来： + // packages.add(MyReactNativePackage()) + // 同时需要手动把他们添加到`settings.gradle`和 `app/build.gradle`配置文件中。 + reactInstanceManager = ReactInstanceManager.builder() + .setApplication(application) + .setCurrentActivity(this) + .setBundleAssetName("index.android.bundle") + .setJSMainModulePath("index") + .addPackages(packages) + .setUseDeveloperSupport(BuildConfig.DEBUG) + .setInitialLifecycleState(LifecycleState.RESUMED) + .build() + // 注意这里的 MyReactNativeApp 必须对应"index.js"中的 + // "AppRegistry.registerComponent()"的第一个参数 + reactRootView?.startReactApplication(reactInstanceManager, "MyReactNativeApp", null) + setContentView(reactRootView) + } + + override fun invokeDefaultOnBackPressed() { + super.onBackPressed() + } +} +``` + +执行"Sync Project files with Gradle"操作。 + +如果你使用的是 Android Studio , 可以使用`Alt + Enter`快捷键来自动为 MyReactActivity 类补上缺失的 import 语句。注意`BuildConfig`应该是在你自己的包中自动生成，无需额外引入。千万不要从`com.facebook...`的包中引入！ + +我们需要把 `MyReactActivity` 的主题设定为 `Theme.AppCompat.Light.NoActionBar` ，因为里面有许多组件都使用了这一主题。 + +```xml + + +``` + +> 一个`ReactInstanceManager`可以在多个 activities 或 fragments 间共享。你将需要创建自己的`ReactFragment`或`ReactActivity`，并拥有一个保存`ReactInstanceManager`的单例持有者。当你需要`ReactInstanceManager`（例如，将`ReactInstanceManager`连接到这些 Activities 或 Fragments 的生命周期）时，请使用单例提供的那个。 + +下一步我们需要把一些 activity 的生命周期回调传递给`ReactInstanceManager`： + +```kotlin +override fun onPause() { + super.onPause() + reactInstanceManager.onHostPause(this) +} + +override fun onResume() { + super.onResume() + reactInstanceManager.onHostResume(this, this) +} + +override fun onDestroy() { + super.onDestroy() + reactInstanceManager.onHostDestroy(this) + reactRootView.unmountReactApplication() +} +``` + +我们还需要把后退按钮事件传递给 React Native： + +```kotlin +override fun onBackPressed() { + reactInstanceManager.onBackPressed() + super.onBackPressed() +} +``` + +这允许 JavaScript 控制用户按下设备后退按钮时发生的情况（例如，执行导航时）。当 JavaScript 不处理后退按钮按下的情况时，将调用`invokeDefaultOnBackPressed`方法。默认情况下，这将完成你的`Activity`。 + +最后，我们需要连接开发菜单。默认情况下通过（狂）摇晃设备来激活，但这在模拟器中不是很有用，只有当你按下设备菜单按钮时才显示（如果你使用的是 Android Studio 模拟器，请使用Ctrl + M）: + +```kotlin +override fun onKeyUp(keyCode: Int, event: KeyEvent?): Boolean { + if (keyCode == KeyEvent.KEYCODE_MENU && reactInstanceManager != null) { + reactInstanceManager.showDevOptionsDialog() + return true + } + return super.onKeyUp(keyCode, event) +} +``` + +现在 activity 已就绪，可以运行一些 JavaScript 代码了。 + +### 测试集成结果 + +你已经完成了将 React Native 与当前应用程序集成的所有基本步骤。现在我们将启动[Metro bundler](https://facebook.github.io/metro)来构建`index.bundle`包，并通过本地主机提供服务。 + +##### 1. 运行 Metro 服务 + +运行应用首先需要启动开发服务器（Metro）。你只需在项目根目录中执行以下命令即可： + +```shell +$ yarn start +``` + +##### 2. 运行你的应用 + +保持 Metro 的窗口运行不要关闭，然后像往常一样编译运行你的 Android 应用(在命令行中执行`./gradlew installDebug`或是在 Android Studio 中编译运行)。 + +编译执行一切顺利进行之后，在进入到 MyReactActivity 时应该就能立刻从 Metro 中读取 JavaScript 代码并执行和显示： + +![Screenshot](/docs/assets/EmbeddedAppAndroid.png) + +### 在 Android Studio 中打包 + +你也可以使用 Android Studio 来打 release 包！其步骤基本和原生应用一样，只是如果你**没有**使用 React Native Gradle Plugin 的话，则在每次编译打包之前需要先执行 js 文件的打包(即生成离线的 jsbundle 文件)。具体的 js 打包命令如下： + +```shell +# 注：如果你使用了 React Native Gradle Plugin，则其会自动执行以下命令，不需要手动执行 +$ npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/ +``` + +> 注意把上述命令中的路径替换为你实际项目的路径。如果 assets 目录不存在，则需要提前自己创建一个。 + +然后在 Android Studio 中正常生成 release 版本即可！ + +### 然后呢？ + +然后就可以开发啦~可是我完全不会 React Native 怎么办？ + +我们建议你先通读本站的所有文档，看看博客，看看论坛。如果觉得知识太零散，不够系统，那么你也可以考虑下购买我们的[付费咨询服务](/about#技术支持与商务合作)。 diff --git a/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-objc.md b/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-objc.md new file mode 100644 index 00000000000..5b00a805c62 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-objc.md @@ -0,0 +1,312 @@ +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + +## 核心概念 + +把 React Native 组件集成到 iOS 应用中有如下几个主要步骤： + +1. 配置好 React Native 依赖和项目结构。 +2. 了解你要集成的 React Native 组件。 +3. 使用 CocoaPods 把这些组件以依赖的形式加入到项目中。 +4. 创建 js 文件，编写 React Native 组件的 js 代码。 +5. 在应用中添加一个`RCTRootView`。这个`RCTRootView`正是用来承载你的 React Native 组件的容器。 +6. 启动 React Native 的 Packager 服务，运行应用。 +7. 验证这部分组件是否正常工作。 + +## 开发环境准备 + +首先按照[开发环境搭建教程](environment-setup)来安装 React Native 在 iOS 平台上所需的一切依赖软件。 + +### 1. 配置项目目录结构 + +首先创建一个空目录用于存放 React Native 项目，然后在其中创建一个`/ios`子目录，把你现有的 iOS 项目拷贝到`/ios`子目录中。 + +### 2. 安装 JavaScript 依赖包 + +在项目根目录下创建一个名为`package.json`的空文本文件，然后填入以下内容： + +``` +{ + "name": "MyReactNativeApp", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "yarn react-native start" + } +} +``` + +> 示例中的`version`字段没有太大意义（除非你要把你的项目发布到 npm 仓库）。`scripts`中是用于启动 Metro 服务的命令。 + +接下来我们使用 yarn 或 npm（两者都是 node 的包管理器）来安装 React 和 React Native 模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），然后运行下列命令来安装： + +```shell +$ yarn add react-native +``` + +这样默认会安装最新版本的 React Native，同时会打印出类似下面的警告信息（你可能需要滚动屏幕才能注意到）： + +> warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0". + +这是正常现象，意味着我们还需要安装指定版本的 React： + +``` +$ yarn add react@16.2.0 +``` + +注意必须严格匹配警告信息中所列出的版本，高了或者低了都不可以。 + +> 如果你使用多个第三方依赖，可能这些第三方各自要求的 react 版本有所冲突，此时应优先满足`react-native`所需要的`react`版本。其他第三方能用则用，不能用则只能考虑选择其他库。 + +所有 JavaScript 依赖模块都会被安装到项目根目录下的`node_modules/`目录中（这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。 + +把`node_modules/`目录记录到`.gitignore`文件中（即不上传到版本控制系统，只保留在本地）。 + +### 3. 安装 CocoaPods + +[CocoaPods](http://cocoapods.org)是针对 iOS 和 macOS 开发的包管理工具。我们用它来把 React Native 框架的代码下载下来并添加到你当前的项目中。 + +我们建议使用[Homebrew](http://brew.sh/)来安装 CocoaPods。 + +``` +$ brew install cocoapods +``` + +## 把 React Native 添加到你的应用中 + +在本教程中我们用于[示范的 app](https://github.com/austinzheng/iOS-2048)是一个[2048](https://en.wikipedia.org/wiki/2048_%28video_game%29)类型的游戏。下面是这个游戏还没有集成 React Native 时的主界面： +![Before RN Integration](/docs/assets/react-native-existing-app-integration-ios-before.png) + +### Xcode 命令行工具 + +安装 Xcode 命令行工具。在 Xcode 菜单中选择**Settings... (或者是 Preferences...)**，进入 Locations 面板并通过在 Command Line Tools 下拉菜单中选择最新版本来安装工具。 + +![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png) + +### 配置 CocoaPods 的依赖 + +> 提示，此部分说明可能落后于最新版本。建议使用`npx react-native init NewProject`创建一个最新版本的纯 RN 项目，去参考其 Podfile 的配置。 + +React Native 框架整体是作为 node 模块安装到项目中的。下一步我们需要在 CocoaPods 的`Podfile`中指定我们所需要使用的"subspecs"。 + +可用的`subspec`都列在[`node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec)中，基本都是按其功能命名的。一般来说你首先需要添加`Core`，这一`subspec`包含了必须的`AppRegistry`、`StyleSheet`、`View`以及其他的一些 React Native 核心库。如果你想使用 React Native 的`Text`库（即``组件），那就需要添加`RCTText`的`subspec`。同理，`Image`需要加入`RCTImage`，等等。 + +我们需要在`Podfile`文件中指定所需的`subspec`。创建`Podfile`的最简单的方式就是在`/ios`子目录中使用 CocoaPods 的`init`命令： + +``` +$ pod init +``` + +`Podfile`会创建在执行命令的目录中。你需要调整其内容以满足你的集成需求。调整后的`Podfile`的内容看起来类似下面这个模板文件（也可以用`npx react-native init 项目名`命令创建一个纯 RN 项目，然后去参考其 ios 目录中的 Podfile 文件）： +[Podfile 示范模板](https://github.com/facebook/react-native/blob/main/packages/react-native/template/ios/Podfile) + +创建好了`Podfile`后，就可以开始安装 React Native 的 pod 包了。 + +```shell +$ pod install +``` + +然后你应该可以看到类似下面的输出(译注：同样由于众所周知的网络原因，pod install 的过程在国内非常不顺利，请自行配备稳定的代理软件。) + +``` +Analyzing dependencies +Fetching podspec for `React` from `../node_modules/react-native` +Downloading dependencies +Installing React (0.62.0) +Generating Pods project +Integrating client project +Sending stats +Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed. +``` + +> 如果出现提到 `xcrun` 的错误，请确保在 Xcode 中的 **Preferences > Locations** 中分配了命令行工具。 + +### 代码集成 + +现在我们已经准备好了所有依赖，可以开始着手修改原生代码来把 React Native 真正集成到应用中了。在我们的 2048 示例中，首先尝试添加一个显示有"High Score"（得分排行榜）的 React Native 页面。 + +#### React Native 组件 + +我们首先要写的是"High Score"（得分排行榜）的 JavaScript 端的代码。 + +##### 1. 创建一个 `index.js` 文件 + +首先在项目根目录下创建一个空的`index.js`文件。 + +`index.js`是 React Native 应用在 iOS 上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行`require/import`导入语句。本教程中为了简单示范，把全部的代码都写到了`index.js`里（当然实际开发中我们并不推荐这样做）。 + +##### 2. 添加你自己的 React Native 代码 + +在`index.js`中添加你自己的组件。这里我们只是简单的添加一个``组件，然后用一个带有样式的``组件把它包起来。 + +```jsx +import React from 'react'; +import {AppRegistry, StyleSheet, Text, View} from 'react-native'; + +const RNHighScores = ({scores}) => { + const contents = scores.map(score => ( + + {score.name}:{score.value} + {'\n'} + + )); + return ( + + + 2048 High Scores! + + {contents} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#FFFFFF', + }, + highScoresTitle: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + scores: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, +}); + +// 模块名称 +AppRegistry.registerComponent('RNHighScores', () => RNHighScores); +``` + +> `RNHighScores`是整体 js 模块（即你所有的 js 代码）的名称。你在 iOS 原生代码中添加 React Native 视图时会用到这个名称。 + +#### 核心组件：`RCTRootView` + +现在我们已经在`index.js`中创建了 React Native 组件，下一步就是把这个组件添加给一个新的或已有的`ViewController`。最简单的方法是可选地为您的组件创建一个事件路径，然后将该组件添加到现有的“ViewController”中。 + +我们将把 React Native 组件与名为“RCTRootView”的新原生视图绑定在一起，该视图实际上包含它。 + +##### 1. 创建一个事件路径 + +你可以在主游戏菜单上添加一个新链接，以便前往 "High Score" 的 React Native 页面。 + +![Event Path](/docs/assets/react-native-add-react-native-integration-link.png) + +##### 2. 事件处理 + +现在我们将从菜单链接中添加一个事件处理程序。一个方法将被添加到你的应用程序的主`ViewController`中。这就是`RCTRootView`发挥作用的地方。 + +当你构建一个 React Native 应用时，需要使用 Metro（以前叫做 react packager）来创建一个`index.bundle`。`index.bundle`里面包含了我们的`RNHighScore`模块。因此，我们需要将`RCTRootView`指向`index.bundle`资源的位置（通过`NSURL`），并将其与模块绑定。 + +为了便于调试，我们将在事件处理程序被调用时输出日志。然后创建一个 URL 字符串，指向`index.bundle`的位置。最后，我们将创建主`RCTRootView`。请注意我们需要把[上面](#the-react-native-component)创建的`moduleName`填进去，也就是`RNHighScores`。 + +首先导入`RCTRootView`的头文件。 + +```objectivec +#import +``` + +> 这里的`initialProperties`注入了一些演示用的数据。在 React Native 的根组件中，我们可以使用`this.props`来获取到这些数据。 + +```objectivec +- (IBAction)highScoreButtonPressed:(id)sender { + NSLog(@"High Score Button Pressed"); + NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"]; + + RCTRootView *rootView = + [[RCTRootView alloc] initWithBundleURL: jsCodeLocation + moduleName: @"RNHighScores" + initialProperties: + @{ + @"scores" : @[ + @{ + @"name" : @"Alex", + @"value": @"42" + }, + @{ + @"name" : @"Joel", + @"value": @"10" + } + ] + } + launchOptions: nil]; + UIViewController *vc = [[UIViewController alloc] init]; + vc.view = rootView; + [self presentViewController:vc animated:YES completion:nil]; +} +``` + +> 请注意，`RCTRootView initWithBundleURL` 会启动一个新的 JSC VM。为了节省资源并简化原生应用程序中不同部分的 RN 视图之间的通信，您可以拥有多个由 React Native 提供支持且与单个 JS 运行时相关联的视图。要实现这一点，请使用 [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h#L94) 创建桥接器，然后使用 `RCTRootView initWithBridge`。 + +> 在将应用程序移至生产环境时，`NSURL` 可以通过类似于 `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];` 的方式指向磁盘上预打包文件。您可以在 `node_modules/react-native/scripts/` 中使用 `react-native-xcode.sh` 脚本生成该预打包文件。 + +##### 3. 连接起来 + +将主菜单中的新链接与新增的事件处理程序方法连接起来。 + +![Event Path](/docs/assets/react-native-add-react-native-integration-wire-up.png) + +> 其中一种更简单的方法是在 Storyboard 中打开视图，右键单击新链接。选择诸如“Touch Up Inside”事件之类的内容，将其拖到 Storyboard 上，然后从提供的列表中选择所创建的方法。 + +### 测试集成结果 + +您现在已经完成了将 React Native 与当前应用程序集成的所有基本步骤。现在我们将启动[Metro bundler][metro]来构建`index.bundle`包，并运行服务器以在`localhost`上提供服务。 + +##### 1. 添加 App Transport Security 例外 + +Apple 现在默认会阻止读取不安全的 HTTP 链接。所以我们需要把本地运行的 Metro 服务添加到`Info.plist`的例外中，以便能正常访问 Metro 服务： + +```xml +NSAppTransportSecurity + + NSExceptionDomains + + localhost + + NSTemporaryExceptionAllowsInsecureHTTPLoads + + + + +``` + +> App Transport Security 对于用户来说是有利的。所以最好记得在发布之前重新启用这些安全限制。 + +##### 2. 运行 Metro + +要运行应用，首先需要启动开发服务器（即 Metro，它负责实时监测 js 文件的变动并实时打包，输出给客户端运行）。具体只需简单进入到项目根目录中，然后运行： + +```shell +yarn start +``` + +##### 3. 运行应用 + +如果你使用的是 Xcode，那么照常编译和运行应用即可。如果你没有使用 Xcode（但是你仍然必须安装 Xcode），则可以在命令行中使用以下命令来运行应用： + +```sh +# 在项目的根目录中执行： +$ npx react-native run-ios +``` + +在我们的示例应用程序中，您应该会看到"High Scores"链接，然后当您单击它时，将会看到 React Native 组件的呈现。 + +这是应用*原生*部分的主页面： + +![Home Screen](/docs/assets/react-native-add-react-native-integration-example-home-screen.png) + +这是应用*React Native*部分的 high score 页面: + +![High Scores](/docs/assets/react-native-add-react-native-integration-example-high-scores.png) + +> 如果在运行应用时遇到模块解析问题，请参阅[此 GitHub 问题](https://github.com/facebook/react-native/issues/4968)以获取信息和可能的解决方案。 [这个评论](https://github.com/facebook/react-native/issues/4968#issuecomment-220941717)似乎是最新的可能解决方案。 + +### 然后呢？ + +然后就可以开发啦~可是我完全不会 React Native 怎么办？ + +我们建议你先通读本站的所有文档，看看博客，看看论坛。如果觉得知识太零散，不够系统，那么你也可以考虑下购买我们的[付费咨询服务](/about#技术支持与商务合作)。 diff --git a/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-swift.md b/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-swift.md new file mode 100644 index 00000000000..f5c74f72acd --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_integration-with-existing-apps-swift.md @@ -0,0 +1,310 @@ +## 核心概念 + +把 React Native 组件集成到 iOS 应用中有如下几个主要步骤： + +1. 配置好 React Native 依赖和项目结构。 +2. 了解你要集成的 React Native 组件。 +3. 使用 CocoaPods 把这些组件以依赖的形式加入到项目中。 +4. 创建 js 文件，编写 React Native 组件的 js 代码。 +5. 在应用中添加一个`RCTRootView`。这个`RCTRootView`正是用来承载你的 React Native 组件的容器。 +6. 启动 React Native 的 Packager 服务，运行应用。 +7. 验证这部分组件是否正常工作。 + +## 开发环境准备 + +首先按照[开发环境搭建教程](environment-setup)来安装 React Native 在 iOS 平台上所需的一切依赖软件。 + +### 1. 配置项目目录结构 + +首先创建一个空目录用于存放 React Native 项目，然后在其中创建一个`/ios`子目录，把你现有的 iOS 项目拷贝到`/ios`子目录中。 + +### 2. 安装 JavaScript 依赖包 + +在项目根目录下创建一个名为`package.json`的空文本文件，然后填入以下内容： + +``` +{ + "name": "MyReactNativeApp", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "yarn react-native start" + } +} +``` + +> 示例中的`version`字段没有太大意义（除非你要把你的项目发布到 npm 仓库）。`scripts`中是用于启动 Metro 服务的命令。 + +接下来我们使用 yarn 或 npm（两者都是 node 的包管理器）来安装 React 和 React Native 模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），然后运行下列命令来安装： + +```shell +$ yarn add react-native +``` + +这样默认会安装最新版本的 React Native，同时会打印出类似下面的警告信息（你可能需要滚动屏幕才能注意到）： + +> warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0". + +这是正常现象，意味着我们还需要安装指定版本的 React： + +```shell +$ yarn add react@16.2.0 +``` + +注意必须严格匹配警告信息中所列出的版本，高了或者低了都不可以。 + +> 如果你使用多个第三方依赖，可能这些第三方各自要求的 react 版本有所冲突，此时应优先满足`react-native`所需要的`react`版本。其他第三方能用则用，不能用则只能考虑选择其他库。 + +所有 JavaScript 依赖模块都会被安装到项目根目录下的`node_modules/`目录中（这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。 + +把`node_modules/`目录记录到`.gitignore`文件中（即不上传到版本控制系统，只保留在本地）。 + +### 3. 安装 CocoaPods + +[CocoaPods](http://cocoapods.org)是针对 iOS 和 Mac 开发的包管理工具。我们用它来把 React Native 框架的代码下载下来并添加到你当前的项目中。 + +我们建议使用[Homebrew](http://brew.sh/)来安装 CocoaPods。 + +```shell +$ brew install cocoapods +``` + +## 把 React Native 添加到你的应用中 + +在本教程中我们用于[示范的 app](https://github.com/austinzheng/swift-2048)是一个[2048](https://en.wikipedia.org/wiki/2048_%28video_game%29)类型的游戏。下面是这个游戏还没有集成 React Native 时的主界面： + +![Before RN Integration](/docs/assets/react-native-existing-app-integration-ios-before.png) + +### Xcode 命令行工具 + +安装 Xcode 命令行工具。在 Xcode 菜单中选择**Settings... (或者是 Preferences...)**，进入 Locations 面板并通过在 Command Line Tools 下拉菜单中选择最新版本来安装工具。 + +![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png) + +### 配置 CocoaPods 的依赖 + +> 提示，此部分说明可能落后于最新版本。建议使用`npx react-native init NewProject`创建一个最新版本的纯 RN 项目，去参考其 Podfile 的配置。 + +React Native 框架整体是作为 node 模块安装到项目中的。下一步我们需要在 CocoaPods 的`Podfile`中指定我们所需要使用的"subspecs"。 + +可用的`subspec`都列在[`node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec)中，基本都是按其功能命名的。一般来说你首先需要添加`Core`，这一`subspec`包含了必须的`AppRegistry`、`StyleSheet`、`View`以及其他的一些 React Native 核心库。如果你想使用 React Native 的`Text`库（即``组件），那就需要添加`RCTText`的`subspec`。同理，`Image`需要加入`RCTImage`，等等。 + +我们需要在`Podfile`文件中指定所需的`subspec`。创建`Podfile`的最简单的方式就是在`/ios`子目录中使用 CocoaPods 的`init`命令： + +```shell +$ pod init +``` + +`Podfile`会创建在执行命令的目录中。你需要调整其内容以满足你的集成需求。调整后的`Podfile`的内容看起来类似下面这个模板文件（也可以用`npx react-native init 项目名`命令创建一个纯 RN 项目，然后去参考其 ios 目录中的 Podfile 文件）： +[Podfile 示范模板](https://github.com/facebook/react-native/blob/main/packages/react-native/template/ios/Podfile) + +创建好了`Podfile`后，就可以开始安装 React Native 的 pod 包了。 + +```shell +$ pod install +``` + +然后你应该可以看到类似下面的输出(译注：同样由于众所周知的网络原因，pod install 的过程在国内非常不顺利，请自行配备稳定的代理软件。) + +``` +Analyzing dependencies +Fetching podspec for `React` from `../node_modules/react-native` +Downloading dependencies +Installing React (0.62.0) +Generating Pods project +Integrating client project +Sending stats +Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed. +``` + +> 如果出现提到 `xcrun` 的错误，请确保在 Xcode 中的 **Preferences > Locations** 中分配了命令行工具。 + +> 如果你看到类似"_The `swift-2048 [Debug]` target overrides the `FRAMEWORK_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig`. This can lead to problems with the CocoaPods installation_"的警告，请查看 Xcode 的`Build Settings`中的`Framework Search Paths`选项，确保其中的`Debug`和`Release`都只包含`$(inherited)`。 + +### 代码集成 + +现在我们已经准备好了所有依赖，可以开始着手修改原生代码来把 React Native 真正集成到应用中了。在我们的 2048 示例中，首先尝试添加一个显示有"High Score"（得分排行榜）的 React Native 页面。 + +#### React Native 组件 + +我们首先要写的是"High Score"（得分排行榜）的 JavaScript 端的代码。 + +##### 1. 创建一个`index.js`文件 + +首先在项目根目录下创建一个空的`index.js`文件。 + +`index.js`是 React Native 应用在 iOS 上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行`require/import`导入语句。本教程中为了简单示范，把全部的代码都写到了`index.js`里（当然实际开发中我们并不推荐这样做）。 + +##### 2. 添加你自己的 React Native 代码 + +在`index.js`中添加你自己的组件。这里我们只是简单的添加一个``组件，然后用一个带有样式的``组件把它包起来。 + +```jsx +import React from 'react'; +import {AppRegistry, StyleSheet, Text, View} from 'react-native'; + +class RNHighScores extends React.Component { + render() { + var contents = this.props['scores'].map(score => ( + + {score.name}:{score.value} + {'\n'} + + )); + return ( + + + 2048 High Scores! + + {contents} + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#FFFFFF', + }, + highScoresTitle: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + scores: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, +}); + +// 整体js模块的名称 +AppRegistry.registerComponent('RNHighScores', () => RNHighScores); +``` + +> `RNHighScores`是整体 js 模块（即你所有的 js 代码）的名称。你在 iOS 原生代码中添加 React Native 视图时会用到这个名称。 + +#### 核心组件：`RCTRootView` + +现在我们已经在`index.js`中创建了 React Native 组件，下一步就是把这个组件添加给一个新的或已有的`ViewController`。最简单的方法是可选地为您的组件创建一个事件路径，然后将该组件添加到现有的“ViewController”中。 + +我们将把 React Native 组件与名为“RCTRootView”的新原生视图绑定在一起，该视图实际上包含它。 + +##### 1. 创建一个事件路径 + +你可以在主游戏菜单上添加一个新链接，以便前往 "High Score" 的 React Native 页面。 + +![Event Path](/docs/assets/react-native-add-react-native-integration-link.png) + +##### 2. 事件处理 + +现在我们将从菜单链接中添加一个事件处理程序。一个方法将被添加到你的应用程序的主`ViewController`中。这就是`RCTRootView`发挥作用的地方。 + +当你构建一个 React Native 应用时，需要使用 Metro（以前叫做 react packager）来创建一个`index.bundle`。`index.bundle`里面包含了我们的`RNHighScore`模块。因此，我们需要将`RCTRootView`指向`index.bundle`资源的位置（通过`NSURL`），并将其与模块绑定。 + +为了便于调试，我们将在事件处理程序被调用时输出日志。然后创建一个 URL 字符串，指向`index.bundle`的位置。最后，我们将创建主`RCTRootView`。请注意我们需要把[上面](#the-react-native-component)创建的`moduleName`填进去，也就是`RNHighScores`。 + +首先`import`导入`React`库。 + +```swift +import React +``` + +> 这里的`initialProperties`注入了一些演示用的数据。在 React Native 的根组件中，我们可以使用`this.props`来获取到这些数据。 + +```swift +@IBAction func highScoreButtonTapped(sender : UIButton) { + NSLog("Hello") + let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios") + let mockData:NSDictionary = ["scores": + [ + ["name":"Alex", "value":"42"], + ["name":"Joel", "value":"10"] + ] + ] + + let rootView = RCTRootView( + bundleURL: jsCodeLocation, + moduleName: "RNHighScores", + initialProperties: mockData as [NSObject : AnyObject], + launchOptions: nil + ) + let vc = UIViewController() + vc.view = rootView + self.present(vc, animated: true, completion: nil) +} +``` + +> 请注意，`RCTRootView bundleURL`会启动一个新的 JSC VM。为了节省资源并简化原生应用程序中不同部分的 RN 视图之间的通信，您可以拥有由 React Native 驱动的多个视图与单个 JS 运行时相关联。要做到这一点，而不是使用 `RCTRootView bundleURL`，请使用 [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L89) 创建桥接器，然后使用 `RCTRootView initWithBridge`。 + +> 将应用程序移至生产环境时，NSURL 可以通过类似于 `let mainBundle = NSBundle(URLForResource: "main" withExtension:"jsbundle")` 的方式指向磁盘上预打包文件。 您可以在 `node_modules/react-native/scripts/` 中使用 `react-native-xcode.sh` 脚本生成该预打包文件。 + +##### 3. 连接起来 + +将主菜单中的新链接与新增的事件处理程序方法连接起来。 + +![Event Path](/docs/assets/react-native-add-react-native-integration-wire-up.png) + +> 其中一种更简单的方法是在 Storyboard 中打开视图，右键单击新链接。选择诸如“Touch Up Inside”事件之类的内容，将其拖到 Storyboard 上，然后从提供的列表中选择所创建的方法。 + +### 测试集成结果 + +您现在已经完成了将 React Native 与当前应用程序集成的所有基本步骤。现在我们将启动[Metro bundler][metro]来构建`index.bundle`包，并运行服务器以在`localhost`上提供服务。 + +##### 1. 添加 App Transport Security 例外 + +Apple 现在默认会阻止读取不安全的 HTTP 链接。所以我们需要把本地运行的 Packager 服务添加到`Info.plist`的例外中，以便能正常访问 Packager 服务： + +```xml +NSAppTransportSecurity + + NSExceptionDomains + + localhost + + NSTemporaryExceptionAllowsInsecureHTTPLoads + + + + +``` + +> App Transport Security 对于用户来说是有利的。所以最好记得在发布之前重新启用这些安全限制。 + +##### 2. 运行 Metro + +要运行应用，首先需要启动开发服务器（即 Metro，它负责实时监测 js 文件的变动并实时打包，输出给客户端运行）。具体只需简单进入到项目根目录中，然后运行： + +```shell +$ npm start +``` + +##### 3. 运行应用 + +如果你使用的是 Xcode，那么照常编译和运行应用即可。如果你没有使用 Xcode（但是你仍然必须安装 Xcode），则可以在命令行中使用以下命令来运行应用： + +```sh +# 在项目的根目录中执行： +$ npx react-native run-ios +``` + +在我们的示例应用程序中，您应该会看到"High Scores"链接，然后当您单击它时，将会看到 React Native 组件的呈现。 + +这是应用*原生*部分的主页面： + +![Home Screen](/docs/assets/react-native-add-react-native-integration-example-home-screen.png) + +这是应用*React Native*部分的 high score 页面: + +![High Scores](/docs/assets/react-native-add-react-native-integration-example-high-scores.png) + +> 如果在运行应用时遇到模块解析问题，请参阅[此 GitHub 问题](https://github.com/facebook/react-native/issues/4968)以获取信息和可能的解决方案。 [这个评论](https://github.com/facebook/react-native/issues/4968#issuecomment-220941717)似乎是最新的可能解决方案。 + +### 然后呢？ + +然后就可以开发啦~可是我完全不会 React Native 怎么办？ + +我们建议你先通读本站的所有文档，看看博客，看看论坛。如果觉得知识太零散，不够系统，那么你也可以考虑下购买我们的[付费咨询服务](/about#技术支持与商务合作)。 diff --git a/cnwebsite/versioned_docs/version-0.75/_markdown-m1-cocoapods.mdx b/cnwebsite/versioned_docs/version-0.75/_markdown-m1-cocoapods.mdx new file mode 100644 index 00000000000..270229b7fdc --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_markdown-m1-cocoapods.mdx @@ -0,0 +1,11 @@ +
+ Mac M1 的注意事项 + +Cocoapods 目前在 Mac M1 架构上可能还有一些兼容问题（我们建议使用`brew install cocoapods`来安装 Cocoapods）。如果你在安装 pods 依赖时出现问题，可以尝试运行下面的命令： + +- `sudo arch -x86_64 gem install ffi` +- `arch -x86_64 pod install` + +以上命令会安装`ffi`包，用于在安装和装载 pods 时调用合适的系统架构。 + +
diff --git a/cnwebsite/versioned_docs/version-0.75/_markdown-new-architecture-warning.mdx b/cnwebsite/versioned_docs/version-0.75/_markdown-new-architecture-warning.mdx new file mode 100644 index 00000000000..842504b5055 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_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.75/_remove-global-cli.md b/cnwebsite/versioned_docs/version-0.75/_remove-global-cli.md new file mode 100644 index 00000000000..5131d87328c --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/_remove-global-cli.md @@ -0,0 +1,5 @@ +> 如果你之前全局安装过旧的`react-native-cli`命令行工具，请使用`npm uninstall -g react-native-cli`卸载掉它以避免一些冲突： +> +> ```shell +> npm uninstall -g react-native-cli @react-native-community/cli +> ``` diff --git a/cnwebsite/versioned_docs/version-0.75/accessibility.md b/cnwebsite/versioned_docs/version-0.75/accessibility.md new file mode 100644 index 00000000000..f64a0d14ef9 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/accessibility.md @@ -0,0 +1,354 @@ +--- +id: accessibility +title: 无障碍功能 +--- + +**译注**：accessibility 一词常见多种译法：可访问性、无障碍性、辅助功能等等，其中文意思都不太能准确表达其功能的本质——即为残障人士提供便利。本文主要采用“无障碍功能”和“辅助技术/服务”的说法。如果你或你的公司暂时没有资源和精力去服务这些用户，那么你可以跳过本文。但是，`译者个人希望借本文档，呼吁有能力有资源的商业公司/组织/个人，重视残障人士使用智能手机的权利`。 + +iOS 和 Android 都提供了便于残障人士无障碍使用 App 的 API。此外，两个平台都提供了整套的辅助技术，比如都有针对视力受损人士的读屏软件（iOS 的 VoiceOver 和 Android 的 TalkBack）。同样地，在 React Native 中我们也封装了对应的 API，使开发者能够在 App 中集成无障碍功能。 + +> 注意：iOS 与 Android 在具体方法上会有所区别，因此 React Native 的实现也会因平台而异。 + +## 无障碍功能属性 + +### `accessible` + +设置为`true`时表示当前视图是一个“无障碍元素”（accessibility element）。无障碍元素会将其所有子组件视为一整个可以选中的组件。默认情况下，所有可点击的组件（Touchable 系列组件）都是无障碍元素。 + +在 Android 上，React Native 视图的`accessible={true}`属性会被转译为原生视图对应的`focusable={true}`属性。 + +```jsx + + text one + text two + +``` + +在上面这个例子中，当父视图开启无障碍属性后，我们就无法单独选中'text one'和'text two'，而只能选中整个父视图。 + +### `accessibilityLabel` + +当一个视图启用无障碍属性后，最好再加上一个 accessibilityLabel（无障碍标签），这样可以让使用 VoiceOver 的人们清楚地知道自己选中了什么。VoiceOver 会读出选中元素的无障碍标签。 + +设定`accessibilityLabel`属性并赋予一个字符串内容即可在 View、Text 或是 Touchable 中启用无障碍标签： + +```jsx + + + Press me! + + +``` + +在上面这段示例代码中，如果不在 TouchableOpacity 上设置无障碍标签，那么其默认值就会是"Press me!"（即 Text 子组件的文本值）。此时无障碍标签是通过自动取所有 Text 子节点的值，然后用空格连起来生成。 + +### `accessibilityLabelledBy`
Android
+ +引用另一个元素[nativeID](view.md#nativeid)来构建复杂的表单。 +`accessibilityLabelledBy`的值应该与相关元素的`nativeID`匹配： + +```jsx + + 用于输入字段标签的编辑框 + + +``` + +在上面的例子中，当焦点位于 TextInput 上时，屏幕阅读器会提示`输入，用于输入字段标签的编辑框`。 + +### `accessibilityHint` + +无障碍提示用于帮助用户理解操作可能导致什么后果，尤其是当这些后果并不能从无障碍标签中清楚地了解时。 + +要启用无障碍提示只需在需要设置的元素上设置`accessibilityHint`属性，并赋予用于解释的文本： + +```jsx + + + 返回 + + +``` + +在上面这个例子里，iOS 的 VoiceOver 会在标签后读取提示，如果用户在设备的VoiceOver设置中启用了提示。有关accessibilityHint指南的更多信息，请阅读[iOS开发者文档](https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint)。 + +在上面这个例子里，Android 的 Talkback将在标签后读取提示。目前，Android 上无法关闭提示。 + +### `accessibilityLanguage`
iOS
+ +通过使用 `accessibilityLanguage` 属性，屏幕阅读器将了解在阅读元素的 **标签**、**值** 和 **提示** 时要使用哪种语言。提供的字符串值必须遵循 [BCP 47 规范](https://www.rfc-editor.org/info/bcp47)。 + +```tsx + + 🍕 + +``` + +### `accessibilityIgnoresInvertColors`
iOS
+ +反转屏幕颜色是一项辅助功能，它使得 iPhone 和 iPad 对于某些对亮度敏感的人更加舒适，对于某些色盲患者更容易区分，对于视力低下的人来说更容易识别。然而，有时您会查看照片等视图，并不希望其被反转。在这种情况下，您可以将此属性设置为 false，以便这些特定视图不会反转其颜色。 + +### `accessibilityLiveRegion`
Android
+ +组件发生动态变化时，我们希望 TalkBack 能够提醒用户。这一行为可以通过设置`accessibilityLiveRegion`属性来实现。具体值可以设置为`none`，`polite`以及`assertive`： + +- **none** 辅助服务不应该提醒用户当前视图的变化。 +- **polite** 辅助服务应该提醒用户当前视图的变化。 +- **assertive** 辅助服务应该立即打断当前的语音会话，提醒用户当前视图的变化。 + +```jsx + + + Click me + + + + Clicked {this.state.count} times + +``` + +上面这个例子中，\_addOne 方法会改变 state.count 这个变量。那么只要用户点击了 TouchableWithoutFeedback，TalkBack 就会读出 Text 组件中的值，因为它设置了`accessibilityLiveRegion="polite"`属性。 + +### `accessibilityRole` + +`accessibilityRole` 通知辅助技术用户组件的用途。 + +`accessibilityRole` 可以是以下之一： + +- **adjustable** 元素具有可调整的特性（比如一个滑块）。 +- **alert** 当元素包含重要文本以供用户查看时使用。 +- **button** 具有按钮特性。 +- **checkbox** 当元素表示可选中、未选中或混合选中状态的复选框时使用。 +- **combobox** 当元素表示组合框，允许用户在多个选项中进行选择时使用。 +- **header** 作为内容区域的头部（比如导航栏的标题）。 +- **image** 具有图片特性。可以与按钮或链接等一起使用。 +- **imagebutton** 当元素应被视为按钮并且还是图像时使用。 +- **keyboardkey** 元素作为虚拟键盘的一个按键使用。 +- **link** 具有链接特性。 +- **menu** 当组件是一组选择菜单时使用。 +- **menubar** 当组件是多个菜单的容器时使用。 +- **menuitem** 用于表示菜单中的一个项目。 +- **none** 无特性元素。 +- **progressbar** 用于表示任务进度的组件。 +- **radio** 用于表示单选按钮。 +- **radiogroup** 用于表示一组单选按钮。 +- **scrollbar** 用于表示滚动条。 +- **search** 用作搜索框的文本框。 +- **spinbutton** 用于表示打开选项列表的按钮。 +- **summary** 在 App 冷启动（指完全退出后台后再进入）时提供当前的简要总结信息的元素。比如当天气应用冷启动时，显示当前天气情况的元素就会被标记为**summary**。 +- **switch** 用于表示可切换开关。 +- **tab** 用于表示选项卡。 +- **tablist** 用于表示选项卡列表。 +- **text** 具有不可编辑文本的特性。 +- **timer** 用于表示计时器。 +- **togglebutton** 用于表示切换按钮。应与辅助状态 accessibilityState checked 一起使用，指示按钮是否处于打开或关闭状态。 +- **toolbar** 用于表示工具栏（操作按钮或组件的容器）。 + +### 无障碍状态 `accessibilityState` + +向辅助技术的用户描述组件的当前状态。 + +`accessibilityState` 是一个对象。它包含以下字段： + +| 名称 | 描述 | 类型 | 必需 | +| -------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ---- | +| disabled | 指示元素是否已禁用 | boolean | 否 | +| selected | 指示可选择元素当前是否已选中。 | boolean | 否 | +| checked | 指示可检查元素的状态。此字段可以采用布尔值或 "mixed" 字符串表示混合选择框。 | boolean or 'mixed' | 否 | +| busy | 指示元素当前是否忙碌。 | boolean | 否 | +| expanded | 指示可展开元素当前是否已展开或折叠。 | boolean | 否 | + +要使用，请将 `accessibilityState` 设置为具有特定定义的对象。 + +### 无障碍值 `accessibilityValue` + +表示组件的当前值。它可以是组件值的文本描述，或者对于基于范围的组件，如滑块和进度条，它包含范围信息（最小值、当前值和最大值）。 + +`accessibilityValue` 是一个对象。它包含以下字段： + +| 名称 | 描述 | 类型 | 必需 | +| ---- | ---------------------------------------------------------------------------------------------- | ------- | ------------------------- | +| min | 该组件范围的最小值。 | integer | Required if `now` is set. | +| max | 该组件范围的最大值。 | integer | Required if `now` is set. | +| now | 该组件范围的当前值。 | integer | 否 | +| text | 该组件值的文本描述。如果设置，将覆盖 `min`、`now` 和 `max`。 | string | 否 | + +### `accessibilityViewIsModal`
iOS
+ +一个布尔值，指示VoiceOver是否应忽略接收者的同级视图中的元素。 + +例如，在包含同级视图`A`和`B`的窗口中，在视图`B`上将`accessibilityViewIsModal`设置为`true`会导致VoiceOver忽略视图`A`中的元素。另一方面，如果视图`B`包含子视图`C`，并且在视图`C`上将`accessibilityViewIsModal`设置为`true`，VoiceOver不会忽略视图`A`中的元素。 + +### `accessibilityElementsHidden`
iOS
+ +一个布尔值，指示此辅助功能元素内包含的辅助功能元素是否已隐藏。 + +例如，在包含兄弟视图 `A` 和 `B` 的窗口中，在视图 `B` 上将 `accessibilityElementsHidden` 设置为 `true` 会导致VoiceOver忽略视图 `B` 中的元素。这类似于Android属性 `importantForAccessibility="no-hide-descendants"`。 + +### 无障碍功能优先级 `importantForAccessibility`
Android
+ +如果有两个 UI 组件同时层叠覆盖在父视图之上，那么默认的无障碍功能的焦点位置就可能难以预料。`importantForAccessibility`属性解决了这一问题，它可以控制某个视图是否触发无障碍功能事件，以及是否将其报告给辅助服务。具体值可以设置为`auto`，`yes`，`no`和`no-hide-descendants`（最后一个值会强制辅助服务忽略当前组件及其所有子组件）。 + +```jsx + + + First layout + + + Second layout + + +``` + +上面这个例子里，第二个 View 的组件对于 TalkBack 和其他一些辅助服务来说是完全不可见的。这样我们就可以把两个视图覆盖到同一个父容器上，而不用担心影响 TalkBack 服务。 + +### `onAccessibilityEscape`
iOS
+ +将此属性分配给一个自定义函数，该函数将在某人执行“逃脱”手势时被调用，这是一个双指Z形手势。逃脱函数应该在用户界面中向上或向后层次移动。这可能意味着在导航层次中向上移动或返回，或者关闭模态用户界面。如果所选元素没有“onAccessibilityEscape”函数，则系统将尝试沿视图层次向上遍历，直到找到一个具有此函数的视图，或者发出提示表示无法找到一个。 + +### 无障碍元素的点击事件 `onAccessibilityTap` + +使用这一属性来绑定一个自定义的事件处理函数，这一函数会在当用户双击某个已经选中的无障碍元素时调用。 + +### 双指双击事件 `onMagicTap`
iOS
+ +使用这一属性来绑定一个自定义的事件处理函数，这一函数会在当用户执行"magic tap"操作（即使用两个指头来双击）时调用。magic tap 的事件处理函数应该做与当前组件相关性最高的操作，比如在电话应用中，magic tap 的操作就应该接通电话，或是挂断已经接通的电话。如果当前选中的元素并没有`onMagicTap`函数，则系统会自动遍历视图层，直到找到一个可以响应此操作的。 + +## 无障碍操作 Accessibility Actions + +辅助功能操作允许辅助技术以编程方式调用组件的操作。为了支持辅助功能操作，组件必须执行两项任务： + +- 通过 `accessibilityActions` 属性定义其支持的操作列表。 +- 实现一个 `onAccessibilityAction` 函数来处理操作请求。 + +`accessibilityActions` 属性应包含操作对象的列表。每个操作对象应包含以下字段： + +| 名称 | 类型 | Required | +| ----- | ------ | -------- | +| 名称 | string | Yes | +| label | string | No | + +操作可以表示标准操作，如点击按钮或调整滑块，或特定于给定组件的自定义操作，例如删除邮件消息。`name`字段对于标准操作和自定义操作都是必需的，但对于标准操作，`label`是可选的。 + +在添加对标准操作的支持时，`name`必须是以下之一： + +- `'magicTap'` - 仅适用于iOS - 当VoiceOver焦点位于组件上或内部时，用户用两个手指双击。 +- `'escape'` - 仅适用于iOS - 当VoiceOver焦点位于组件上或内部时，用户执行双指刷动手势（左，右，左）。 +- `'activate'` - 激活组件。通常情况下，当屏幕阅读器用户双击组件时，应执行与用户触摸或单击组件时相同的操作。 +- `'increment'` - 增加可调整组件的值。在iOS上，当组件具有`'adjustable'`角色并且用户将焦点放在组件上并向上滑动时，VoiceOver会生成此操作。在Android上，当用户将可访问性焦点放在组件上并按音量增加按钮时，TalkBack会生成此操作。 +- `'decrement'` - 减少可调整组件的值。在iOS上，当组件具有`'adjustable'`角色并且用户将焦点放在组件上并向下滑动时，VoiceOver会生成此操作。在Android上，当用户将可访问性焦点放在组件上并按音量减小按钮时，TalkBack会生成此操作。 +- `'longpress'` - 仅适用于Android - 当用户将可访问性焦点放在组件上并双击并长按屏幕上的一个手指时，会生成此操作。通常情况下，这应执行与用户在不使用辅助技术时按住组件上的一个手指时相同的操作。 + +`label`字段对于标准操作是可选的，通常不被辅助技术使用。对于自定义操作，它是一个包含要呈现给用户的操作描述的本地化字符串。 + +要处理操作请求，组件必须实现一个`onAccessibilityAction`函数。此函数的唯一参数是包含要执行的操作名称的事件。以下示例来自RNTester，展示了如何创建一个定义和处理多个自定义操作的组件。 + +```jsx + { + 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`可以用于查询读屏应用是否已开启。请查看[AccessibilityInfo 的文档](accessibilityinfo.md)来了解具体用法。 + +## 发送无障碍功能的相关事件
Android
+ +有时候需要在 UI 组件上主动触发一个无障碍功能的事件（比如当某个自定义的视图出现在屏幕上或是某个自定义的单选框被选中）。为此 UIManager 模块提供了一个`sendAccessibilityEvent`方法。它接受两个参数：view 标签和事件类型。支持的事件类型有`typeWindowStateChanged`, `typeViewFocused` 和 `typeViewClicked`。 + +```jsx +import { Platform, UIManager, findNodeHandle } from 'react-native'; + +if (Platform.OS === 'android') { + UIManager.sendAccessibilityEvent( + findNodeHandle(this), + UIManager.AccessibilityEventTypes.typeViewFocused); + } +} +``` + +在上面这个例子里我们创建了一个自定义的单选框（CustomRadioButton），并且使其具有了和原生单选框一样的无障碍功能。具体来说，也就是 TalkBack 可以正确地通知用户当前选项的变更了。 + +## 测试 TalkBack 支持
Android
+ +要启用 TalkBack，请转到您的 Android 设备或模拟器上的设置应用程序。点击“辅助功能”，然后选择TalkBack。切换“使用服务”开关以启用或禁用它。 + +附注：默认情况下，Android 模拟器不具备 TalkBack 功能。若要安装它： + +1. 在此处下载 TalkBack 文件：https://google-talkback.en.uptodown.com/android +2. 将下载的`.apk`文件拖入模拟器中 + +您可以使用音量键快捷方式来切换 TalkBack。要启用音量键快捷方式，请转到设置应用程序，然后选择“辅助功能”。在顶部，打开音量键快捷方式。 + +要使用音量键快捷方式，请同时按住两个音量键3秒，以启动辅助工具。 + +另外，如果您愿意，您可以通过命令行来切换 TalkBack： + +``` +# 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
+ +要开启 VoiceOver 功能，先打开 iOS 设备的设置选项（注意模拟器上没法测试）。点击“通用”，然后是“辅助选项”，你会看到很多为残障人群使用手机减少障碍的工具，比如更大的字体、更高的对比度以及 VoiceOver。 + +在“视觉”菜单下点击 VoiceOver，将开关置为打开状态即可启用。 + +在辅助选项的最底部，有一个“辅助选项快捷键”，开启之后可以通过点击三次 Home 按钮来快速关闭或打开 VoiceOver 工具。 + +## 更多资料 + +- [Making React Native Apps Accessible](https://engineering.fb.com/ios/making-react-native-apps-accessible/) diff --git a/cnwebsite/versioned_docs/version-0.75/accessibilityinfo.md b/cnwebsite/versioned_docs/version-0.75/accessibilityinfo.md new file mode 100644 index 00000000000..99fa9ae4b01 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/accessibilityinfo.md @@ -0,0 +1,229 @@ +--- +id: accessibilityinfo +title: AccessibilityInfo +--- + +有时候我们希望知道用户的设备是否正在运行读屏应用。`AccessibilityInfo`正是用于此目的。你可以用它来查询读屏应用的当前状态，并且可以监听其状态变化。 + +## 示例 + +```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios +import React, {useState, useEffect} from 'react'; +import {AccessibilityInfo, View, Text, StyleSheet} from 'react-native'; + +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`。 | +| `reduceTransparencyChanged`
iOS
| 当减少透明度切换的状态改变时触发。事件处理程序的参数是一个布尔值。当启用减少透明度时，布尔值为`true`，否则为`false`。 | +| `screenReaderChanged` | 当屏幕阅读器的状态发生变化时触发。事件处理程序的参数是一个布尔值。当启用屏幕阅读器时，该布尔值为`true`，否则为`false`。 | + +--- + +### `announceForAccessibility()` + +```tsx +static announceForAccessibility(announcement: string); +``` + +发送一个字符串给读屏应用朗读。 + +--- + +### `announceForAccessibilityWithOptions()` + +```tsx +static announceForAccessibilityWithOptions( + announcement: string, + options: 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 | 如果未设置“辅助功能超时”，则返回的超时时间。以毫秒为单位指定。 | + +--- + +### `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()` + +```jsx +static isReduceMotionEnabled() +``` + +查询当前是否启用了减少动画。返回一个解析为布尔值的 Promise。当减少动画被启用时，结果为 `true`，否则为 `false`。 + +--- + +### `isReduceTransparencyEnabled()`
iOS
+ +```tsx +static isReduceTransparencyEnabled(): Promise; +``` + +查询当前是否启用了减少透明度。返回一个解析为布尔值的 Promise。当减少透明度已启用时，结果为 `true`，否则为 `false`。 + +--- + +### `isScreenReaderEnabled()` + +```tsx +static isScreenReaderEnabled(): Promise; +``` + +查询读屏应用当前是否开启。返回值为一个 promise，最终解析值为一个布尔值。`true`表示开启状态，`false`反之。 + +--- + +### `prefersCrossFadeTransitions()`
iOS
+ +```tsx +static prefersCrossFadeTransitions(): Promise; +``` + +查询当前是否启用了减少动画和优先使用交叉淡入淡出过渡设置。返回一个解析为布尔值的 Promise。当优先使用交叉淡入淡出过渡被启用时，结果为 `true`，否则为 `false`。 + +--- + +### `setAccessibilityFocus()` + +```tsx +static setAccessibilityFocus(reactTag: number); +``` + +将读屏软件的焦点设置到某个 react 组件上。在 Android 等同于调用 `UIManager.sendAccessibilityEvent(reactTag, UIManager.AccessibilityEventTypes.typeViewFocused);`. + +> **注意**：确保您想要接收可访问性焦点的任何`View`都具有`accessible = {true}`属性。 diff --git a/cnwebsite/versioned_docs/version-0.75/actionsheetios.md b/cnwebsite/versioned_docs/version-0.75/actionsheetios.md new file mode 100644 index 00000000000..ba8ba2a7b11 --- /dev/null +++ b/cnwebsite/versioned_docs/version-0.75/actionsheetios.md @@ -0,0 +1,130 @@ +--- +id: actionsheetios +title: ActionSheetIOS +--- + +显示一个 iOS 原生的[Action Sheet](https://developer.apple.com/design/human-interface-guidelines/ios/views/action-sheets/)组件。 + +## 示例 + +```SnackPlayer name=ActionSheetIOS&supportedPlatforms=ios +import React, { useState } from "react"; +import { ActionSheetIOS, Button, StyleSheet, Text, View } from "react-native"; +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(Math.floor(Math.random() * 100) + 1); + } else if (buttonIndex === 2) { + setResult("🔮"); + } + } + ); + return ( + + {result} +