0.78

Author: sunnylqm

cndocs/keyboard.md

@@ -12,10 +12,11 @@ title: Keyboard
 
 ```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
 import React, {useState, useEffect} from 'react';
-import {Keyboard, Text, TextInput, StyleSheet, View} from 'react-native';
+import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const Example = () => {
-  const [keyboardStatus, setKeyboardStatus] = useState('');
+  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
 
   useEffect(() => {
     const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
@@ -32,14 +33,16 @@ const Example = () => {
   }, []);
 
   return (
-    <View style={style.container}>
-      <TextInput
-        style={style.input}
-        placeholder="Click here…"
-        onSubmitEditing={Keyboard.dismiss}
-      />
-      <Text style={style.status}>{keyboardStatus}</Text>
-    </View>
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TextInput
+          style={style.input}
+          placeholder="Click here…"
+          onSubmitEditing={Keyboard.dismiss}
+        />
+        <Text style={style.status}>{keyboardStatus}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
   );
 };
 
@@ -54,7 +57,7 @@ const style = StyleSheet.create({
     borderRadius: 4,
   },
   status: {
-    padding: 10,
+    padding: 16,
     textAlign: 'center',
   },
 });
@@ -119,7 +122,7 @@ static dismiss()
 static scheduleLayoutAnimation(event: KeyboardEvent);
 ```
 
-用于将TextInput（或其他键盘附属视图）的大小或位置变化与键盘移动同步。
+用于将 TextInput（或其他键盘附属视图）的大小或位置变化与键盘移动同步。
 
 ---
 

cndocs/keyboardavoidingview.md

@@ -84,7 +84,7 @@ Specify how to react to the presence of the keyboard.
 
 ### `contentContainerStyle`
 
-如果设定 behavior 值为'position'，则会生成一个 View 作为内容容器。此属性用于指定此内容容器的样式。
+如果设定 behavior 值为`'position'`，则会生成一个 View 作为内容容器。此属性用于指定此内容容器的样式。
 
 | 类型                              |
 | --------------------------------- |

cndocs/layout-props.md

@@ -495,6 +495,16 @@ borderBottomWidth 与 CSS 中的 border-bottom-width 属性作用相同。详情
 
 ---
 
+### `boxSizing`
+
+`boxSizing` 定义了元素的尺寸相关的属性 （如`width`, `height`, `minWidth`, `minHeight`等）的计算方式。如果 `boxSizing` 是 `border-box`，这些尺寸会应用到元素的边框盒。如果它是 `content-box`，这些尺寸会应用到元素的内容盒。默认值是 `border-box`。有关更多信息，请参阅 [web 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)。
+
+| Type                              | Required |
+| --------------------------------- | -------- |
+| enum('border-box', 'content-box') | No       |
+
+---
+
 ### `columnGap`
 
 `columnGap` 的作用类似于 CSS 中的 `column-gap`。在 React Native 中仅支持像素单位。有关更多详细信息，请查看 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap。
@@ -905,17 +915,21 @@ flexGrow 接受任意大于等于 0 的浮点数,默认值为 0。容器中剩
 
 ### `position`
 
-在 React Native 中，`position`与常规 CSS 类似，但默认情况下所有元素都设置为`relative`，因此`absolute`定位始终是相对于父元素的。
+在 React Native 中，`position`与 [常规 CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position) 类似，但默认情况下所有元素都设置为`relative`，因此`absolute`定位始终是相对于父元素的。
 
-如果您想要使用特定数量的逻辑像素相对于其父元素来定位子元素，请将子元素设置为具有`absolute`位置。
+`relative` 会根据布局的正常流来定位元素。内边距（`top`, `bottom`, `left`, `right`）会相对于这个布局进行偏移。
 
