代码拉取完成，页面将自动刷新
模板版本：v0.2.2
@react-navigation/native
[!TIP] Github 地址
进入到工程目录并输入以下命令：
npm install @tuya-oh/react-navigation-native
yarn add @tuya-oh/react-navigation-native
下面的代码展示了这个库的基本使用场景：
[!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}
本文档内容基于以下版本验证通过：
[!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) ，请自由地享受和参与开源。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手