# ty-react-navigation-native

**Repository Path**: kunyuan-hongke/ty-react-navigation-native

## Basic Information

- **Project Name**: ty-react-navigation-native
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-03
- **Last Updated**: 2025-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 模板版本：v0.2.2
<p align="center">
  <h1 align="center"> <code>@react-navigation/native</code> </h1>
</p>
<p align="center">
    <a href="https://github.com/react-navigation/react-navigation/tree/6.x/packages/native">
        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20web%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
    </a>
    <a href="https://github.com/react-navigation/react-navigation/blob/6.x/packages/native/LICENSE">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
    </a>
</p>

> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native)


## 安装与使用

进入到工程目录并输入以下命令：
<!-- tabs:start -->

#### **npm**

```bash
npm install @tuya-oh/react-navigation-native
```
#### **yarn**

```bash
yarn add @tuya-oh/react-navigation-native
```


<!-- tabs:end -->

下面的代码展示了这个库的基本使用场景：

> [!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';

const Tab = createBottomTabNavigator();

function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home screen</Text>
        </View>
    );
}

function DetailsScreen({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Details!</Text>
        </View>
    );
}

export default function App() {
    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name="Home" component={HomeScreen} />
                <Tab.Screen name="Details" component={DetailsScreen} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

export {App}
```

## 约束与限制
### 兼容性

本文档内容基于以下版本验证通过：

1. RNOH：0.72.28; SDK：5.0.2.126 ; IDE：DevEco Studio 5.0.7.210; ROM：5.0.0.135;

## 属性

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

| Name                      | Description                                                  | Type       | Required | Platform    | HarmonyOS Support |
| ------------------------- | ------------------------------------------------------------ | ---------- | -------- | ----------- | ----------------- |
| `theme`                   | 设置主题                                                     | `Object`   | 否(no)   | All         | 是(yes)           |
| `initialState`            | 用于为导航器设置初始状态，默认展示哪个导航                   | `Object`   | 否(no)   | All         | 是(yes)           |
| `onReady`                 | 在导航树挂载后调用的回调                                     | `Function` | 否(no)   | All         | 是(yes)           |
| `onStateChange`           | 当导航状态发生变化时，比如用户进行页面跳转、返回等操作，这个回调函数就会被触发 | `Function` | 否(no)   | All         | 是(yes)           |
| `linking`                 | 用于配置导航器与外部链接的交互                               | `Object`   | 否(no)   | All         | 是(yes)           |
| `fallback`                | 用于处理导航初始化期间的过渡状态                             | `Node`     | 否(no)   | All         | 是(yes)           |
| `useScrollToTop()`        | 实现点击底部导航标签时自动滚动到列表顶部                     | `Function` | 否(no)   | All         | 是(yes)           |
| `useTheme()`              | 动态获取全局主题配置 的核心钩子，它允许组件访问和响应导航系统的主题变量 | `Function` | 否(no)   | All         | 是(yes)           |
| `useNavigation()`         | 用于在组件内部获取导航对象                                   | `Function` | 否(no)   | All         | 是(yes)           |
| `useRoute()`              | 在组件内部访问当前路由的信息，可以获取当前路由的名称、参数等信息 | `Function` | 否(no)   | All         | 是(yes)           |
| `useNavigationState()`    | 访问当前导航器的状态。导航器状态包含了很多有用的信息，比如当前的路由栈、活动的路由 | `Function` | 否(no)   | All         | 是(yes)           |
| `useFocusEffect()`        | 在屏幕聚焦时执行副作用操作                                   | `Function` | 否(no)   | All         | 是(yes)           |
| `useIsFocused()`          | 一个钩子函数 判断当前屏幕是否处于聚焦状态，当屏幕被聚焦（也就是显示在用户面前）时，该钩子会返回 true；当屏幕失去焦点（被其他屏幕覆盖或者导航到其他屏幕）时，会返回 false | `Function` | 否(no)   | All         | 是(yes)           |
| `useLinkTo()`             | 用于在组件内部创建一个可以触发导航链接的函数 可以方便地实现通过链接形式来导航到应用内的不同屏幕 | `Function` | 否(no)   | All         | 是(yes)           |
| `useLinkProps()`          | 自定义链接组件，让我们根据链接选项使用路径而不是屏幕名称导航到屏幕 | `Function` | 否(no)   | All         | 是(yes)           |
| `useLinkBuilder()`        | 创建一个用于构建导航链接的函数                               | `Function` | 否(no)   | All         | 是(yes)           |
| `CommonActions.navigate`  | 导航跳转                                                     | `Function` | 否(no)   | All         | 是(yes)           |
| `CommonActions.reset`     | 方法用于重置导航栈，它会将当前的导航状态完全替换为指定的导航状态 | `Function` | 否(no)   | All         | 是(yes)           |
| `CommonActions.goBack`    | 实现返回上一屏幕的功能                                       | `Function` | 否(no)   | All         | 是(yes)           |
| `CommonActions.setParams` | 用于动态地更新当前屏幕的路由参数                             | `Function` | 否(no)   | All         | 是(yes)           |
| `StackActions.replace`    | 路由替换，跳转后不会有历史记录                               | `Function` | 否(no)   | All         | 是(yes)           |
| `StackActions push`       | 用于在导航栈的顶部添加一个新的路由                           | `Function` | 否(no)   | All         | 是(yes)           |
| `StackActions pop`        | 用于控制导航堆栈回退操作                                     | `Function` | 否(no)   | All         | 是(yes)           |
| `StackActions.popToTop`   | 立即跳转回当前导航堆栈的根页面（即第一个页面）               | `Function` | 否(no)   | All         | 是(yes)           |
| `NavigationContext`       | 上下文对象，它提供了访问导航器状态和方法的途径，通过NavigationContext可以在组件树的任意层级获取导航对象，而不需要通过 props 层层传递 | `Function` | 否(no)   | All         | 是(yes)           |
| `Link to`                 | Link组件是一个用于创建可导航链接的组件,to属性则是用来指定链接的目标路由 | `String`   | 否(no)   | All         | 是(yes)           |
| `Link action`             | 用于自定义导航动作 如传递额外的参数、执行导航前的某些操作    | `Object`   | 否(no)   | All         | 是(yes)           |
| `Link onPress`            | 用于指定当用户点击该 Link 时要执行的回调函数                 | `Function` | 否(no)   | All         | 是(yes)           |
| `Link disabled`           | 用于控制 Link 是否可点击                                     | `Boolean`  | 否(no)   | All         | 是(yes)           |
| `useLinking()`            | 处理深度链接,深度链接允许外部应用或网页通过特定的 URL 来打开你的应用，并导航到应用内的特定屏幕，同时还能传递参数 | Function   | 否(no)   | Android/IOS | 否(no)            |

## 遗留问题

## 其他


## 开源协议

本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/native/LICENSE) ，请自由地享受和参与开源。