RN底部导航栏本地图片

最新推荐文章于 2024-04-29 00:40:04 发布

原创最新推荐文章于 2024-04-29 00:40:04 发布 · 701 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#RN

本文详细介绍如何在React Native项目中配置底部导航栏，包括使用本地图片和矢量图标库，通过不同路由名称动态切换图标，以及如何在Android项目中进行相关依赖的编译和运行。

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

本地图片
Showye: {
screen: Showye,
navigationOptions: {
title: “首页”,
、、、、、、本地图片
tabBarIcon: ({ focused, tintColor }) => {
return (
<Image
style={{ width: 30, height: 30 }}
source={require("./ima/r.png")}
/>
);
}
}
},

 2.底部导航栏设置属性：
        导入三方图片库：yarn add react-native-vector-icons
        引入关联：react-native link
        导入依赖：
            import Ionicons from "react-native-vector-icons/Ionicons";
            import React, { Component } from "react";
        Android项目中做编译，运行(更新、更新、更改implementation)
        
        {
navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ focused, horizontal, tintColor }) => {
    const { routeName } = navigation.state;
    let iconName;
    if (routeName === "BottDemo1") {
      iconName = `ios-information-circle`;
    } else if (routeName === "Route") {
      iconName = `ios-options`;
    } else if (routeName === "BottDemo2") {
      iconName = `ios-document`;
    }
    return (
      <Ionicons
        name={iconName}
        size={horizontal ? 20 : 25}
        color={tintColor}
      />
    );
  }
})
// tabBarOptions: {
//   activeTintColor: "#0000FF",
//   inactiveTintColor: "gray",
//   activeBackgroundColor: "#00FF00",
//   inactiveBackgroundColor: "#FF0000"
// }

}