react native 如何实现页面路由

页面tab路由、 普通路由跳转

在 React Native 中，实现 Tab 路由和普通页面跳转通常需要使用导航库。最常用的导航库是 @react-navigation/native，它提供了多种导航方式，包括 Tab 导航和 Stack 导航。下面是如何使用 @react-navigation/native 实现 Tab 路由和普通页面跳转的步骤。

1. 安装依赖

首先，你需要安装 @react-navigation/native 及其相关的依赖：

npm install @react-navigation/native @react-navigation/bottom-tabs @react-navigation/stack react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-get-random-values

对于 iOS，你还需要安装 pod 依赖：

cd ios && pod install && cd ..

2. 配置导航

在你的应用入口文件（通常是 App.js）中，配置导航容器和导航器。

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

// 导入你的页面组件
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import DetailsScreen from './screens/DetailsScreen';

// 创建 Tab 导航器
const Tab = createBottomTabNavigator();

// 创建 Stack 导航器
const HomeStack = createStackNavigator();
const ProfileStack = createStackNavigator();

// 定义 Tab 导航的屏幕
function HomeTabs() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

function ProfileTabs() {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Profile" component={ProfileScreen} />
      <ProfileStack.Screen name="Details" component={DetailsScreen} />
    </ProfileStack.Navigator>
  );
}

// 定义 Tab 导航
function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeTabs} />
        <Tab.Screen name="Profile" component={ProfileTabs} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

3. 实现页面跳转

在 Stack 导航器中跳转

在 Stack 导航器中，你可以使用 navigation.navigate 方法进行页面跳转。

// HomeScreen.js
import * as React from 'react';
import { Button, View, Text } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

export default HomeScreen;

在 Tab 导航器中切换

Tab 导航器的切换是自动处理的，用户点击底部的 Tab 按钮时，会自动切换到对应的屏幕。

4. 共享导航状态

如果你希望在不同的 Tab 之间共享导航状态（例如，在某个 Tab 中导航到详情页，然后在另一个 Tab 中也能看到相同的详情页），你可以使用 @react-navigation/native 提供的 useNavigationState 钩子或 navigationRef 来实现。

5. 自定义 Tab 栏

你可以通过 Tab.Navigator 的 screenOptions 或 tabBar 属性来自定义 Tab 栏的外观和行为。

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;

      if (route.name === 'Home') {
        iconName = focused ? 'ios-home' : 'ios-home-outline';
      } else if (route.name === 'Profile') {
        iconName = focused ? 'ios-person' : 'ios-person-outline';
      }

      // 你可以使用 react-native-vector-icons 或其他图标库
      return <Icon name={iconName} size={size} color={color} />;
    },
  })}
  tabBarOptions={{
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
  }}
>
  <Tab.Screen name="Home" component={HomeTabs} />
  <Tab.Screen name="Profile" component={ProfileTabs} />
</Tab.Navigator>

6. 处理返回按钮

在 Stack 导航器中，默认会有一个返回按钮。你可以通过 navigation.goBack() 方法手动触发返回操作。

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

7. 嵌套导航

你可以将 Tab 导航和 Stack 导航嵌套在一起，以实现更复杂的导航结构。上面的示例已经展示了如何将 Stack 导航器嵌套在 Tab 导航器中。

8. 其他导航方式

除了 Tab 导航和 Stack 导航，@react-navigation/native 还支持其他导航方式，如 Drawer 导航、Screen 导航等。你可以根据需求选择合适的导航方式。

总结

通过 @react-navigation/native，你可以轻松实现 Tab 路由和普通页面跳转。Tab 导航用于在底部切换不同的屏幕，而 Stack 导航用于在屏幕之间进行堆栈式的导航。你可以根据应用的需求灵活组合这两种导航方式。