-如果您想要将子元素相对于不是其父元素的对象进行定位，请不要为此使用样式。请使用组件树。
+`absolute` 会从布局的正常流中移除元素。内边距（`top`, `bottom`, `left`, `right`）会相对于它的[包含块](./flexbox.md#the-containing-block)进行偏移。
 
-有关 React Native 和 CSS 之间`position`差异的更多详细信息，请参见 https://github.com/facebook/yoga
+`static` 会根据布局的正常流来定位元素。内边距（`top`, `bottom`, `left`, `right`）不会产生任何效果。
 
-| 类型                         | 必需 |
-| ---------------------------- | ---- |
-| enum('absolute', 'relative') | 否   |
+`static` 元素不会形成包含块来容纳绝对定位的子元素。
+
+有关更多信息，请参阅 [Flexbox 布局文档](./flexbox.md#position)。此外，有关 React Native 和 CSS 之间`position`差异的更多详细信息，请参见 [Yoga 布局引擎的文档](https://www.yogalayout.dev/docs/styling/position)。
+
+| 类型                                   | 必需 |
+| -------------------------------------- | ---- |
+| enum('absolute', 'relative', 'static') | 否   |
 
 ---
 

cndocs/libraries.md

@@ -12,8 +12,6 @@ React Native 提供了一系列内置的[核心组件和 API](components-and-api
 
 ## 选择一个包管理器
 
-React Native libraries are typically installed from the [npm registry](https://www.npmjs.com/) using a Node.js package manager such as [npm CLI](https://docs.npmjs.com/cli/npm) or [Yarn 经典版(v1)](https://classic.yarnpkg.com/en/).
-
 通常，React Native 库是从 [npm 源](https://www.npmjs.com/) 安装的，使用诸如 [npm CLI](https://docs.npmjs.com/cli/npm) 或 [Yarn 经典版(v1)](https://classic.yarnpkg.com/en/) 的 Node.js 包管理器。
 
 如果你的电脑上安装了 Node.js，那么你已经有了 npm CLI。一些开发者更喜欢使用 Yarn v1，因为它具有略快的安装时间和额外的高级功能，如 workspace。这两种工具都可以很好地支持 React Native。为了简化解释，在本指南的其余部分我们将假设使用 npm。

cndocs/linking-libraries-ios.md

@@ -19,13 +19,14 @@ _我们随着 React Native 发布的所有库都在仓库中的`Libraries`文件
 
 ```bash
 $ npm install 某个带有原生依赖的库
+$ npx pod-install
 ```
 
 :::info 提示
-React Native will link your libs based on `dependencies` and `devDependencies` in your `package.json` file.
+React Native 只会读取`package.json`中列出的`dependencies` 和 `devDependencies`来进行自动链接。
 :::
 
-That's it! Next time you build your app the native code will be linked thanks to the [autolinking](https://github.com/react-native-community/cli/blob/main/docs/autolinking.md) mechanism.
+这样就可以了！由于集成了 [autolinking](https://github.com/react-native-community/cli/blob/main/docs/autolinking.md) 机制，下次你构建你的应用时原生代码就会自动链接了。
 
 ### 手动链接
 

cndocs/the-new-architecture/layout-measurements.md

@@ -1,12 +1,12 @@
-# Measuring the Layout
+# 测量布局
 
-Sometimes, you need to measure the current layout to apply some changes to the overall layout or to make decisions and call some specific logic.
+有时，您需要测量当前布局以应用某些更改或做出决策并调用某些特定逻辑。
 
-React Native provides some native methods to know what are the measurements of the views.
+React Native 提供了一些原生方法来了解视图的测量值。
 
-The best way to invoke those methods is in a `useLayoutEffect` hook: this will give you the most recent values for those measurements and it will let you apply changes in the same frame when the measurements are computed.
+最推荐的方法是在 `useLayoutEffect` 钩子中调用这些方法：这将为您提供最新的测量值，并且当测量值计算完成后，您可以在同一帧中应用更改。
 
-Typical code will look like this:
+典型的代码如下所示：
 
 ```tsx
 function AComponent(children) {
@@ -26,28 +26,28 @@ function AComponent(children) {
 }
 ```
 
-:::note
-The methods described here are available on most of the default components provided by React Native. However, they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
+:::note 注意
+这里描述的方法在大多数默认组件中都可用。然而，它们在不是直接由原生视图支持的复合组件中是不可用的。这通常包括您在应用中自定义的大多数组件。
 :::
 
 ## measure(callback)
 
-Determines the location on screen (`x` and `y`), `width`, and `height` in the viewport of the given view. Returns the values via an async callback. If successful, the callback will be called with the following arguments:
+确定视图在屏幕上的位置 (`x` 和 `y`)、`width` 和 `height`。通过异步回调返回这些值。如果成功，回调将使用以下参数调用：
 
-- `x`: the `x` coordinate of the origin (top-left corner) of the measured view in the viewport.
-- `y`: the `y` coordinate of the origin (top-left corner) of the measured view in the viewport.
-- `width`: the `width` of the view.
-- `height`: the `height` of the view.
-- `pageX`: the `x` coordinate of the view in the viewport (typically the whole screen).
-- `pageY`: the `y` coordinate of the view in the viewport (typically the whole screen).
+- `x`: 视图在视口中的 `x` 坐标（左上角）。
+- `y`: 视图在视口中的 `y` 坐标（左上角）。
+- `width`: 视图的 `width`。
+- `height`: 视图的 `height`。
+- `pageX`: 视图在视口中的 `x` 坐标（通常是整个屏幕）。
+- `pageY`: 视图在视口中的 `y` 坐标（通常是整个屏幕）。
 
-Also the `width` and `height` returned by `measure()` are the `width` and `height` of the component in the viewport.
+`measure()` 返回的 `width` 和 `height` 是视图在视口中的 `width` 和 `height`。
 
 ## measureInWindow(callback)
 
-Determines the location (`x` and `y`) of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
+确定视图在窗口中的位置 (`x` 和 `y`) 并返回这些值通过异步回调。如果 React 根视图嵌套在另一个原生视图中，这将为您提供绝对坐标。如果成功，回调将使用以下参数调用：
 
-- `x`: the `x` coordinate of the view in the current window.
-- `y`: the `y` coordinate of the view in the current window.
-- `width`: the `width` of the view.
-- `height`: the `height` of the view.
+- `x`: 视图在当前窗口中的 `x` 坐标。
+- `y`: 视图在当前窗口中的 `y` 坐标。
+- `width`: 视图的 `width`。
+- `height`: 视图的 `height`。

cnwebsite/versioned_docs/version-0.78/_fabric-native-components.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import IOSContent from "./fabric-native-components-ios.md";
+import AndroidContent from "./fabric-native-components-android.md";
+
+export function FabricNativeComponentsIOS() {
+  return <IOSContent />;
+}
+
+export function FabricNativeComponentsAndroid() {
+  return <AndroidContent />;
+}