react-navigation的使用，实现app底部导航栏

官方文档https://reactnavigation.org/docs/tab-based-navigation/

react-native社区主推的导航组件是react-navigation，示例在android环境，涉及的依赖版本如下：

"dependencies": {
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/native": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.15.0",
    "react-native-vector-icons": "^9.2.0"
  },

安装： 

1、在项目中安装所需的包

yarn add @react-navigation/native

yarn add react-native-screens react-native-safe-area-context

底部导航栏对应的包

yarn add @react-navigation/bottom-tabs 

配置： 

2、Android 需要进行如下配置

配置文件 android/app/src/main/java/<your package name>/MainActivity.java

 在顶部引入 ：

import android.os.Bundle;

在类主体中添加： 

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

3、将整个应用程序包在 NavigationContainer 下

app/App.js

import React, { Component } from 'react'
import { NavigationContainer } from '@react-navigation/native'
import Nav from './nav/Nav'

export default class App extends Component {
  render() {
    const {isShowLauncher} = this.state
    return (
      <NavigationContainer>
        <Nav></Nav>
      </NavigationContainer>
    )
  }
}

使用： 

4、封装一个导航组件

app/nav/Nav.js

import * as React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

import Food from '../food/Food'
import Movie from '../movie/Movie'
import Hotel from '../hotel/Hotel'
import Bank from '../bank/Bank'

const Tab = createBottomTabNavigator()

export default function Nav() {
  return (
    <Tab.Navigator screenOptions={{tabBarActiveTintColor: '#e91e63'}}>
      <Tab.Screen name="food" component={Food} 
        options={{
          title: '美食'
        }}
      />
      <Tab.Screen name="movie" component={Movie} 
        options={{
          title: '电影'
        }}
      />
      <Tab.Screen name="hotel" component={Hotel} 
        options={{
          title: '酒店'
        }}
      />
      <Tab.Screen name="bank" component={Bank} 
        options={{
          title: '酒店'
        }}
      />
    </Tab.Navigator>
  )
}

5、初步效果

 

6、icon图标的引入(使用react-native-vector-icons)

yarn add react-native-vector-icons

在文件 android/app/build.gradle 中添加如下代码：

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

 修改app/nav/Nav.js，options添加tabBarIcon属性，它接收一个函数返回react node

import * as React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import FontAwesome from 'react-native-vector-icons/FontAwesome'

import Food from '../food/Food'
import Movie from '../movie/Movie'
import Hotel from '../hotel/Hotel'
import Bank from '../bank/Bank'

const Tab = createBottomTabNavigator()

export default function Nav() {
  return (
    <Tab.Navigator screenOptions={{tabBarActiveTintColor: '#e91e63'}}>
      <Tab.Screen name="food" component={Food} 
        options={{
          title: '美食', 
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="food-outline" color={color} size={size} />
          )
        }}
      />
      <Tab.Screen name="movie" component={Movie} 
        options={{
          title: '电影', 
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="movie-roll" color={color} size={size} />
          )
        }}
      />
      <Tab.Screen name="hotel" component={Hotel} 
        options={{
          title: '酒店', 
          tabBarIcon: ({ color, size }) => (
            <FontAwesome name="hotel" color={color} size={size} />
          )
        }}
      />
      <Tab.Screen name="bank" component={Bank} 
        options={{
          title: '银行',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bank" color={color} size={size} />
          )
        }}
      />
    </Tab.Navigator>
  )
}

效果：