From 19bed75c94ad89deb1ef0810e0501c95f8f2d366 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Thu, 31 Aug 2023 00:13:00 +0800 Subject: [PATCH] fix --- cndocs/building-from-source.md | 147 ------------------ cndocs/debugging.md | 12 +- cndocs/flexbox.md | 8 +- cndocs/imagebackground.md | 53 ++++--- cndocs/publishing.md | 82 ---------- .../version-0.72/animatedvalue.md | 84 +++++----- .../version-0.72/animatedvaluexy.md | 131 ++++++++-------- .../version-0.72/building-from-source.md | 147 ------------------ .../versioned_docs/version-0.72/colors.md | 20 +-- .../versioned_docs/version-0.72/debugging.md | 12 +- .../versioned_docs/version-0.72/flexbox.md | 8 +- .../version-0.72/imagebackground.md | 53 ++++--- .../version-0.72/panresponder.md | 29 ++-- .../versioned_docs/version-0.72/publishing.md | 82 ---------- .../version-0.72/react-18-and-react-native.md | 36 ++--- .../version-0.72/usecolorscheme.md | 14 +- 16 files changed, 243 insertions(+), 675 deletions(-) delete mode 100644 cndocs/building-from-source.md delete mode 100644 cndocs/publishing.md delete mode 100644 cnwebsite/versioned_docs/version-0.72/building-from-source.md delete mode 100644 cnwebsite/versioned_docs/version-0.72/publishing.md diff --git a/cndocs/building-from-source.md b/cndocs/building-from-source.md deleted file mode 100644 index 46de7b34f46..00000000000 --- a/cndocs/building-from-source.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: building-from-source -title: 从源代码编译React Native ---- - -如果你想提前合并官方的修复补丁，尝试还没发布的最新特性，或者添加一些你自己的原生代码，那么就需要自己从源代码编译 React Native。 - -## Android - -### 预备条件 - -在 Android Studio 的 SDK Manager 中安装以下组件： - -- Android SDK version 28 (编译 SDK 版本号在[build.gradle](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle)中可以找到) -- SDK build tools version 28.0.3(编译工具版本号在[build.gradle](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle)中可以找到) -- Android Support Repository >= 28 -- Android NDK(下载及安装指南请看后文) - -#### [将 Gradle 指向你的安卓 SDK](#gradle-android-sdk)： - -**第一步：** 在命令行配置文件中设置环境变量。 - -注意： 对于不同的 shell 命令行，配置文件有所不同，请根据具体情况选择，例如： - -- bash: `.bash_profile` 或 `.bashrc` -- zsh: `.zprofile` 或 `.zshrc` -- ksh: `.profile` 或 `$ENV` - -在配置文件中加入（请填写自己的实际路径）： - -``` -export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx -export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r17c -``` - -**第二步：** 在项目目录的 android 目录下创建`local.properties`文件。添加以下内容：（注意：windows 下路径需要使用反双斜杠） - -``` -ndk.dir=指向android ndk目录的绝对路径 -``` - -#### Android NDK 的下载链接（0.57 之前使用 r10e 版本） - -1. Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r17c-darwin-x86_64.zip -2. Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r17c-linux-x86_64.zip -3. Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r17c-windows-x86_64.zip -4. Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r17c-windows-x86.zip - -安装说明请参考[官方文档](https://developer.android.com/ndk/index.html)。 - -### 编译源代码 - -#### 1. 下载 react-native 源代码 - -首先，在你的分支代码中安装 react-native。例如从官方地址安装主干版本： - -```sh -npm install --save github:facebook/react-native#master -``` - -或者，你也可以把仓库克隆到你的`node_modules`目录，然后运行`npm install`进行安装 - -#### 2. 添加 gradle 依赖 - -在`android/build.gradle`中添加`gradle-download-task`依赖 - -```gradle -... - dependencies { - classpath 'com.android.tools.build:gradle:3.2.1' - classpath 'de.undercouch:gradle-download-task:3.4.3' - - // 注意：不要把你的应用的依赖放在这里； - // 它们应该放在各自模块的build.gradle文件中 - } -... -``` - -#### 3. 添加`:ReactAndroid`项目 - -在`android/settings.gradle`中添加`:ReactAndroid`项目 - -```gradle -... -include ':ReactAndroid' - -project(':ReactAndroid').projectDir = new File( - rootProject.projectDir, '../node_modules/react-native/ReactAndroid') -... -``` - -修改你的`android/app/build.gradle`文件，使用`:ReactAndroid`替换预编译库。例如用`implementation project(':ReactAndroid')`替换`implementation 'com.facebook.react:react-native:+'` - -```gradle -... -dependencies { - implementation fileTree(dir: 'libs', include: ['*.jar']) - implementation 'com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}' - - implementation project(':ReactAndroid') - - ... -} -... -``` - -#### 4. 让第三方模块使用你的分支 - -如果你使用第三方的 React Native 模块，你需要重写它们的依赖以避免它们仍然打包官方的预编译库。否则当你编译时会报错-`Error: more than one library with package name 'com.facebook.react'.`（错误：有几个重名的'com.facebook.react'的包） - -修改你的`android/app/build.gradle`文件，添加如下内容： - -```gradle -configurations.all { - exclude group: 'com.facebook.react', module: 'react-native' -} -``` - -### 在 Android Studio 中编译 - -在 Android Studio 欢迎页中选择`Import project`，随后选择您应用所在的文件夹。 - -您还需要使用*Run*按钮(**译注**：Android Studio 中绿色的运行按钮)来在设备上运行您的 app，此外 Android Studio 不会自动开启服务，你还需要通过`npm start`来启动开发服务。 - -### 其他注意事项 - -从源码进行编译将会花费很长时间，尤其是第一次编译，需要下载接近 200M 的文件然后编译原生代码。每次你在自己的仓库更新`react-native`版本时，构建的目录可能会被删除，所有的文件都需要重新下载。为了避免构建目录被删，你需要编辑`~/.gradle/init.gradle`文件来修改构建目录路径。 - -```gradle -gradle.projectsLoaded { - rootProject.allprojects { - buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}" - } -} -``` - -### Troubleshooting - -Gradle build fails in `ndk-build`. See the section about `local.properties` file above. - -## Testing your Changes - -If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Running Tests](testing.md). - -## Making your changes available - -See the [Publishing your own version of react native](publishing.md) for several options to make your changes available for your and other app projects. diff --git a/cndocs/debugging.md b/cndocs/debugging.md index 930527c9181..f84757d0467 100644 --- a/cndocs/debugging.md +++ b/cndocs/debugging.md @@ -3,6 +3,8 @@ id: debugging title: 调试 --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + ## 开启调试的快捷键 React Native 在 iOS 模拟器上支持一些快捷键操作，具体会在下文中描述。要使用快捷键请**务必确保模拟器的 Hardware 菜单中，Keyboard 选项下的"Connect Hardware Keyboard"处于开启状态**，否则按键是没有响应的。 @@ -49,7 +51,7 @@ LogBox.ignoreAllLogs(); ### 语法错误 -语法错误将自动打开一个全屏的LogBox错误，显示出语法错误的源代码。这个错误是无法取消的，因为它代表了必须在继续使用应用程序之前修复的无效JavaScript执行。要解除这些错误，请修复语法错误并保存以自动解除（启用快速刷新）或按下cmd+r重新加载（禁用快速刷新）。 +语法错误将自动打开一个全屏的 LogBox 错误，显示出语法错误的源代码。这个错误是无法取消的，因为它代表了必须在继续使用应用程序之前修复的无效 JavaScript 执行。要解除这些错误，请修复语法错误并保存以自动解除（启用快速刷新）或按下 cmd+r 重新加载（禁用快速刷新）。 ## Chrome 开发者工具 @@ -57,7 +59,7 @@ LogBox.ignoreAllLogs(); 在 Chrome 的菜单中选择`Tools → Developer Tools`可以打开开发者工具，也可以通过键盘快捷键来打开（Mac 上是**`Command`**`⌘` + **`Option`**`⌥` + **`I`**，Windows 上是**`Ctrl`** + **`Shift`** + **`I`**或是 F12）。打开[有异常时暂停（Pause On Caught Exceptions）](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511)选项，能够获得更好的开发体验。 -> 请注意：在安卓设备上，如果调试器和设备之间的时间差距过大，可能会导致动画、事件行为等不正常或结果不准确。请通过在调试器机器上运行``adb shell "date `date +%m%d%H%M%Y.%S%3N`" ``来纠正这个问题。实际设备需要获取 root 权限才能使用。 +> 请注意：在安卓设备上，如果调试器和设备之间的时间差距过大，可能会导致动画、事件行为等不正常或结果不准确。请通过在调试器机器上运行`` adb shell "date `date +%m%d%H%M%Y.%S%3N`" ``来纠正这个问题。实际设备需要获取 root 权限才能使用。 > 注意：Chrome 中并不能直接看到 App 的用户界面，而只能提供 console 的输出，以及在 sources 项中断点调试 js 脚本。一些老的教程和文章会提到 React 的 Chrome 插件，这一插件目前并不支持 React Native，而且调试本身并不需要这个插件。不过你可以安装独立（非插件）版本的 React Developer Tools 来辅助查看界面布局，下文会讲述具体安装方法。 @@ -77,19 +79,19 @@ LogBox.ignoreAllLogs(); -在用USB线缆连接 Android 5.0+ 设备时，您可以使用[`adb`命令行工具](http://developer.android.com/tools/help/adb.html)将端口转发设置为从设备到计算机： +在用 USB 线缆连接 Android 5.0+ 设备时，您可以使用[`adb`命令行工具](http://developer.android.com/tools/help/adb.html)将端口转发设置为从设备到计算机： ```sh adb reverse tcp:8081 tcp:8081 ``` -或者，从开发菜单中选择“设置”，然后将“设备的调试服务器主机”设置更新为与您计算机的IP地址相匹配。 +或者，从开发菜单中选择“设置”，然后将“设备的调试服务器主机”设置更新为与您计算机的 IP 地址相匹配。 :::note 注意 -如果你遇到任何问题，可能是因为你的Chrome扩展与调试器产生了意外的交互。尝试禁用所有扩展，并逐个重新启用它们，直到找到有问题的扩展。 +如果你遇到任何问题，可能是因为你的 Chrome 扩展与调试器产生了意外的交互。尝试禁用所有扩展，并逐个重新启用它们，直到找到有问题的扩展。 :::
diff --git a/cndocs/flexbox.md b/cndocs/flexbox.md index 97d7c124a80..dafaa22dcd8 100644 --- a/cndocs/flexbox.md +++ b/cndocs/flexbox.md @@ -3,6 +3,8 @@ id: flexbox title: 使用 Flexbox 布局 --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + 我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。 一般来说，使用`flexDirection`、`alignItems`和 `justifyContent`三个样式属性就已经能满足大多数布局需求。 @@ -168,7 +170,7 @@ export default FlexDirectionBasics; ## Layout Direction -布局方向指定了层次结构中的子元素和文本应该被排列的方向。布局方向还会影响到`start`和`end`所指代的边缘。默认情况下，React Native采用从左到右（LTR）的布局方向进行排列。在这种模式下，`start`表示左侧，而`end`表示右侧。 +布局方向指定了层次结构中的子元素和文本应该被排列的方向。布局方向还会影响到`start`和`end`所指代的边缘。默认情况下，React Native 采用从左到右（LTR）的布局方向进行排列。在这种模式下，`start`表示左侧，而`end`表示右侧。 - `LTR（默认值）`: 文本和子元素从左到右进行排列。对于一个元素来说，在其起始位置应用的外边距和内边距将被应用在左侧。 @@ -1425,7 +1427,7 @@ export default RowGapAndColumnGap; `width`和`height`都可以取以下值： -- `auto`（**默认值**）React Native根据元素的内容计算其宽度/高度，无论是其他子元素、文本还是图像。 +- `auto`（**默认值**）React Native 根据元素的内容计算其宽度/高度，无论是其他子元素、文本还是图像。 - `pixels`以绝对像素定义宽度/高度。根据组件上设置的其他样式，这可能是节点最终尺寸也可能不是。 @@ -1590,7 +1592,7 @@ export default WidthHeightBasics; - `relative`（**默认值**） 默认情况下，一个元素是相对定位的。这意味着一个元素根据布局的正常流程进行定位，然后根据 `top`、`right`、`bottom` 和 `left` 的值进行偏移。该偏移不会影响任何兄弟或父级元素的位置。 -- `absolute` 绝对定位时，一个元素不参与正常布局流程。它独立于其兄弟元素进行布局。位置是基于 `top`, `right`, `bottom`, 和 'left' 值来确定的。 +- `absolute` 绝对定位时，一个元素不参与正常布局流程。它独立于其兄弟元素进行布局。位置是基于 `top`, `right`, `bottom`, 和 'left' 值来确定的。 ```SnackPlayer name=Absolute%20%26%20Relative%20Layout import React, { useState } from "react"; diff --git a/cndocs/imagebackground.md b/cndocs/imagebackground.md index 89d9f8599d7..a2dff97ba72 100644 --- a/cndocs/imagebackground.md +++ b/cndocs/imagebackground.md @@ -3,23 +3,23 @@ id: imagebackground title: ImageBackground --- -A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `` component, which has the same props as ``, and add whatever children to it you would like to layer on top of it. +对于熟悉 Web 开发的开发人员来说，`background-image`是一个常见的功能请求。为了处理这种情况，您可以使用``组件，它具有与``相同的属性，并且可以添加任何子元素以覆盖在其上面。 -You might not want to use `` in some cases, since the implementation is very simple. Refer to ``'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed. +在某些情况下，您可能不想使用``，因为其实现比较基础。请参考``的[源代码](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Image/ImageBackground.js)以获取更多信息，并在需要时创建自己的自定义组件。 -Note that you must specify some width and height style attributes. +请注意，您必须指定一些宽度和高度样式属性。 ## 示例 ```SnackPlayer name=ImageBackground -import React from "react"; -import { ImageBackground, StyleSheet, Text, View } from "react-native"; +import React from 'react'; +import {ImageBackground, StyleSheet, Text, View} from 'react-native'; -const image = { uri: "https://zh-hans.reactjs.org/logo-og.png" }; +const image = {uri: 'https://legacy.reactjs.org/logo-og.png'}; const App = () => ( - + Inside @@ -28,20 +28,19 @@ const App = () => ( const styles = StyleSheet.create({ container: { flex: 1, - flexDirection: "column" }, image: { flex: 1, - resizeMode: "cover", - justifyContent: "center" + justifyContent: 'center', }, text: { - color: "white", + color: 'white', fontSize: 42, - fontWeight: "bold", - textAlign: "center", - background: "#000000a0" - } + lineHeight: 84, + fontWeight: 'bold', + textAlign: 'center', + backgroundColor: '#000000c0', + }, }); export default App; @@ -55,22 +54,30 @@ export default App; ### [Image Props](image.md#props) +继承 [Image Props](image.md#props). + +--- + ### `imageStyle` -| 类型 | 必需 | -| ------------------------------------ | ---- | -| [image styles](image-style-props.md) | 否 | +| 类型 | +| ----------------------------------- | +| [Image Style](image-style-props.md) | + +--- ### `imageRef` -Allows to set a reference to the inner `Image` component +设置对内部`Image`组件的引用。 -| 类型 | 必需 | -| ------------------------------------------------------------- | ---- | -| [Ref](https://zh-hans.reactjs.org/docs/refs-and-the-dom.html) | 否 | +| 类型 | +| ----------------------------------------------------- | +| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | + +--- ### `style` -| Type | +| 类型 | | --------------------------------- | | [View Style](view-style-props.md) | diff --git a/cndocs/publishing.md b/cndocs/publishing.md deleted file mode 100644 index 2e415aeca58..00000000000 --- a/cndocs/publishing.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: publishing-forks -title: 发布自己定制的ReactNative包 ---- - -## TL;DR - -There is a docker image that helps you build the required Android sources without installing any additional tooling (other than [Docker](https://docs.docker.com/install/), which can be committed to a git branch as a fully functional React Native fork release. - -Run this from a fork of the React Native [repo](https://github.com/facebook/react-native). - -``` -git checkout -d release/my-react-native-release -docker run --rm --name rn-build -v $PWD:/pwd -w /pwd reactnativecommunity/react-native-android /bin/sh -c "./gradlew installArchives" -git add android --force -git commit -a -m 'my react native forked release' -git push -``` - -Install it in your app project package.json. - -``` -"dependencies": { - ... - "react-native": "myName/react-native#release/my-react-native-release" -} -``` - -## Rationale - -The recommended approach to working with React Native is to always update to the latest version. No support is provided on older versions and if you run into issues the contributors will always ask you to upgrade to the latest version before even looking at your particular issue. Sometimes, though, you are temporarily stuck on an older React Native version, but you require some changes from newer versions urgently (bugfixes) without having to do a full upgrade right now. This situation should be short lived by definition and once you have the time, the real solution is to upgrade to the latest version. - -With this goal of a shortlived fork of React Native in mind, you can publish your own version of React Native. The facebook/react-native repository contains all the dependencies required to be used directly as a git dependency, except for the Android React Native library binary (.aar). - -## Building - -This binary needs to become available in your project's `node_modules/react-native/android` folder or directly in your gradle dependency of your Android app. You can achieve this in one of two ways: Git dependency branch, Android binary dependency through Maven. - -To build the .aar React Native library, you can follow the steps to [build from source](building-from-source.md) first to install all required tooling. Then to build the actual library, you can run the following in the root of your react-native checkout: - -```$bash -./gradlew :ReactAndroid:installArchives --no-daemon -``` - -If you don't want to install the required toolchain for building from source, you can use a prebuilt docker image to create a react native binary; - -``` -docker run --rm --name rn-build -v $PWD:/pwd -w /pwd reactnativecommunity/react-native-android /bin/sh -c "./gradlew installArchives" -``` - -If you haven't used the Android NDK before or if you have a NDK version not exactly matching the required version for building React Native, this is the recommended approach. - -The resulting binary can be made available to app projects in one of the two ways described below. - -### Publishing to Maven/Nexus - -Upload the binaries from the `android` folder to maven and point your Android app project gradle dependency for React Native to your Maven/Nexus dependency. - -### Publishing to a git fork dependency - -Instead of uploading to Maven/Nexus, you can add the binaries built in the previous steps to git, by changing the .gitignore and committing the binaries to your forked branch. This allows you to make your fork into a functioning git dependency for React Native app projects. - -If you have changes that you want to actually merge to React Native, make them on another branch first and open a PR. To start making your dependency branch, make sure you are on a 'release/my-forked-release' branch, then merge any commits that you need from yourself or others into this branch. This release branch should never be merged into any other branch. - -```$bash -# create .aar, then: -git add android --force -git commit -m 'my release commit' -git push -``` - -Now you can use this branch as a git dependency in your app project, by pointing your package.json dependency to this branch: - -``` -"dependencies": { - ... - "react-native": "my-name/react-native#release/my-forked-release, - ... -} -``` - -No other modifications to your dependencies should be necessary for your native changes to be included in your project. diff --git a/cnwebsite/versioned_docs/version-0.72/animatedvalue.md b/cnwebsite/versioned_docs/version-0.72/animatedvalue.md index 2fcd2ee0479..ad3e71fd12f 100644 --- a/cnwebsite/versioned_docs/version-0.72/animatedvalue.md +++ b/cnwebsite/versioned_docs/version-0.72/animatedvalue.md @@ -35,13 +35,13 @@ setValue(value); setOffset(offset); ``` -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. +设置一个偏移量，该偏移量会叠加在通过`setValue`、动画或`Animated.event`设置的任何值之上。对于补偿诸如平移手势的起始位置等情况非常有用。 **参数：** -| 名称 | 类型 | 必需 | 说明 | -| ------ | ------ | ---- | ------------ | -| offset | number | 是 | Offset value | +| 名称 | 类型 | 必需 | 说明 | +| ------ | ------ | ---- | ------ | +| offset | number | 是 | 偏移量 | --- @@ -51,7 +51,7 @@ Sets an offset that is applied on top of whatever value is set, whether via `set flattenOffset(); ``` -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. +将偏移值合并到基础值中，并将偏移重置为零。最终输出的数值保持不变。 --- @@ -61,7 +61,7 @@ Merges the offset value into the base value and resets the offset to zero. The f extractOffset(); ``` -Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged. +将偏移值设置为基准值，并将基准值重置为零。最终输出的数值保持不变。 --- @@ -71,15 +71,15 @@ Sets the offset value to the base value, and resets the base value to zero. The addListener(callback); ``` -Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively. +给动画值添加一个异步监听器，以便您可以观察动画值的更新。这很有用，因为没有办法同步读取该值，因为它可能是由原生驱动的。 -Returns a string that serves as an identifier for the listener. +返回一个作为监听器标识符的字符串。 **参数：** -| 名称 | 类型 | 必需 | 说明 | -| -------- | -------- | ---- | ------------------------------------------------------------------------------------------- | -| callback | function | 是 | The callback function which will receive an object with a `value` key set to the new value. | +| 名称 | 类型 | 必需 | 说明 | +| -------- | -------- | ---- | ----------------------------------------------------- | +| callback | function | 是 | 回调函数将接收一个对象，其中`value`键的值设置为新值。 | --- @@ -89,13 +89,13 @@ Returns a string that serves as an identifier for the listener. removeListener(id); ``` -移除一个监听函数。 The `id` param shall match the identifier previously returned by `addListener()`. +移除一个监听函数。 `id`参数应与之前由`addListener()`返回的标识符匹配。 **参数：** -| 名称 | 类型 | 必需 | 说明 | -| ---- | ------ | ---- | ---------------------------------- | -| id | string | 是 | Id for the listener being removed. | +| 名称 | 类型 | 必需 | 说明 | +| ---- | ------ | ---- | ----------------------- | +| id | string | 是 | 正在移除的监听器的 ID。 | --- @@ -115,13 +115,13 @@ removeAllListeners(); stopAnimation([callback]); ``` -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. +停止任何正在运行的动画或跟踪。在停止动画后，将使用最终值调用`callback`，这对于更新状态以匹配布局中的动画位置非常有用。 **参数：** -| 名称 | 类型 | 必需 | 说明 | -| -------- | -------- | ---- | --------------------------------------------- | -| callback | function | 否 | A function that will receive the final value. | +| 名称 | 类型 | 必需 | 说明 | +| -------- | -------- | ---- | ------------------------ | +| callback | function | 否 | 一个将接收最终值的函数。 | --- @@ -131,13 +131,13 @@ Stops any running animation or tracking. `callback` is invoked with the final va resetAnimation([callback]); ``` -Stops any animation and resets the value to its original. +停止任何动画并将值重置为其原始状态。 **参数：** -| 名称 | 类型 | 必需 | 说明 | -| -------- | -------- | ---- | ------------------------------------------------ | -| callback | function | 否 | A function that will receive the original value. | +| 名称 | 类型 | 必需 | 说明 | +| -------- | -------- | ---- | ---------------------- | +| callback | function | 否 | 一个接收原始值的函数。 | --- @@ -147,9 +147,9 @@ Stops any animation and resets the value to its original. interpolate(config); ``` -Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10. +在更新属性之前进行插值，例如将 0-1 映射到 0-10。 -See `AnimatedInterpolation.js` +请参阅`AnimatedInterpolation.js` **参数：** @@ -157,14 +157,14 @@ See `AnimatedInterpolation.js` | ------ | ------ | ---- | ------------ | | config | object | 是 | 看下面的说明 | -The `config` object is composed of the following keys: +`config` 对象由以下键组成： -- `inputRange`: an array of numbers -- `outputRange`: an array of numbers or strings -- `easing` (optional): a function that returns a number, given an input number -- `extrapolate` (optional): a string such as 'extend', 'identity', or 'clamp' -- `extrapolateLeft` (optional): a string such as 'extend', 'identity', or 'clamp' -- `extrapolateRight` (optional): a string such as 'extend', 'identity', or 'clamp' +- `inputRange`：一个数字数组 +- `outputRange`：一个数字或字符串的数组 +- `easing`（可选）：一个函数，给定输入数字返回一个数字 +- `extrapolate`（可选）：一个字符串，如 'extend'、'identity' 或 'clamp' +- `extrapolateLeft`（可选）：一个字符串，如 'extend'、'identity' 或 'clamp' +- `extrapolateRight`（可选）： --- @@ -174,14 +174,14 @@ The `config` object is composed of the following keys: animate(animation, callback); ``` -Typically only used internally, but could be used by a custom Animation class. +通常只在内部使用，但也可以由自定义的动画类使用。 **参数：** -| 名称 | 类型 | 必需 | 说明 | -| --------- | --------- | ---- | ------------------- | -| animation | Animation | 是 | See `Animation.js`. | -| callback | function | 是 | Callback function. | +| 名称 | 类型 | 必需 | 说明 | +| --------- | --------- | ---- | ---------------------- | +| animation | Animation | 是 | 请参阅 `Animation.js`. | +| callback | function | 是 | 回调函数 | --- @@ -191,7 +191,7 @@ Typically only used internally, but could be used by a custom Animation class. stopTracking(); ``` -Typically only used internally. +一般只在内部使用。 --- @@ -201,10 +201,10 @@ Typically only used internally. track(tracking); ``` -Typically only used internally. +一般只在内部使用。 **参数：** -| 名称 | 类型 | 必需 | 说明 | -| -------- | ------------ | ---- | --------------------- | -| tracking | AnimatedNode | 是 | See `AnimatedNode.js` | +| 名称 | 类型 | 必需 | 说明 | +| -------- | ------------ | ---- | ------------------------ | +| tracking | AnimatedNode | 是 | 请参阅 `AnimatedNode.js` | diff --git a/cnwebsite/versioned_docs/version-0.72/animatedvaluexy.md b/cnwebsite/versioned_docs/version-0.72/animatedvaluexy.md index 32e02623795..9fbd9a6860b 100644 --- a/cnwebsite/versioned_docs/version-0.72/animatedvaluexy.md +++ b/cnwebsite/versioned_docs/version-0.72/animatedvaluexy.md @@ -3,13 +3,13 @@ id: animatedvaluexy title: Animated.ValueXY --- -2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue.md), but multiplexed. Contains two regular `Animated.Value`s under the hood. +2D 值用于驱动 2D 动画，例如平移手势。与普通的[`Animated.Value`](animatedvalue)几乎相同的 API，但是可以多路复用。在内部包含两个常规的`Animated.Value`。 ## 示例 ```SnackPlayer name=Animated.ValueXY -import React, { useRef } from "react"; -import { Animated, PanResponder, StyleSheet, View } from "react-native"; +import React, {useRef} from 'react'; +import {Animated, PanResponder, StyleSheet, View} from 'react-native'; const DraggableView = () => { const pan = useRef(new Animated.ValueXY()).current; @@ -26,7 +26,7 @@ const DraggableView = () => { onPanResponderRelease: () => { Animated.spring( pan, // Auto-multiplexed - { toValue: { x: 0, y: 0 } } // Back to zero + {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero ).start(); }, }); @@ -44,11 +44,11 @@ const DraggableView = () => { const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: "center", - alignItems: "center", + justifyContent: 'center', + alignItems: 'center', }, box: { - backgroundColor: "#61dafb", + backgroundColor: '#61dafb', width: 80, height: 80, borderRadius: 4, @@ -66,141 +66,141 @@ export default DraggableView; ### `setValue()` -```jsx -setValue(value); +```tsx +setValue(value: {x: number; y: number}); ``` -Directly set the value. This will stop any animations running on the value and update all the bound properties. +直接设置值。这将停止任何正在运行的动画，并更新所有绑定的属性。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| ----- | ------ | ---- | ---- | -| value | number | 是 | | +| 名称 | 类型 | 必需 | 描述 | +| ----- | ---------------------- | ---- | ---- | +| value | {x: number; y: number} | 是 | 值 | --- ### `setOffset()` -```jsx -setOffset(offset); +```tsx +setOffset(offset: {x: number; y: number}); ``` -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. +设置一个偏移量，该偏移量会在已经设置的任何值（无论是通过`setValue`、动画还是`Animated.event`）之上应用。对于补偿诸如平移手势的起始位置等情况非常有用。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| ------ | ------ | ---- | ---- | -| offset | number | 是 | | +| 名称 | 类型 | 必填 | 描述 | +| ------ | ---------------------- | ---- | ------ | +| offset | {x: number; y: number} | 是 | 偏移值 | --- ### `flattenOffset()` -```jsx +```tsx flattenOffset(); ``` -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. +将偏移值合并到基础值中，并将偏移重置为零。最终输出的数值保持不变。 --- ### `extractOffset()` -```jsx +```tsx extractOffset(); ``` -Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged. +将偏移值设置为基准值，并将基准值重置为零。最终输出的数值保持不变。 --- ### `addListener()` -```jsx -addListener(callback); +```tsx +addListener(callback: (value: {x: number; y: number}) => void); ``` -Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively. +向值添加一个异步监听器，以便您可以观察动画的更新。这很有用，因为没有办法同步读取该值，因为它可能是由原生驱动的。 -Returns a string that serves as an identifier for the listener. +返回一个字符串作为监听器的标识符。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| -------- | -------- | ---- | ------------------------------------------------------------------------------------------- | -| callback | function | 是 | The callback function which will receive an object with a `value` key set to the new value. | +| 名称 | 类型 | 必需 | 描述 | +| -------- | ---- | ---- | ---------- | +| callback | 函数 | 是 | 回调函数将 | --- ### `removeListener()` -```jsx -removeListener(id); +```tsx +removeListener(id: string); ``` -Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`. +取消注册监听器。`id` 参数应与先前由 `addListener()` 返回的标识符匹配。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| ---- | ------ | ---- | ---------------------------------- | -| id | string | 是 | Id for the listener being removed. | +| 名称 | 类型 | 必需 | 描述 | +| ---- | ------ | ---- | ------------------------ | +| id | string | 是 | 要移除的监听器的标识符。 | --- ### `removeAllListeners()` -```jsx +```tsx removeAllListeners(); ``` -Remove all registered listeners. +移除所有已注册的监听器。 --- ### `stopAnimation()` -```jsx -stopAnimation([callback]); +```tsx +stopAnimation(callback?: (value: {x: number; y: number}) => void); ``` -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. +停止任何正在运行的动画或跟踪。在停止动画后，将使用`callback`调用最终值，这对于更新状态以匹配布局中的动画位置非常有用。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| -------- | -------- | ---- | --------------------------------------------- | -| callback | function | 否 | A function that will receive the final value. | +| 名称 | 类型 | 是否必需 | 描述 | +| -------- | ---- | -------- | ---------------------- | +| callback | 函数 | 否 | 将接收到最终值的函数。 | --- ### `resetAnimation()` -```jsx -resetAnimation([callback]); +```tsx +resetAnimation(callback?: (value: {x: number; y: number}) => void); ``` -Stops any animation and resets the value to its original. +停止任何动画并将值重置为其原始状态。 -**参数：** +**参数:** -| 名称 | 类型 | 必需 | 说明 | -| -------- | -------- | ---- | ------------------------------------------------ | -| callback | function | 否 | A function that will receive the original value. | +| 名称 | 类型 | 是否必需 | 描述 | +| -------- | -------- | -------- | ---------------------- | +| callback | function | 否 | 一个接收原始值的函数。 | --- ### `getLayout()` -```jsx -getLayout(); +```tsx +getLayout(): {left: Animated.Value, top: Animated.Value}; ``` -Converts `{x, y}` into `{left, top}` for use in style, e.g. +将`{x, y}`转换为`{left, top}`以在样式中使用，例如： -```jsx +```tsx style={this.state.anim.getLayout()} ``` @@ -208,13 +208,16 @@ style={this.state.anim.getLayout()} ### `getTranslateTransform()` -```jsx -getTranslateTransform(); +```tsx +getTranslateTransform(): [ + {translateX: Animated.Value}, + {translateY: Animated.Value}, +]; ``` -Converts `{x, y}` into a useable translation transform, e.g. +将`{x, y}`转换为可用的平移变换，例如： -```jsx +```tsx style={{ transform: this.state.anim.getTranslateTransform() }} diff --git a/cnwebsite/versioned_docs/version-0.72/building-from-source.md b/cnwebsite/versioned_docs/version-0.72/building-from-source.md deleted file mode 100644 index 46de7b34f46..00000000000 --- a/cnwebsite/versioned_docs/version-0.72/building-from-source.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: building-from-source -title: 从源代码编译React Native ---- - -如果你想提前合并官方的修复补丁，尝试还没发布的最新特性，或者添加一些你自己的原生代码，那么就需要自己从源代码编译 React Native。 - -## Android - -### 预备条件 - -在 Android Studio 的 SDK Manager 中安装以下组件： - -- Android SDK version 28 (编译 SDK 版本号在[build.gradle](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle)中可以找到) -- SDK build tools version 28.0.3(编译工具版本号在[build.gradle](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle)中可以找到) -- Android Support Repository >= 28 -- Android NDK(下载及安装指南请看后文) - -#### [将 Gradle 指向你的安卓 SDK](#gradle-android-sdk)： - -**第一步：** 在命令行配置文件中设置环境变量。 - -注意： 对于不同的 shell 命令行，配置文件有所不同，请根据具体情况选择，例如： - -- bash: `.bash_profile` 或 `.bashrc` -- zsh: `.zprofile` 或 `.zshrc` -- ksh: `.profile` 或 `$ENV` - -在配置文件中加入（请填写自己的实际路径）： - -``` -export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx -export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r17c -``` - -**第二步：** 在项目目录的 android 目录下创建`local.properties`文件。添加以下内容：（注意：windows 下路径需要使用反双斜杠） - -``` -ndk.dir=指向android ndk目录的绝对路径 -``` - -#### Android NDK 的下载链接（0.57 之前使用 r10e 版本） - -1. Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r17c-darwin-x86_64.zip -2. Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r17c-linux-x86_64.zip -3. Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r17c-windows-x86_64.zip -4. Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r17c-windows-x86.zip - -安装说明请参考[官方文档](https://developer.android.com/ndk/index.html)。 - -### 编译源代码 - -#### 1. 下载 react-native 源代码 - -首先，在你的分支代码中安装 react-native。例如从官方地址安装主干版本： - -```sh -npm install --save github:facebook/react-native#master -``` - -或者，你也可以把仓库克隆到你的`node_modules`目录，然后运行`npm install`进行安装 - -#### 2. 添加 gradle 依赖 - -在`android/build.gradle`中添加`gradle-download-task`依赖 - -```gradle -... - dependencies { - classpath 'com.android.tools.build:gradle:3.2.1' - classpath 'de.undercouch:gradle-download-task:3.4.3' - - // 注意：不要把你的应用的依赖放在这里； - // 它们应该放在各自模块的build.gradle文件中 - } -... -``` - -#### 3. 添加`:ReactAndroid`项目 - -在`android/settings.gradle`中添加`:ReactAndroid`项目 - -```gradle -... -include ':ReactAndroid' - -project(':ReactAndroid').projectDir = new File( - rootProject.projectDir, '../node_modules/react-native/ReactAndroid') -... -``` - -修改你的`android/app/build.gradle`文件，使用`:ReactAndroid`替换预编译库。例如用`implementation project(':ReactAndroid')`替换`implementation 'com.facebook.react:react-native:+'` - -```gradle -... -dependencies { - implementation fileTree(dir: 'libs', include: ['*.jar']) - implementation 'com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}' - - implementation project(':ReactAndroid') - - ... -} -... -``` - -#### 4. 让第三方模块使用你的分支 - -如果你使用第三方的 React Native 模块，你需要重写它们的依赖以避免它们仍然打包官方的预编译库。否则当你编译时会报错-`Error: more than one library with package name 'com.facebook.react'.`（错误：有几个重名的'com.facebook.react'的包） - -修改你的`android/app/build.gradle`文件，添加如下内容： - -```gradle -configurations.all { - exclude group: 'com.facebook.react', module: 'react-native' -} -``` - -### 在 Android Studio 中编译 - -在 Android Studio 欢迎页中选择`Import project`，随后选择您应用所在的文件夹。 - -您还需要使用*Run*按钮(**译注**：Android Studio 中绿色的运行按钮)来在设备上运行您的 app，此外 Android Studio 不会自动开启服务，你还需要通过`npm start`来启动开发服务。 - -### 其他注意事项 - -从源码进行编译将会花费很长时间，尤其是第一次编译，需要下载接近 200M 的文件然后编译原生代码。每次你在自己的仓库更新`react-native`版本时，构建的目录可能会被删除，所有的文件都需要重新下载。为了避免构建目录被删，你需要编辑`~/.gradle/init.gradle`文件来修改构建目录路径。 - -```gradle -gradle.projectsLoaded { - rootProject.allprojects { - buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}" - } -} -``` - -### Troubleshooting - -Gradle build fails in `ndk-build`. See the section about `local.properties` file above. - -## Testing your Changes - -If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Running Tests](testing.md). - -## Making your changes available - -See the [Publishing your own version of react native](publishing.md) for several options to make your changes available for your and other app projects. diff --git a/cnwebsite/versioned_docs/version-0.72/colors.md b/cnwebsite/versioned_docs/version-0.72/colors.md index bd74f7c2e72..e5bd0c636ad 100644 --- a/cnwebsite/versioned_docs/version-0.72/colors.md +++ b/cnwebsite/versioned_docs/version-0.72/colors.md @@ -3,19 +3,19 @@ id: colors title: 颜色 --- -Components in React Native are [styled using JavaScript](style). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). General guides on the color usage on each platform could be found below: +React Native 中的组件是[使用 JavaScript 进行样式化](style)的。颜色属性通常与 Web 上的 [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 工作方式相匹配。每个平台上关于颜色使用的一般指南如下： - [Android](https://material.io/design/color/color-usage.html) - [iOS](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/) -## Color APIs +## 颜色相关的 API -React Native has several color APIs designed to allow you to take full advantage of your platform's design and user preferences. +React Native 有几个颜色 API，旨在让您充分利用平台的设计和用户偏好。 -- [PlatformColor](platformcolor) lets you reference the platform's color system. -- [DynamicColorIOS](dynamiccolorios) is iOS specific and allows you to specify which colors should be used in light or Dark Mode. +- [PlatformColor](platformcolor) 允许您引用平台的颜色系统。 +- [DynamicColorIOS](dynamiccolorios) 是 iOS 特有的，可以让您指定在浅色或深色模式下使用哪些颜色。 -## Color representations +## 颜色的表示形式 ### 红-绿-蓝 (RGB) @@ -33,13 +33,15 @@ React Native 支持 `rgb()` 和 `rgba()` 两种十六进制与函数方法 - `'hsl(360, 100%, 100%)'` - `'hsla(360, 100%, 100%, 1.0)'` -### Color ints +### 颜色值 -React Native supports also colors as an `int` values (in RGB color mode): +React Native 还支持将颜色表示为`int`值（以 RGB 颜色模式）： - `0xff00ff00` (0xrrggbbaa) -> **_Note:_** This might appear similar to the Android [Color](https://developer.android.com/reference/android/graphics/Color) ints representation but on Android values are stored in SRGB color mode (0xaarrggbb). +:::caution 注意 +这看起来可能与 Android [Color](https://developer.android.com/reference/android/graphics/Color) 的整数表示类似，但在 Android 上的值是以 SRGB 颜色模式（0xaarrggbb）存储的。 +::: ### 全透明 `transparent` diff --git a/cnwebsite/versioned_docs/version-0.72/debugging.md b/cnwebsite/versioned_docs/version-0.72/debugging.md index 930527c9181..f84757d0467 100644 --- a/cnwebsite/versioned_docs/version-0.72/debugging.md +++ b/cnwebsite/versioned_docs/version-0.72/debugging.md @@ -3,6 +3,8 @@ id: debugging title: 调试 --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + ## 开启调试的快捷键 React Native 在 iOS 模拟器上支持一些快捷键操作，具体会在下文中描述。要使用快捷键请**务必确保模拟器的 Hardware 菜单中，Keyboard 选项下的"Connect Hardware Keyboard"处于开启状态**，否则按键是没有响应的。 @@ -49,7 +51,7 @@ LogBox.ignoreAllLogs(); ### 语法错误 -语法错误将自动打开一个全屏的LogBox错误，显示出语法错误的源代码。这个错误是无法取消的，因为它代表了必须在继续使用应用程序之前修复的无效JavaScript执行。要解除这些错误，请修复语法错误并保存以自动解除（启用快速刷新）或按下cmd+r重新加载（禁用快速刷新）。 +语法错误将自动打开一个全屏的 LogBox 错误，显示出语法错误的源代码。这个错误是无法取消的，因为它代表了必须在继续使用应用程序之前修复的无效 JavaScript 执行。要解除这些错误，请修复语法错误并保存以自动解除（启用快速刷新）或按下 cmd+r 重新加载（禁用快速刷新）。 ## Chrome 开发者工具 @@ -57,7 +59,7 @@ LogBox.ignoreAllLogs(); 在 Chrome 的菜单中选择`Tools → Developer Tools`可以打开开发者工具，也可以通过键盘快捷键来打开（Mac 上是**`Command`**`⌘` + **`Option`**`⌥` + **`I`**，Windows 上是**`Ctrl`** + **`Shift`** + **`I`**或是 F12）。打开[有异常时暂停（Pause On Caught Exceptions）](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511)选项，能够获得更好的开发体验。 -> 请注意：在安卓设备上，如果调试器和设备之间的时间差距过大，可能会导致动画、事件行为等不正常或结果不准确。请通过在调试器机器上运行``adb shell "date `date +%m%d%H%M%Y.%S%3N`" ``来纠正这个问题。实际设备需要获取 root 权限才能使用。 +> 请注意：在安卓设备上，如果调试器和设备之间的时间差距过大，可能会导致动画、事件行为等不正常或结果不准确。请通过在调试器机器上运行`` adb shell "date `date +%m%d%H%M%Y.%S%3N`" ``来纠正这个问题。实际设备需要获取 root 权限才能使用。 > 注意：Chrome 中并不能直接看到 App 的用户界面，而只能提供 console 的输出，以及在 sources 项中断点调试 js 脚本。一些老的教程和文章会提到 React 的 Chrome 插件，这一插件目前并不支持 React Native，而且调试本身并不需要这个插件。不过你可以安装独立（非插件）版本的 React Developer Tools 来辅助查看界面布局，下文会讲述具体安装方法。 @@ -77,19 +79,19 @@ LogBox.ignoreAllLogs(); -在用USB线缆连接 Android 5.0+ 设备时，您可以使用[`adb`命令行工具](http://developer.android.com/tools/help/adb.html)将端口转发设置为从设备到计算机： +在用 USB 线缆连接 Android 5.0+ 设备时，您可以使用[`adb`命令行工具](http://developer.android.com/tools/help/adb.html)将端口转发设置为从设备到计算机： ```sh adb reverse tcp:8081 tcp:8081 ``` -或者，从开发菜单中选择“设置”，然后将“设备的调试服务器主机”设置更新为与您计算机的IP地址相匹配。 +或者，从开发菜单中选择“设置”，然后将“设备的调试服务器主机”设置更新为与您计算机的 IP 地址相匹配。 :::note 注意 -如果你遇到任何问题，可能是因为你的Chrome扩展与调试器产生了意外的交互。尝试禁用所有扩展，并逐个重新启用它们，直到找到有问题的扩展。 +如果你遇到任何问题，可能是因为你的 Chrome 扩展与调试器产生了意外的交互。尝试禁用所有扩展，并逐个重新启用它们，直到找到有问题的扩展。 :::
diff --git a/cnwebsite/versioned_docs/version-0.72/flexbox.md b/cnwebsite/versioned_docs/version-0.72/flexbox.md index 97d7c124a80..dafaa22dcd8 100644 --- a/cnwebsite/versioned_docs/version-0.72/flexbox.md +++ b/cnwebsite/versioned_docs/version-0.72/flexbox.md @@ -3,6 +3,8 @@ id: flexbox title: 使用 Flexbox 布局 --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + 我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。 一般来说，使用`flexDirection`、`alignItems`和 `justifyContent`三个样式属性就已经能满足大多数布局需求。 @@ -168,7 +170,7 @@ export default FlexDirectionBasics; ## Layout Direction -布局方向指定了层次结构中的子元素和文本应该被排列的方向。布局方向还会影响到`start`和`end`所指代的边缘。默认情况下，React Native采用从左到右（LTR）的布局方向进行排列。在这种模式下，`start`表示左侧，而`end`表示右侧。 +布局方向指定了层次结构中的子元素和文本应该被排列的方向。布局方向还会影响到`start`和`end`所指代的边缘。默认情况下，React Native 采用从左到右（LTR）的布局方向进行排列。在这种模式下，`start`表示左侧，而`end`表示右侧。 - `LTR（默认值）`: 文本和子元素从左到右进行排列。对于一个元素来说，在其起始位置应用的外边距和内边距将被应用在左侧。 @@ -1425,7 +1427,7 @@ export default RowGapAndColumnGap; `width`和`height`都可以取以下值： -- `auto`（**默认值**）React Native根据元素的内容计算其宽度/高度，无论是其他子元素、文本还是图像。 +- `auto`（**默认值**）React Native 根据元素的内容计算其宽度/高度，无论是其他子元素、文本还是图像。 - `pixels`以绝对像素定义宽度/高度。根据组件上设置的其他样式，这可能是节点最终尺寸也可能不是。 @@ -1590,7 +1592,7 @@ export default WidthHeightBasics; - `relative`（**默认值**） 默认情况下，一个元素是相对定位的。这意味着一个元素根据布局的正常流程进行定位，然后根据 `top`、`right`、`bottom` 和 `left` 的值进行偏移。该偏移不会影响任何兄弟或父级元素的位置。 -- `absolute` 绝对定位时，一个元素不参与正常布局流程。它独立于其兄弟元素进行布局。位置是基于 `top`, `right`, `bottom`, 和 'left' 值来确定的。 +- `absolute` 绝对定位时，一个元素不参与正常布局流程。它独立于其兄弟元素进行布局。位置是基于 `top`, `right`, `bottom`, 和 'left' 值来确定的。 ```SnackPlayer name=Absolute%20%26%20Relative%20Layout import React, { useState } from "react"; diff --git a/cnwebsite/versioned_docs/version-0.72/imagebackground.md b/cnwebsite/versioned_docs/version-0.72/imagebackground.md index 89d9f8599d7..a2dff97ba72 100644 --- a/cnwebsite/versioned_docs/version-0.72/imagebackground.md +++ b/cnwebsite/versioned_docs/version-0.72/imagebackground.md @@ -3,23 +3,23 @@ id: imagebackground title: ImageBackground --- -A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `` component, which has the same props as ``, and add whatever children to it you would like to layer on top of it. +对于熟悉 Web 开发的开发人员来说，`background-image`是一个常见的功能请求。为了处理这种情况，您可以使用``组件，它具有与``相同的属性，并且可以添加任何子元素以覆盖在其上面。 -You might not want to use `` in some cases, since the implementation is very simple. Refer to ``'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed. +在某些情况下，您可能不想使用``，因为其实现比较基础。请参考``的[源代码](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Image/ImageBackground.js)以获取更多信息，并在需要时创建自己的自定义组件。 -Note that you must specify some width and height style attributes. +请注意，您必须指定一些宽度和高度样式属性。 ## 示例 ```SnackPlayer name=ImageBackground -import React from "react"; -import { ImageBackground, StyleSheet, Text, View } from "react-native"; +import React from 'react'; +import {ImageBackground, StyleSheet, Text, View} from 'react-native'; -const image = { uri: "https://zh-hans.reactjs.org/logo-og.png" }; +const image = {uri: 'https://legacy.reactjs.org/logo-og.png'}; const App = () => ( - + Inside @@ -28,20 +28,19 @@ const App = () => ( const styles = StyleSheet.create({ container: { flex: 1, - flexDirection: "column" }, image: { flex: 1, - resizeMode: "cover", - justifyContent: "center" + justifyContent: 'center', }, text: { - color: "white", + color: 'white', fontSize: 42, - fontWeight: "bold", - textAlign: "center", - background: "#000000a0" - } + lineHeight: 84, + fontWeight: 'bold', + textAlign: 'center', + backgroundColor: '#000000c0', + }, }); export default App; @@ -55,22 +54,30 @@ export default App; ### [Image Props](image.md#props) +继承 [Image Props](image.md#props). + +--- + ### `imageStyle` -| 类型 | 必需 | -| ------------------------------------ | ---- | -| [image styles](image-style-props.md) | 否 | +| 类型 | +| ----------------------------------- | +| [Image Style](image-style-props.md) | + +--- ### `imageRef` -Allows to set a reference to the inner `Image` component +设置对内部`Image`组件的引用。 -| 类型 | 必需 | -| ------------------------------------------------------------- | ---- | -| [Ref](https://zh-hans.reactjs.org/docs/refs-and-the-dom.html) | 否 | +| 类型 | +| ----------------------------------------------------- | +| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | + +--- ### `style` -| Type | +| 类型 | | --------------------------------- | | [View Style](view-style-props.md) | diff --git a/cnwebsite/versioned_docs/version-0.72/panresponder.md b/cnwebsite/versioned_docs/version-0.72/panresponder.md index f9cb5d764ec..c33793116e9 100644 --- a/cnwebsite/versioned_docs/version-0.72/panresponder.md +++ b/cnwebsite/versioned_docs/version-0.72/panresponder.md @@ -44,25 +44,27 @@ onPanResponderMove: (event, gestureState) => {} ### 基本用法 ```jsx - componentWillMount: function() { - this._panResponder = PanResponder.create({ +const ExampleComponent = () => { + const panResponder = React.useRef( + PanResponder.create({ // 要求成为响应者： onStartShouldSetPanResponder: (evt, gestureState) => true, - onStartShouldSetPanResponderCapture: (evt, gestureState) => true, + onStartShouldSetPanResponderCapture: (evt, gestureState) => + true, onMoveShouldSetPanResponder: (evt, gestureState) => true, - onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, + onMoveShouldSetPanResponderCapture: (evt, gestureState) => + true, onPanResponderGrant: (evt, gestureState) => { // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！ - - // gestureState.{x,y} 现在会被设置为0 + // gestureState.d{x,y} 现在会被设置为0 }, onPanResponderMove: (evt, gestureState) => { // 最近一次的移动距离为gestureState.move{X,Y} - // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y} }, - onPanResponderTerminationRequest: (evt, gestureState) => true, + onPanResponderTerminationRequest: (evt, gestureState) => + true, onPanResponderRelease: (evt, gestureState) => { // 用户放开了所有的触摸点，且此时视图已经成为了响应者。 // 一般来说这意味着一个手势操作已经成功完成。 @@ -75,14 +77,11 @@ onPanResponderMove: (event, gestureState) => {} // 默认返回true。目前暂时只支持android。 return true; }, - }); - }, + }), + ).current; - render: function() { - return ( - - ); - }, + return ; +}; ``` ## 示例 diff --git a/cnwebsite/versioned_docs/version-0.72/publishing.md b/cnwebsite/versioned_docs/version-0.72/publishing.md deleted file mode 100644 index 2e415aeca58..00000000000 --- a/cnwebsite/versioned_docs/version-0.72/publishing.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: publishing-forks -title: 发布自己定制的ReactNative包 ---- - -## TL;DR - -There is a docker image that helps you build the required Android sources without installing any additional tooling (other than [Docker](https://docs.docker.com/install/), which can be committed to a git branch as a fully functional React Native fork release. - -Run this from a fork of the React Native [repo](https://github.com/facebook/react-native). - -``` -git checkout -d release/my-react-native-release -docker run --rm --name rn-build -v $PWD:/pwd -w /pwd reactnativecommunity/react-native-android /bin/sh -c "./gradlew installArchives" -git add android --force -git commit -a -m 'my react native forked release' -git push -``` - -Install it in your app project package.json. - -``` -"dependencies": { - ... - "react-native": "myName/react-native#release/my-react-native-release" -} -``` - -## Rationale - -The recommended approach to working with React Native is to always update to the latest version. No support is provided on older versions and if you run into issues the contributors will always ask you to upgrade to the latest version before even looking at your particular issue. Sometimes, though, you are temporarily stuck on an older React Native version, but you require some changes from newer versions urgently (bugfixes) without having to do a full upgrade right now. This situation should be short lived by definition and once you have the time, the real solution is to upgrade to the latest version. - -With this goal of a shortlived fork of React Native in mind, you can publish your own version of React Native. The facebook/react-native repository contains all the dependencies required to be used directly as a git dependency, except for the Android React Native library binary (.aar). - -## Building - -This binary needs to become available in your project's `node_modules/react-native/android` folder or directly in your gradle dependency of your Android app. You can achieve this in one of two ways: Git dependency branch, Android binary dependency through Maven. - -To build the .aar React Native library, you can follow the steps to [build from source](building-from-source.md) first to install all required tooling. Then to build the actual library, you can run the following in the root of your react-native checkout: - -```$bash -./gradlew :ReactAndroid:installArchives --no-daemon -``` - -If you don't want to install the required toolchain for building from source, you can use a prebuilt docker image to create a react native binary; - -``` -docker run --rm --name rn-build -v $PWD:/pwd -w /pwd reactnativecommunity/react-native-android /bin/sh -c "./gradlew installArchives" -``` - -If you haven't used the Android NDK before or if you have a NDK version not exactly matching the required version for building React Native, this is the recommended approach. - -The resulting binary can be made available to app projects in one of the two ways described below. - -### Publishing to Maven/Nexus - -Upload the binaries from the `android` folder to maven and point your Android app project gradle dependency for React Native to your Maven/Nexus dependency. - -### Publishing to a git fork dependency - -Instead of uploading to Maven/Nexus, you can add the binaries built in the previous steps to git, by changing the .gitignore and committing the binaries to your forked branch. This allows you to make your fork into a functioning git dependency for React Native app projects. - -If you have changes that you want to actually merge to React Native, make them on another branch first and open a PR. To start making your dependency branch, make sure you are on a 'release/my-forked-release' branch, then merge any commits that you need from yourself or others into this branch. This release branch should never be merged into any other branch. - -```$bash -# create .aar, then: -git add android --force -git commit -m 'my release commit' -git push -``` - -Now you can use this branch as a git dependency in your app project, by pointing your package.json dependency to this branch: - -``` -"dependencies": { - ... - "react-native": "my-name/react-native#release/my-forked-release, - ... -} -``` - -No other modifications to your dependencies should be necessary for your native changes to be included in your project. diff --git a/cnwebsite/versioned_docs/version-0.72/react-18-and-react-native.md b/cnwebsite/versioned_docs/version-0.72/react-18-and-react-native.md index 5c733e9e765..87fc8e7423f 100644 --- a/cnwebsite/versioned_docs/version-0.72/react-18-and-react-native.md +++ b/cnwebsite/versioned_docs/version-0.72/react-18-and-react-native.md @@ -8,9 +8,9 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -This page describes how to use React 18 with React Native using the React Native's New Architecture. +这个页面描述了如何在 React Native 的新架构中启用 React 18 版本。 -> **简而言之：** 第一个和 React 18 兼容的 React Native 版本是 **0.69.0**。但要想完整享受到 React 18 中的新特性（如自动批量变更状态， `startTransition`以及`useDeferredValue`等），你必须在应用中启用新架构。 +> **简而言之：** 第一个和 React 18 兼容的 React Native 版本是 **0.69.0**。但要想完整享受到 React 18 中的新特性（如自动批量变更状态，`startTransition`以及`useDeferredValue`等），你必须在应用中启用新架构。 ## React 18 与 React Native 的新架构 @@ -27,25 +27,25 @@ React 18 引入了 [多个全新特性](https://reactjs.org/blog/2022/03/29/reac - `useDeferredValue` - 完整的 Suspense 特性支持 -The concurrent features in React 18 are built on top of the new concurrent rendering engine. Concurrent rendering is a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. +React 18 中的并发功能是建立在新的并发渲染引擎之上的。并发渲染是一种新的幕后机制，使得 React 能够同时准备多个版本的用户界面。 -Previous versions of React Native built on the old architecture **cannot** support concurrent rendering or concurrent features. This is because the old architecture relied on mutating the native trees, which doesn’t allow for React to prepare multiple versions of the tree at the same time. +之前的 React Native 版本基于旧架构，**无法**支持并发渲染或并发功能。这是因为旧架构依赖于对原生树进行变异，这不允许 React 同时准备多个树版本。 -Fortunately, the New Architecture was written bottom-up with concurrent rendering in mind, and is fully compatible with React 18. This means, in order to upgrade to React 18 in your React Native app, your application needs to be migrated to the React Native's New Architecture including Fabric and TurboModules. +幸运的是，新架构从底层开始编写时就考虑了并发渲染，并且与 React 18 完全兼容。这意味着要将您的 React Native 应用程序升级到 React 18，您需要将应用程序迁移到包括 Fabric Native 组件和 Turbo Native 模块在内的 React Native 新架构中。 -## React 18 默认启用 +## 默认启用 React 18 -从 React Native 0.69 开始， React 18 会在启用新架构的同时**默认启用**。 +从 React Native 0.69 开始，在启用新架构时，默认情况下会启用 React 18。 -The means you’re able to use the new features in React 18 as soon as you migrate. Since the new concurrent features are opt-in by using features like `startTransition` or `Suspense`, we expect React 18 to work out-of-the-box with minimal changes for users who migrate to the New Architecture or create a new app with the New Architecture enabled. +这意味着只要您进行迁移，即可立即使用 React 18 中的新功能。由于通过使用`startTransition`或`Suspense`等特性来选择加入并发特性，我们预计对于迁移到新架构或创建启用了新架构的新应用程序用户而言，React 18 将可以直接使用，并且只需进行最少量更改即可。 -However, if you do hit any issues, we provide an option to opt-out of the new root in React 18. Opt-ing out means your app will run in React 17 mode, and none of the features of React 18 will be accessible. +但如果遇到任何问题，我们提供了一个选择来退出 React 18 的新根。退出意味着您的应用程序将以 React 17 模式运行，并且无法访问 React 18 的任何功能。 -### 在 Android 上单独禁用 React 18 +### 在 Android 上禁用 React 18 -On Android, you will be able to override the `isConcurrentRootEnabled` in your ActivityDelegate (in the `MainActivity` file), and enable/disable Concurrent React. +在 Android 上，您可以在 ActivityDelegate（位于`MainActivity`文件中）中覆盖 `isConcurrentRootEnabled` ，从而启用/禁用并发 React。 - + @@ -98,16 +98,16 @@ class MainActivity : ReactActivity() { -### 在 iOS 上单独禁用 React 18 +### 在 iOS 上禁用 React 18 -On iOS, you'll have access to the `concurrentRootEnabled` method on your `AppDelegate.mm` file. You should change the returned value to `false` (or `NO`) to disable the feature. +在 iOS 上，您可以在`AppDelegate.mm`文件中访问`concurrentRootEnabled`方法。您应该将返回值更改为`false`(或者 `NO`)以禁用此功能。 ```objc /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. /// /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). -/// @return: `true` if the `concurrentRoot` feture is enabled. Otherwise, it returns `false`. +/// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`. - (BOOL)concurrentRootEnabled { // Switch this bool to turn on and off the concurrent root @@ -115,8 +115,8 @@ On iOS, you'll have access to the `concurrentRootEnabled` method on your `AppDel } ``` -### 使用 React Native 0.69 但没有启用新架构 +### 尚未迁移到新架构的 React Native 0.69 用户 -注意：使用 React Native 0.69 但仍然停留在旧架构上的用户会继续使用 React 17，即便你在`package.json`中指定安装了 React 18. +注意：如果您使用的是 React Native 0.69 版本，但仍然使用旧架构，则即使在`package.json`文件中安装了 React 18，您的应用程序仍将继续使用 React 17 模式。 -此时覆盖应用中的`isConcurrentRootEnabled`方法不会生效。 +覆盖`isConcurrentRootEnabled`方法对您的应用程序没有任何影响。 diff --git a/cnwebsite/versioned_docs/version-0.72/usecolorscheme.md b/cnwebsite/versioned_docs/version-0.72/usecolorscheme.md index 3b2c59077b3..66fdd5cc17c 100644 --- a/cnwebsite/versioned_docs/version-0.72/usecolorscheme.md +++ b/cnwebsite/versioned_docs/version-0.72/usecolorscheme.md @@ -4,16 +4,16 @@ title: useColorScheme --- ```jsx -import { useColorScheme } from 'react-native'; +import {useColorScheme} from 'react-native'; ``` -The `useColorScheme` React hook provides and subscribes to color scheme updates from the [`Appearance`](appearance) module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle). +`useColorScheme` 这个 React hook 提供并订阅来自 Appearance 模块的颜色方案更新。返回值表示当前用户首选的颜色方案。该值可以稍后通过直接用户动作（例如，设备设置中的主题选择）或根据时间表（例如，遵循白天/夜晚周期的亮主题和暗主题）来更新。 -### Supported color schemes +### 支持的颜色方案 -- `"light"`: The user prefers a light color theme. -- `"dark"`: The user prefers a dark color theme. -- `null`: The user has not indicated a preferred color theme. +- `"light"`: 用户倾向于使用浅色主题。 +- `"dark"`: 用户倾向于使用深色主题。 +- `null`: 用户未指定首选颜色方案。 --- @@ -43,4 +43,4 @@ const styles = StyleSheet.create({ export default App; ``` -You can find a complete example that demonstrates the use of this hook alongside a React context to add support for light and dark themes to your application in [`AppearanceExample.js`](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/Appearance/AppearanceExample.js). \ No newline at end of file +您可以在[`AppearanceExample.js`](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/Appearance/AppearanceExample.js)中找到一个完整的示例，该示例演示了如何使用此钩子以及 React 上下文来为您的应用程序添加浅色和深色主题支持。