react native使用TS实现路由

一、入口文件app.jsx的配置

       入口文件最好还是要保留jsx

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from "./src/views/RootNavigation";

const App = () => {
    return(
        <NavigationContainer ref={navigationRef}>
           <StackRouter />
        </NavigationContainer>
    )
}

二、HomeScreen自定义你的tabbar导航

一般情况下项目里都是自定义的tababr,每个项目不一样,我这里就不过多展示

三、在应用的任何地方使用的导航功能

import { createNavigationContainerRef } from "@react-navigation/native";
export const navigationRef = createNavigationContainerRef();
export function navigate(name, params) {
    if (navigationRef.isReady()) {
        navigationRef.navigate(name, params);
    }
}

四、配置router.tsx和types.tsx

        router.tsx

 首先tababr页面可以用const的方式引入,其他页面可以用lazy的方式懒加载引入

核心代码

import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function StackRouter() {
  return (
   //示例
    <Stack.Navigator
      initialRouteName="HomeScreen"
      screenOptions={{ headerShown: false }}>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
    </Stack.Navigator>
)}

types.tsx

核心代码

import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native';

export type RootStackParamList = {
    HomeScreen: undefined;
    Search: undefined;
    NpcMessage: undefined;
    Interactive: undefined;
    Example: { data: Array<string> }; //示例
    // 新添加的路由及其参数也应该在这里定义
};

//需要用参数的时候需要导出一个 RouteProp
//需要用到页面跳转的时候,需要导出一个StackNavigationProp
//如果两者都需要,就需要导出两个
//import { useNavigation ,useRoute } from '@react-navigation/native'; 目标页面useNavigation是导航,useRoute是route

//定义Interactive页面路由跳转
export type InteractiveNavigationProp = StackNavigationProp<RootStackParamList, 'Interactive'>;
export type InteractiveRouteProp = StackNavigationProp<RootStackParamList, 'Interactive'>;
// 定义Example页面的路由参数类型
export type ExampleRouteProp = RouteProp<RootStackParamList, 'Example'>;
// 更多类型定义...

五、页面中使用

import { useNavigation, useRoute } from '@react-navigation/native';
import { InteractiveNavigationProp,InteractiveRouteProp } from '../../router/types'


const Interactive = () => {
    
    const navigation = useNavigation<InteractiveNavigationProp>();
    const router = useRoute<InteractiveRouteProp>


}

export default Interactive;

原本我们项目是js,由于最近在学TS,就在项目上慢慢局部引入TS,如果有问题或者建议,欢迎提问。

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native 中常用的路由库有 React Navigation 和 React Native Router Flux。 React Navigation 提供了多种路由类型,如 Stack Navigator、Tab Navigator、Drawer Navigator 等,可以根据不同的业务场景选择合适的路由类型。以下是一个使用 Stack Navigator 的示例: 1. 安装依赖: ``` npm install @react-navigation/native @react-navigation/stack ``` 2. 在 App.js 文件中引入依赖: ```jsx import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; ``` 3. 创建一个 Stack Navigator: ```jsx const Stack = createStackNavigator(); function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Home' }} /> <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} /> </Stack.Navigator> </NavigationContainer> ); } ``` 4. 在组件中使用路由: ```jsx import { useNavigation } from '@react-navigation/native'; function HomeScreen() { const navigation = useNavigation(); return ( <Button title="Go to Details" onPress={() => navigation.navigate('Details')} /> ); } ``` 在上面的示例中,当点击按钮时,会跳转到名为 "Details" 的页面。可以在 options 中设置页面标题等属性。 React Native Router Flux 的使用方式与 React Navigation 类似,都是创建路由,然后在组件中使用。不同的是,React Native Router Flux 采用了类似于 React Router 的路由配置方式,需要在顶层组件中进行配置。具体使用方式可以查看官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值