From 0adb73f15c9d228a8d17eb30f36a458982f4a616 Mon Sep 17 00:00:00 2001 From: xiaohaoyu123 Date: Mon, 17 Jun 2024 09:28:33 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#I9U1ET]=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E4=BF=AE=E6=94=B9react-navigation=E7=9A=84=E6=8C=87?= =?UTF-8?q?=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/flipper-plugin-react-navigation.md | 62 ++++++++ zh-cn/react-navigation-bottom-tabs.md | 68 +++++++- zh-cn/react-navigation-core.md | 130 ++++++++++++++++ zh-cn/react-navigation-devtools.md | 83 ++++++++++ zh-cn/react-navigation-elements.md | 138 +++++++++++------ .../react-navigation-material-bottom-tabs.md | 140 +++++++++++++++++ zh-cn/react-navigation-material-top-tabs.md | 137 ++++++++++++++++ zh-cn/react-navigation-native.md | 72 ++++++++- zh-cn/react-navigation-routers.md | 146 ++++++++++++++++++ zh-cn/react-navigation-stack.md | 88 +++++++++-- 10 files changed, 993 insertions(+), 71 deletions(-) create mode 100644 zh-cn/flipper-plugin-react-navigation.md create mode 100644 zh-cn/react-navigation-core.md create mode 100644 zh-cn/react-navigation-devtools.md create mode 100644 zh-cn/react-navigation-material-bottom-tabs.md create mode 100644 zh-cn/react-navigation-material-top-tabs.md create mode 100644 zh-cn/react-navigation-routers.md diff --git a/zh-cn/flipper-plugin-react-navigation.md b/zh-cn/flipper-plugin-react-navigation.md new file mode 100644 index 00000000..b59a5c59 --- /dev/null +++ b/zh-cn/flipper-plugin-react-navigation.md @@ -0,0 +1,62 @@ +> 模板版本：v0.2.2 + +

+

flipper-plugin-react-navigation

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install flipper-plugin-react-navigation@6.0.26 +``` + +#### **yarn** + +```bash +yarn add flipper-plugin-react-navigation@6.0.26 +``` + + +下面的代码展示了这个库的基本使用场景，更多详情请参考[使用教程](https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation)： + +编辑 `~/.flipper/config.json` (当 flipper 处于关闭状态) +```js +{ + "pluginPaths": ["/path/to/react-navigation/packages"] +} +``` +然后在 `flipper-plugin-react-navigation` 里运行 `yarn watch` + + +## 约束与限制 +此库是flipper插件库，需配合flipper App使用。使用方法请参考[使用教程](https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation) + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.20-CAPI; SDK：HarmonyOS NEXT Developer Beta1 B.0.18; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/flipper-plugin-react-navigation/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/react-navigation-bottom-tabs.md b/zh-cn/react-navigation-bottom-tabs.md index eb5d24a4..51ddd7dd 100644 --- a/zh-cn/react-navigation-bottom-tabs.md +++ b/zh-cn/react-navigation-bottom-tabs.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.3 +> 模板版本：v0.2.2

@react-navigation/bottom-tabs

@@ -12,33 +12,91 @@

+> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) + ## 安装与使用 进入到工程目录并输入以下命令： + #### **npm** ```bash -npm install @react-navigation/bottom-tabs@6.5.11 +npm install @react-navigation/bottom-tabs@6.5.20 ``` #### **yarn** ```bash -yarn add @react-navigation/bottom-tabs@6.5.11 +yarn add @react-navigation/bottom-tabs@6.5.20 ``` -## 兼容性 +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import * as React from 'react'; +import { Text, View } from 'react-native'; +import { NavigationContainer } from '@react-navigation/native'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; + +function HomeScreen() { + return ( + + Home! + + ); +} + +function SettingsScreen() { + return ( + + Settings! + + ); +} + +const Tab = createBottomTabNavigator(); + +export function NavigationBottomTabs() { + return ( + + + + + + + ); +} +``` + +## Link + +本库依赖以下三方库，请查看对应文档： ++ [@react-navigation/native](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-navigation-native.md) ++ [@react-native-oh-tpl/elements](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-navigation-elements.md) ++ [@react-native-oh-library/react-native-safe-area-context](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-safe-area-context.md) + +本库鸿蒙侧实现依赖@react-native-oh-library/react-native-safe-area-context 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照[@react-native-oh-library/react-native-safe-area-context 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-safe-area-context.md#link)进行引入 + + +## 约束与限制 + +### 兼容性 本文档内容基于以下版本验证通过： 1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; 2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; - +3. RNOH：0.72.20-CAPI; SDK：HarmonyOS NEXT Developer Beta1 B.0.18; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + ## 方法 | Name | Description | Type | Required | Platform | HarmonyOS Support | diff --git a/zh-cn/react-navigation-core.md b/zh-cn/react-navigation-core.md new file mode 100644 index 00000000..2fd6ad71 --- /dev/null +++ b/zh-cn/react-navigation-core.md @@ -0,0 +1,130 @@ +> 模板版本：v0.2.2 + +

+

@react-navigation/core

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/core) + +## 安装与使用 + +进入到工程目录并输入以下命令： +> [!TIP] # 处替换为 tgz 包的路径 + + +#### **npm** + +```bash +npm install @react-navigation/core@6.4.16 +``` + +#### **yarn** + +```bash +yarn add @react-navigation/core@6.4.16 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import * as React from 'react'; +import { Button, View, Text } from 'react-native'; +import { NavigationContainer } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; +import { useNavigation } from '@react-navigation/core'; + +function MyBackButton() { + const navigation = useNavigation(); + + return ( +