RN 如何创建一个底部导航栏

最新推荐文章于 2024-06-21 13:54:26 发布

qq_42984443

最新推荐文章于 2024-06-21 13:54:26 发布

阅读量905

点赞数

文章标签： RN js Android

本文链接：https://blog.csdn.net/qq_42984443/article/details/82744777

版权

1.首先导入 yarn 包

yarn add react-navigation

import React, { Component } from "react";
import { createBottomTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
//创建3个js文件
import List from "./List";
import Test from "./Test";
import Test1 from "./Test1";
//创建底部导航栏在这里份清楚 Bottom是底部 Top是顶部 ，当然在这里面也可以就这样理解
const BottomNav = createBottomTabNavigator(
  {
    List: {
      navigationOptions: {
        title: "1"
      },
      screen: List
    },
    Test: {
      navigationOptions: {
        title: "2"
      },
      screen: Test
    },
    Test1: {
      navigationOptions: {
        title: "3"
      },
      screen: Test1
    }
  },
  {
  //在这里要导入图片yarn包，我用的是苹果的图片： yarn add react-native-vector-icons
  //给大家一个连接  [图片应有尽有](https://www.npmjs.com/package/react-native-vector-icons)
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "List") {
          //切换不同的图标
          iconName = `ios-document`;
        } else if (routeName === "Test") {
          iconName = `ios-create`;
        } else if (routeName === "Test1") {
          iconName = `ios-person`;
        }
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    })
  }
);

export default BottomNav;