diff --git a/cndocs/fabric-native-components-android.md b/cndocs/fabric-native-components-android.md index 0e1dc0a12a8..e9f6f455ef2 100644 --- a/cndocs/fabric-native-components-android.md +++ b/cndocs/fabric-native-components-android.md @@ -1,6 +1,6 @@ --- id: fabric-native-components-android -title: 'Fabric Native Modules: Android' +title: 'Fabric 原生 UI 组件：Android' --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; diff --git a/cndocs/fabric-native-components-ios.md b/cndocs/fabric-native-components-ios.md index 1cb36934407..b035c59fe49 100644 --- a/cndocs/fabric-native-components-ios.md +++ b/cndocs/fabric-native-components-ios.md @@ -1,6 +1,6 @@ --- id: fabric-native-components-ios -title: 'Fabric Native Components: iOS' +title: 'Fabric 原生组件：iOS' --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; diff --git a/cndocs/fabric-native-components.md b/cndocs/fabric-native-components.md index b953cb2a807..cdb88f61686 100644 --- a/cndocs/fabric-native-components.md +++ b/cndocs/fabric-native-components.md @@ -1,6 +1,6 @@ --- id: fabric-native-components-introduction -title: Fabric Native Components Introduction +title: Fabric 原生 UI 组件 --- import Tabs from '@theme/Tabs'; diff --git a/cndocs/optimizing-javascript-loading.md b/cndocs/optimizing-javascript-loading.md index ad0b70d7fbc..2c12f850e3f 100644 --- a/cndocs/optimizing-javascript-loading.md +++ b/cndocs/optimizing-javascript-loading.md @@ -166,8 +166,6 @@ module.exports = { }; ``` -See the documentation for [`getTransformOptions` in Metro](https://metrobundler.dev/docs/configuration#gettransformoptions) for more details on setting up and fine-tuning your inline `require`s. - 查看 Metro 文档中的 [`getTransformOptions`](https://metrobundler.dev/docs/configuration#gettransformoptions) 以获取有关设置和微调内联 `require` 的更多详细信息。 ## 高级：使用随机访问模块包（非 Hermes） diff --git a/cndocs/profiling.md b/cndocs/profiling.md index f401ed24efc..c3fca41abce 100644 --- a/cndocs/profiling.md +++ b/cndocs/profiling.md @@ -13,9 +13,9 @@ title: Profiling ## Profiling Android UI Performance with `systrace` -Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve -- and many times it's not native code's fault at all! +Android 支持 10k+ 不同的手机，并且为了支持软件渲染，框架架构需要跨多个硬件目标进行泛化。不幸的是，这意味着你相对于 iOS 获得的免费资源较少。但有时，你可以进行改进——而且很多时候根本不是原生代码的问题！ -The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using a standard Android profiling tool called `systrace`. +调试这种卡顿的第一步是回答每个 16ms 帧中你的时间花费在哪里。为此，我们将使用一个标准的 Android 性能分析工具 `systrace`。 `systrace` is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize. diff --git a/cndocs/speeding-ci-builds.md b/cndocs/speeding-ci-builds.md deleted file mode 100644 index 03b3471220d..00000000000 --- a/cndocs/speeding-ci-builds.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: speeding-ci-builds -title: 优化 CI 构建 ---- - -You or your company may have set up a Continuous Integration (CI) environment to test your React Native application. - -A fast CI service is important for 2 reasons: - -- The more time CI machines are running, the more they cost. -- The longer the CI jobs take to run, the longer the development loop. - -It is therefore important to try and minimize the time the CI environment spends building React Native. - -## Disable Flipper for iOS - -[Flipper](https://github.com/facebook/flipper) is a debugging tool shipped by default with React Native, to help developers debug and profile their React Native applications. However, Flipper is not required in CI: it is very unlikely that you or one of your collegue would have to debug the app built in the CI environment. - -For iOS apps, Flipper is built every time the React Native framework is built and it may require some time to build, and this is time you can save. - -Starting from React Native 0.71, we introduced a new flag in the template's Podfile: the [`NO_FLIPPER` flag](https://github.com/facebook/react-native/blob/main/packages/react-native/template/ios/Podfile#L20). - -By default, the `NO_FLIPPER` flag is not set, therefore Flipper will be included by default in your app. - -You can specify `NO_FLIPPER=1` when installing your iOS pods, to instruct React Native not to install Flipper. Typically, the command would look like this: - -```shell -# from the root folder of the react native project -NO_FLIPPER=1 bundle exec pod install --project-directory=ios -``` - -Add this command in your CI environment to skip the installation of Flipper dependencies and thus saving time and money. - -### Handle Transitive Dependencies - -Your app may be using some libraries which depends on the Flipper pods. If that's your case, disabling flipper with the `NO_FLIPPER` flag may not be enough: your app may fail to build in this case. - -The proper way to handle this case is to add a custom configuration for react native, instructing the app to properly install the transitive dependency. To achieve that: - -1. If you don't have it already, create a new file called `react-native.config.js`. -2. Exclude explicitly the transitive dependency from the `dependencies` when the flag is turned on. - -For example, the `react-native-flipper` library is an additional library that depends on Flipper. If your app uses that, you need to exclude it from the dependencies. Your `react-native.config.js` would look like this: - -```js title="react-native.config.js" -module.exports = { - // other fields - dependencies: { - ...(process.env.NO_FLIPPER - ? {'react-native-flipper': {platforms: {ios: null}}} - : {}), - }, -}; -``` diff --git a/cnwebsite/versioned_docs/version-0.76/fabric-native-components-android.md b/cnwebsite/versioned_docs/version-0.76/fabric-native-components-android.md index 0e1dc0a12a8..e9f6f455ef2 100644 --- a/cnwebsite/versioned_docs/version-0.76/fabric-native-components-android.md +++ b/cnwebsite/versioned_docs/version-0.76/fabric-native-components-android.md @@ -1,6 +1,6 @@ --- id: fabric-native-components-android -title: 'Fabric Native Modules: Android' +title: 'Fabric 原生 UI 组件：Android' --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; diff --git a/cnwebsite/versioned_docs/version-0.76/fabric-native-components-ios.md b/cnwebsite/versioned_docs/version-0.76/fabric-native-components-ios.md index 1cb36934407..b035c59fe49 100644 --- a/cnwebsite/versioned_docs/version-0.76/fabric-native-components-ios.md +++ b/cnwebsite/versioned_docs/version-0.76/fabric-native-components-ios.md @@ -1,6 +1,6 @@ --- id: fabric-native-components-ios -title: 'Fabric Native Components: iOS' +title: 'Fabric 原生组件：iOS' --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; diff --git a/cnwebsite/versioned_docs/version-0.76/fabric-native-components.md b/cnwebsite/versioned_docs/version-0.76/fabric-native-components.md index b953cb2a807..cdb88f61686 100644 --- a/cnwebsite/versioned_docs/version-0.76/fabric-native-components.md +++ b/cnwebsite/versioned_docs/version-0.76/fabric-native-components.md @@ -1,6 +1,6 @@ --- id: fabric-native-components-introduction -title: Fabric Native Components Introduction +title: Fabric 原生 UI 组件 --- import Tabs from '@theme/Tabs'; diff --git a/cnwebsite/versioned_docs/version-0.76/optimizing-javascript-loading.md b/cnwebsite/versioned_docs/version-0.76/optimizing-javascript-loading.md index ad0b70d7fbc..2c12f850e3f 100644 --- a/cnwebsite/versioned_docs/version-0.76/optimizing-javascript-loading.md +++ b/cnwebsite/versioned_docs/version-0.76/optimizing-javascript-loading.md @@ -166,8 +166,6 @@ module.exports = { }; ``` -See the documentation for [`getTransformOptions` in Metro](https://metrobundler.dev/docs/configuration#gettransformoptions) for more details on setting up and fine-tuning your inline `require`s. - 查看 Metro 文档中的 [`getTransformOptions`](https://metrobundler.dev/docs/configuration#gettransformoptions) 以获取有关设置和微调内联 `require` 的更多详细信息。 ## 高级：使用随机访问模块包（非 Hermes） diff --git a/cnwebsite/versioned_docs/version-0.76/speeding-ci-builds.md b/cnwebsite/versioned_docs/version-0.76/speeding-ci-builds.md deleted file mode 100644 index 03b3471220d..00000000000 --- a/cnwebsite/versioned_docs/version-0.76/speeding-ci-builds.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: speeding-ci-builds -title: 优化 CI 构建 ---- - -You or your company may have set up a Continuous Integration (CI) environment to test your React Native application. - -A fast CI service is important for 2 reasons: - -- The more time CI machines are running, the more they cost. -- The longer the CI jobs take to run, the longer the development loop. - -It is therefore important to try and minimize the time the CI environment spends building React Native. - -## Disable Flipper for iOS - -[Flipper](https://github.com/facebook/flipper) is a debugging tool shipped by default with React Native, to help developers debug and profile their React Native applications. However, Flipper is not required in CI: it is very unlikely that you or one of your collegue would have to debug the app built in the CI environment. - -For iOS apps, Flipper is built every time the React Native framework is built and it may require some time to build, and this is time you can save. - -Starting from React Native 0.71, we introduced a new flag in the template's Podfile: the [`NO_FLIPPER` flag](https://github.com/facebook/react-native/blob/main/packages/react-native/template/ios/Podfile#L20). - -By default, the `NO_FLIPPER` flag is not set, therefore Flipper will be included by default in your app. - -You can specify `NO_FLIPPER=1` when installing your iOS pods, to instruct React Native not to install Flipper. Typically, the command would look like this: - -```shell -# from the root folder of the react native project -NO_FLIPPER=1 bundle exec pod install --project-directory=ios -``` - -Add this command in your CI environment to skip the installation of Flipper dependencies and thus saving time and money. - -### Handle Transitive Dependencies - -Your app may be using some libraries which depends on the Flipper pods. If that's your case, disabling flipper with the `NO_FLIPPER` flag may not be enough: your app may fail to build in this case. - -The proper way to handle this case is to add a custom configuration for react native, instructing the app to properly install the transitive dependency. To achieve that: - -1. If you don't have it already, create a new file called `react-native.config.js`. -2. Exclude explicitly the transitive dependency from the `dependencies` when the flag is turned on. - -For example, the `react-native-flipper` library is an additional library that depends on Flipper. If your app uses that, you need to exclude it from the dependencies. Your `react-native.config.js` would look like this: - -```js title="react-native.config.js" -module.exports = { - // other fields - dependencies: { - ...(process.env.NO_FLIPPER - ? {'react-native-flipper': {platforms: {ios: null}}} - : {}), - }, -}; -```