diff --git a/zh-cn/flipper-plugin-react-navigation.md b/zh-cn/flipper-plugin-react-navigation.md new file mode 100644 index 0000000000000000000000000000000000000000..5d7d30051b314b7a01463580e7864d2e377bbce7 --- /dev/null +++ b/zh-cn/flipper-plugin-react-navigation.md @@ -0,0 +1,60 @@ +> 模板版本：v0.2.1 + +

+

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 +``` + +此库是flipper插件库，需配合flipper App使用。下面的代码展示了这个库的基本使用场景，更多详情请参考[使用教程](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` + + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.20; 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 eb5d24a401f4408b330729ca94c99c7ff1e14e8d..21d79890341f8f018e3a9f379f2443d8022dec9d 100644 --- a/zh-cn/react-navigation-bottom-tabs.md +++ b/zh-cn/react-navigation-bottom-tabs.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.3 +> 模板版本：v2.1.0

@react-navigation/bottom-tabs

@@ -12,33 +12,94 @@

+> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) + ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/elements Releases](https://github.com/react-native-oh-library/react-navigation/releases)、[@react-native-oh-library/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases)，并下载react-native-safe-area-context适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： +> [!TIP] # 处替换为 tgz 包的路径 + #### **npm** ```bash -npm install @react-navigation/bottom-tabs@6.5.11 +npm install @react-navigation/bottom-tabs@6.5.20 +npm install @react-native-oh-tpl/elements@file:# +npm install @react-native-oh-tpl/react-native-safe-area-context@file:# ``` #### **yarn** ```bash -yarn add @react-navigation/bottom-tabs@6.5.11 +yarn add @react-navigation/bottom-tabs@6.5.20 +yarn add @react-native-oh-tpl/elements@file:# +yarn add @react-native-oh-tpl/react-native-safe-area-context@file:# ``` -## 兼容性 +下面的代码展示了这个库的基本使用场景： + +> [!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-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; 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 0000000000000000000000000000000000000000..e0d2f0a6cd9ce7cc955e39b926727b23d095bba9 --- /dev/null +++ b/zh-cn/react-navigation-core.md @@ -0,0 +1,131 @@ +> 模板版本：v0.2.1 + +

+

@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 +``` + +[!TIP] 如果要体验全部demo效果，还需要安装以下依赖，[@react-native-oh-tpl/react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md)和[@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)需要进行额外的配置，详情请去对应的文档查看： +```bash +npm install @react-navigation/native@6.1.17 +npm install @react-navigation/stack@6.3.29 +npm install @react-native-oh-tpl/react-native-gesture-handler@file:# +npm install @react-native-oh-tpl/react-native-safe-area-context@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!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 ( +