模板版本：v0.2.2

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@react-navigation/native Releases，并下载适用版本的 tgz 包。

进入到工程目录并输入以下命令：

npm

npm install @tuya-oh/react-navigation-native@file:#

yarn

yarn add @tuya-oh/react-navigation-native@file:#

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

[!WARNING] 使用时 import 的库名不变。

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) | All | 是(yes) |

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。