底部导航栏的使用(加上图标)

最新推荐文章于 2021-06-08 10:37:35 发布

史蒂芬啊

最新推荐文章于 2021-06-08 10:37:35 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42832884/article/details/82740259

本文介绍了一个使用React Native和react-navigation创建底部标签导航栏的例子。通过定义不同的屏幕组件并结合react-native-vector-icons库来定制图标，实现了带有动态图标的多页面切换功能。

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

import React, { Component } from "react";
import { createBottomTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import ReList from "./ReList";

const Good = () => {
  return <ReList tab="good" />;
};
const Share = () => {
  return <ReList tab="share" />;
};
const Ask = () => {
  return <ReList tab="ask" />;
};

const DiBu = createBottomTabNavigator(
  // 底部导航栏
  {
    Good: {
      screen: Good,
      navigationOptions: {
        title: "帖子"
      }
    },
    Share: {
      screen: Share,
      navigationOptions: {
        title: "发布"
      }
    },
    Ask: {
      screen: Ask,
      navigationOptions: {
        title: "我的"
      }
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Good") {
          //切换不同的图标
          iconName = `ios-document`;
        } else if (routeName === "Share") {
          iconName = `ios-create`;
        } else if (routeName === "Ask") {
          iconName = `ios-person`;
        }
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    })
  }
);
export default ButtomNav;