React Native 应用示例 (导航)

React Navigation是目前React Native中最常用的导航解决方案，它提供了多种导航器，如StackNavigator、BottomTabNavigator、DrawerNavigator等。以下是针对这三种导航器的简要示例：

1. StackNavigator

import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen, DetailsScreen } from './screens';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在这个例子中，我们创建了一个StackNavigator，包含两个屏幕：“Home”（由HomeScreen组件渲染）和“Details”（由DetailsScreen组件渲染）。options属性用于为“Details”屏幕指定标题。

2. BottomTabNavigator

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { HomeScreen, SettingsScreen } from './screens';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: 'Home', tabBarIcon: ({ color, size }) => <Icon name="home" color={color} size={size} /> }} />
        <Tab.Screen name="Settings" component={SettingsScreen} options={{ tabBarLabel: 'Settings', tabBarIcon: ({ color, size }) => <Icon name="settings" color={color} size={size} /> }} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

这里，我们创建了一个BottomTabNavigator，在底部显示两个标签：“Home”和“Settings”，分别关联到相应的组件。options中指定了标签栏的标签文字和图标（假设Icon是一个图标组件库）。

3. DrawerNavigator

import { createDrawerNavigator } from '@react-navigation/drawer';
import { HomeScreen, ProfileScreen, AboutScreen } from './screens';

const Drawer = createDrawerNavigator();

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} options={{ drawerLabel: 'Home' }} />
        <Drawer.Screen name="Profile" component={ProfileScreen} options={{ drawerLabel: 'Profile' }} />
        <Drawer.Screen name="About" component={AboutScreen} options={{ drawerLabel: 'About' }} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

这段代码创建了一个DrawerNavigator，用户可以通过侧滑打开抽屉菜单，其中包含“Home”、“Profile”和“About”三个条目，点击后会跳转到相应的屏幕。每个屏幕的抽屉标签文字由drawerLabel指定。

请注意，以上代码示例假设已经正确安装了React Navigation库及其依赖，并导入了所需的屏幕组件。实际项目中，还需要确保正确配置了相关依赖，如react-native-gesture-handler和react-native-reanimated（如果适用）。

欲了解更多关于React Navigation的详细用法、配置选项和高级特性，请查阅其官方文档：React Navigation Docs。

原文链接: https://www.yukx.com/xiaomengbao/article/details/812.html 优科学习网React Native 应用示例 (导航)