一、入口文件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,如果有问题或者建议,欢迎提问。