react native 路由使用

React Native 中的路由可以使用以下几个库来实现：

1. React Navigation：React Navigation 是 React Native 中最流行的路由库之一，它提供了多种路由类型和导航器，例如 Stack Navigator（堆栈导航）、Tab Navigator（标签导航）和 Drawer Navigator（抽屉导航）等。

2. React Native Navigation：React Native Navigation 是一个由 Wix 开发的路由库，它提供了原生级别的性能和体验。它支持多个平台，并且提供了多种导航器及其配置选项。

3. React Native Router Flux：React Native Router Flux 是一个基于 React Navigation 的路由库，它提供了类似于 React Router 的 API，使用起来比较方便。

下面是一个使用 React Navigation 的示例：

首先安装 React Navigation：

npm install @react-navigation/native

然后安装 Stack Navigator：

npm install @react-navigation/stack

在 App.js 中配置 Stack Navigator：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

在 HomeScreen.js 中实现页面跳转：

import React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <Button
      title="Go to detail screen"
      onPress={() => {
        navigation.navigate('Detail');
      }}
    />
  );
}

export default HomeScreen;

在 DetailScreen.js 中实现返回：

import React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function DetailScreen() {
  const navigation = useNavigation();

  return (
    <Button
      title="Go back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

export default DetailScreen;

这样就完成了一个简单的路由示例，点击 HomeScreen 上的按钮可以跳转到 DetailScreen，DetailScreen 上的按钮可以返回 HomeScreen。