react native 路由使用
时间: 2023-09-03 11:15:43 浏览: 50
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 的路由配置方式,需要在顶层组件中进行配置。具体使用方式可以查看官方文档。