React Native - 底部导航图标

React Native - 底部导航图标 首页 / React Native入门教程 / React Native - 底部导航图标

在本节中,我们将图标添加到“Tab Navigation"的底部。在学习本教程之前,请阅读上一个教程"Tab Navigation",在此我们描述如何实现"Bottom Tab Navigation"。

导航栏底部添加图标

首先添加所需的库和依赖于React Native项目:

链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-adding-icons-at-bottom-of-tab-navigation.html

来源:LearnFk无涯教程网

1.使用以下命令添加Rect Reach Navigation库:

yarn add react-navigation

2.使用以下命令添加React Native Gesture Handler库:

yarn add react-native-gesture-handler

3.使用以下命令添加React Native Vector Icon Library:

yarn add react-native-vector-icons

成功执行上面的命令后,将这些库链接到使用Bellow命令进行本机项目:

react-native link

上面的命令在 d:\your_directory\your_reacepthepration\package.json 文件中添加以下依赖关系。

"react-native-gesture-handler": "^1.1.0",
"react-native-vector-icons": "^6.3.0",
"react-navigation": "^3.3.2"

d:\your_directory\your_reacectnativeproject\android\app\build.gragle

implementation project(':react-native-vector-icons')
implementation project(':react-native-gesture-handler')

d:\your_directory\your_reactnativeproject\android\settings.groadle文件:

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-vector-icons\android')
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')

在上面的路由结构中略有变化(用'/'替换为'/'):

无涯教程网

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

d:\your_directory\your_reacectnativeproject\android\app\src\main\java\com\resctnativeproject\mainapplication.java

import com.oblador.vectoricons.VectorIconsPackage;
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
. . .
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
        new VectorIconsPackage(),
        new RNGestureHandlerPackage()
  );
}

App.js 

为两个选项卡"Home"和"Profile"创建两个类"HomeScreen"和"Profilescreen"。 createBottomTabNavigator 函数在屏幕底部创建选项卡栏,为您提供在不同的路由之间切换。

将"HomeScreen"映射到"Home"和"Profilescreen"到"Profile"标题。图标标签将图标添加到选项卡导航。可以使用来自ionicons.com的不同图标名称

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
class HomeScreen extends React.Component {
  render() {
    return (
        <View style={styles.container}>
          <Text>Home Screen</Text>
        </View>
    );
  }
}
class ProfileScreen extends React.Component {
  render() {
    return (
        <View style={styles.container}>
          <Text>Profile Screen</Text>
        </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator(
    {
      Home:{
        screen:HomeScreen,
        navigationOptions:{
          tabBarLabel:'Home',
          tabBarIcon:({tintColor})=>(
              <Icon name="ios-home" color={tintColor} size={25}/>
          )
        }
      },
      Profile: {
        screen:ProfileScreen,
        navigationOptions:{
          tabBarLabel:'Profile',
          tabBarIcon:({tintColor})=>(
              <Icon name="ios-person" color={tintColor} size={25}/>
          )
        }
      },
    },
    {
      initialRouteName: "Home"
    },
);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
});

export default createAppContainer(TabNavigator);

输出:

React Native Adding Icons at the Bottom of Tab NavigationReact Native Adding Icons at the Bottom of Tab Navigation

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

Service Mesh实践指南 -〔周晶〕

Linux性能优化实战 -〔倪朋飞〕

移动端自动化测试实战 -〔思寒〕

后端技术面试 38 讲 -〔李智慧〕

摄影入门课 -〔小麥〕

OAuth 2.0实战课 -〔王新栋〕

小马哥讲Spring AOP编程思想 -〔小马哥〕

Kubernetes入门实战课 -〔罗剑锋〕

大型Android系统重构实战 -〔黄俊彬〕

好记忆不如烂笔头。留下您的足迹吧 :)