React Native之项目创建以及路由配置

在 React Native 中要想像 react 中那样进行页面间跳转需要使用到 @react-navigation/native 这个库。

这是 React Native 应用的导航库，主要用于管理和控制应用中的页面跳转和导航。它提供了多种导航组件，包括栈式导航（Stack Navigator）、底部标签导航（Bottom Tab Navigator）和抽屉导航（Drawer Navigator），以适应不同的应用场景和需求‌。

1、初始化项目并安装相关依赖：

npx react-native init VideoApp
cd VideoApp
npm install @react-navigation/native @react-navigation/bottom-tabs @react-navigation/stack
npm install react-native-vector-icons react-native-video react-native-safe-area-context
npm install react-native-screens react-native-gesture-handler

1
2
3
4
5

2、创建类似如下的项目结构（根组件也可能是 App.tsx）

根组件 APP.tsx 代码如下：

import React from 'react';
import { StatusBar } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import AppNavigator from './src/navigation/AppNavigator';

const App = () => {
  return (
    <SafeAreaProvider>
      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
      <AppNavigator />
    </SafeAreaProvider>
  );
};

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、然后在 src/navigation/AppNavigator.js 文件代码如下：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';

// 导入页面
import HomeScreen from '../screens/HomeScreen';
import CategoryScreen from '../screens/CategoryScreen';
import SearchScreen from '../screens/SearchScreen';
import ProfileScreen from '../screens/ProfileScreen';
import VideoPlayerScreen from '../screens/VideoPlayerScreen';
import AboutScreen from '../screens/AboutScreen';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const getTabBarIcon = (routeName, focused, color, size) => {
  let iconName;
  if (routeName === 'Home') {
    iconName = focused ? 'home' : 'home-outline';
  } else if (routeName === 'Category') {
    iconName = focused ? 'grid' : 'grid-outline';
  } else if (routeName === 'Search') {
    iconName = focused ? 'search' : 'search-outline';
  } else if (routeName === 'Profile') {
    iconName = focused ? 'person' : 'person-outline';
  }
  return <Icon name={iconName} size={size} color={color} />;
};

// 主页面标签导航
function MainTabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => getTabBarIcon(route.name, focused, color, size),
        tabBarActiveTintColor: '#FF4757',
        tabBarInactiveTintColor: 'gray',
        headerShown: false,
        headerTitleAlign: 'center',
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} options={{ title: '首页' }} />
      <Tab.Screen name="Category" component={CategoryScreen} options={{ title: '分类' }} />
      <Tab.Screen name="Search" component={SearchScreen} options={{ title: '搜索' }} />
      <Tab.Screen name="Profile" component={ ProfileScreen } options={ { title: '我的' } } />
    </Tab.Navigator>
  );
}

// 应用主导航
function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={ {
        headerTitleAlign: 'center',
      }}>
        <Stack.Screen
          name="Main"
          component={MainTabNavigator}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="VideoPlayer"
          component={VideoPlayerScreen}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="About"
          component={AboutScreen}
          options={{ title: '关于我们' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppNavigator;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

此时，路由配置已基本完成，只需要在 src/screens 文件夹下创建项目中需要用到的各种视图组件即可。