React Native 路由篇 react-navigation

1.我这边使用的是react-navigation，参照官网安装完启动，执行 npm install @react-navigation/native。在安卓模拟器会报这个错误“invariant violation: requirenativecomponent: “rncsafeareaprovider” was not found in the uimanager”，其实除了安装react-navigation，我们还需安装如下插件：

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

2.新建navigation/index.js、src/page目录/文件：
3.假设我们APP，有首页、产品，购物车、个人中心四个模块，我们在src/page里新建四个目录Home、Product、ShoppingCart、Mine，并各建一个index.js文件。

4.由于我们在项目中可能会用到一些icon，这里我们使用这个react-native-vector-icons库

npm i react-native-vector-icons

针对Andriod ，我们还需作如下配置：
①在android/app/build.gradle添加：

apply plugin: 'com.android.application'
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" // 新加的代码
android {
  ...
}

dependencies {
  implementation fileTree(dir: "libs", include: ["*.jar"])
  //noinspection GradleDynamicVersion
  implementation "com.facebook.react:react-native:+"  // From node_modules
  implementation project(':react-native-vector-icons') // 新加的代码
}

②在android/settings.gradle添加：

include ':app'
includeBuild('../node_modules/react-native-gradle-plugin')
include ':react-native-vector-icons' // 新加的代码
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') // 新加的代码

③我的版本是用的"react-native-vector-icons": “^9.2.0”，所以不需要在android/app/src/main/java/MainApplication.java，添加任何代码，与react-native-vector-icons的推荐写法不一致

④引用的话，直接在所需要的地方引入即可使用：

import Icon from 'react-native-vector-icons/FontAwesome'；
const myIcon = <Icon name="home" size={30} color="#900" />;
//  size表示这个icon的大小，name表示用的是哪个icon，color表示这个icon显示的颜色

5.配置路由
①首先我们先配置APP底部的路由，我们在navigation目录中新建BottomTabBar.js，这里我们需要用到@react-navigation/bottom-tabs插件，首先安装插件 npm i @react-navigation/bottom-tabs

 // BottomTabBar.js
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../src/page/Home/index';
import Product from '../src/page/Product/index';
import ShoppingCart from '../src/page/ShoppingCart/index';
import Mine from '../src/page/Mine/index';
import Icon from 'react-native-vector-icons/Ionicons';
const Tab = createBottomTabNavigator();
export default function TabBar() {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                let iconName;
                if (route.name === 'Home') {
                        iconName = focused
                        ? 'home'
                        : 'home-outline';
                } else if (route.name === 'Product') {
                        iconName = focused ? 'rocket' : 'rocket-outline';
                }else if (route.name === 'ShoppingCart') {
                        iconName = focused ? 'cart' : 'cart-outline';
                }else if (route.name === 'Mine') {
                        iconName = focused ? 'person' : 'person-outline';
                }
        
                    // You can return any component that you like here!
                return <Icon name={iconName} size={size} color={color} />;
                },
                tabBarActiveTintColor: 'tomato',
                tabBarInactiveTintColor: 'gray',
                })}
            >
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Product" component={Product} />
            <Tab.Screen name="ShoppingCart" component={ShoppingCart} />
            <Tab.Screen name="Mine" component={Mine} />
        </Tab.Navigator>
    );
  }

②我们配置stack路由，也就是非TAB栏的路由，比如像详情页的路由，我们在navigation/index.js配置，先安装插件 npm i @react-navigation/stack

//index.js
import { createStackNavigator } from '@react-navigation/stack';
import BottomTabBar from './BottomTabBar' // 引入底部TAB栏
import ProductDetails from '../src/page/Product/Detail/index'; // =>产品详情页
import Scan from '../src/page/Mine/Scan/index'; // => 个人中心 扫一扫页面
const Stack = createStackNavigator();
  // stack路由配置
  export default function Navigation(){
    return (
        <Stack.Navigator>
            <Stack.Screen name={"Navigation"} options={{headerShown:false}} component={BottomTabBar} />
            <Stack.Screen name={"ProductDetails"} component={ProductDetails} />
            <Stack.Screen name={"Scan"} component={Scan} />
        </Stack.Navigator>
    )
}

③ 修改App.js文件

// In App.js in a new project

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Navigation from './navigation/index'

function App() {
  return (
    <NavigationContainer>
      <Navigation />
    </NavigationContainer>
  );
}

export default App;

效果如下：

React Native 路由效果图

代码已上传到 git: https://github.com/pengmaoxing/RN.git

上一篇：React Native windows环境搭建