fix

reactnativecn · Aug 30, 2023 · 19bed75 · 19bed75
1 parent f0efda2
commit 19bed75
Show file tree

Hide file tree

Showing 16 changed files with 243 additions and 675 deletions.
diff --git a/cndocs/building-from-source.md b/cndocs/building-from-source.md
diff --git 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,15 +51,15 @@ LogBox.ignoreAllLogs();
 
 ### 语法错误
 
-语法错误将自动打开一个全屏的LogBox错误，显示出语法错误的源代码。这个错误是无法取消的，因为它代表了必须在继续使用应用程序之前修复的无效JavaScript执行。要解除这些错误，请修复语法错误并保存以自动解除（启用快速刷新）或按下cmd+r重新加载（禁用快速刷新）。
+语法错误将自动打开一个全屏的 LogBox 错误，显示出语法错误的源代码。这个错误是无法取消的，因为它代表了必须在继续使用应用程序之前修复的无效 JavaScript 执行。要解除这些错误，请修复语法错误并保存以自动解除（启用快速刷新）或按下 cmd+r 重新加载（禁用快速刷新）。
 
 ## Chrome 开发者工具
 
 在开发者菜单中选择"Debug JS Remotely"选项，即可以开始在 Chrome 中调试 JavaScript 代码。点击这个选项的同时会自动打开调试页面 <http://localhost:8081/debugger-ui>.(如果地址栏打开的是 ip 地址，则请自行改为 localhost)
 
 在 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();
 </TabItem>
 <TabItem value="android">
 
-在用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 地址相匹配。
 
 </TabItem>
 </Tabs>
 
 :::note 注意
-如果你遇到任何问题，可能是因为你的Chrome扩展与调试器产生了意外的交互。尝试禁用所有扩展，并逐个重新启用它们，直到找到有问题的扩展。
+如果你遇到任何问题，可能是因为你的 Chrome 扩展与调试器产生了意外的交互。尝试禁用所有扩展，并逐个重新启用它们，直到找到有问题的扩展。
 :::
 
 <details>

diff --git 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
@@ -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 `<ImageBackground>` component, which has the same props as `<Image>`, and add whatever children to it you would like to layer on top of it.
+对于熟悉 Web 开发的开发人员来说，`background-image`是一个常见的功能请求。为了处理这种情况，您可以使用`<ImageBackground>`组件，它具有与`<Image>`相同的属性，并且可以添加任何子元素以覆盖在其上面。
 
-You might not want to use `<ImageBackground>` in some cases, since the implementation is very simple. Refer to `<ImageBackground>`'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.
+在某些情况下，您可能不想使用`<ImageBackground>`，因为其实现比较基础。请参考`<ImageBackground>`的[源代码](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 = () => (
   <View style={styles.container}>
-    <ImageBackground source={image} style={styles.image}>
+    <ImageBackground source={image} resizeMode="cover" style={styles.image}>
       <Text style={styles.text}>Inside</Text>
     </ImageBackground>
   </View>
@@ -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) |