Rn 底部导航

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

qq_43203378

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

阅读量454

点赞数

本文链接：https://blog.youkuaiyun.com/qq_43203378/article/details/82700315

版权

这篇博客介绍了如何在React Native中利用`createBottomTabNavigator`创建底部导航栏。通过导入`Ionicons`图标库和相关屏幕组件，如`HomeScreen`, `NewTopRoute`, `MyScreen`，设置不同选项卡的标题和颜色，实现了底部导航栏的定制。`tabBarOptions`用于配置选中和未选中时的字体颜色。" 46362575,4960767,使用Google Maps API获取当前位置周边设施信息,"['地图API', '地理位置', '数据查询', '开发']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { createBottomTabNavigator } from “react-navigation”;
import Ionicons from “react-native-vector-icons/Ionicons”;

import React from “react”;

import HomeScreen from “./HomeScreen”;
import NewTopRoute from “./NewTopRoute”;
import MyScreen from “./MyScreen”;

const HomeBottomRoute = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
title: “首页”
}
},
New: {
screen: NewTopRoute,
navigationOptions: {
title: “消息”
}
},
My: {
screen: MyScreen,
navigationOptions: {
title: “我的”
}
}
},
{
tabBarOptions: {
activeTintColor: “#ffffff”,
inactiveTintColor: “#2296F3”,

  activeBackgroundColor: "#2296F3",
  inactiveBackgroundColor: "#ffffff"
},
navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ tintColor }) => {
    const { routeName } = navigation.state;
    let iconName;
    if (routeName === "Home") {
      iconName = "ios-document";
    } else if (routeName === "New") {
      iconName = "ios-create";
    } else if (routeName === "My") {
      iconName = "ios-person";
    }

    return <Ionicons name={iconName} size={25} color={tintColor} />;
  }
})

}
);

export default HomeBottomRoute;