首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用react - native - icon图标和material-bottom-tabs不显示react本地图标(用十字显示)

问题描述: 在使用React Native的react-native-icon图标和react-navigation的material-bottom-tabs时,图标无法显示,只显示一个十字。

解决方案:

  1. 确保已正确安装react-native-vector-icons和react-navigation库。
  2. 检查图标字体文件是否正确导入并链接到项目中。可以通过以下步骤进行检查:
    • 在项目的android/app/src/main/assets/fonts目录下,确保包含了图标字体文件(通常是.ttf或.otf格式)。
    • 在android/app/build.gradle文件中,检查是否正确配置了字体文件的引用。例如:
    • 在android/app/build.gradle文件中,检查是否正确配置了字体文件的引用。例如:
    • 在iOS项目中,确保字体文件已添加到项目的资源中,并在Info.plist文件中添加对应的字体文件引用。
  • 确保正确导入和使用了react-native-vector-icons库中的图标组件。例如,使用MaterialIcons组件:
  • 确保正确导入和使用了react-native-vector-icons库中的图标组件。例如,使用MaterialIcons组件:
  • 检查是否正确配置了react-navigation的material-bottom-tabs组件。确保正确设置了图标属性,例如:
  • 检查是否正确配置了react-navigation的material-bottom-tabs组件。确保正确设置了图标属性,例如:
  • 如果问题仍然存在,可以尝试重新安装依赖库并重新构建项目:
    • 删除node_modules文件夹和package-lock.json文件。
    • 运行npm install命令重新安装依赖库。
    • 运行react-native run-android或react-native run-ios重新构建项目。

腾讯云相关产品推荐: 腾讯云提供了丰富的云计算产品和服务,以下是一些与React Native开发相关的产品推荐:

  1. 云服务器(CVM):提供高性能、可扩展的云服务器实例,适用于部署React Native应用的后端服务。 产品介绍链接:https://cloud.tencent.com/product/cvm
  2. 云数据库MySQL版(CDB):提供稳定可靠的云数据库服务,适用于存储React Native应用的数据。 产品介绍链接:https://cloud.tencent.com/product/cdb_mysql
  3. 云存储(COS):提供安全可靠的对象存储服务,适用于存储React Native应用的静态资源文件。 产品介绍链接:https://cloud.tencent.com/product/cos

请注意,以上推荐的产品仅作为参考,具体选择应根据项目需求和实际情况进行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了,相信大家对React Native都已经有了很多了解自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的,大同小异的,只不过是的语言不太相同罢了...我可以显示一个标志,一个导航图标(譬如汉堡形状的菜单按钮),一个标题与副标题,以及一个功能列表。标题副标题会在中间显示,徽标导航图标会在左侧显示,而功能列表则在右侧显示。...特别注意:尽管我上面的标识(徽标)导航图标可以显示远程图片,也就是从服务器网络获取,但是仅限开发者模式,如果在发行(release)模式下,你永远都应该用图片资源来渲染这些图标。...使用require('./some_icon.png')会自动帮你包装好,所以只要你直接{uri:'http://...'},就没什么问题。...title 功能标题 icon 功能图标 show icon显示还是隐藏,在弹出菜单里显示:always总是显示,ifRoom如果放的下则显示,或者never从不显示

2K100

React Native 常用的 15 个库

React Native Animatable ? 这个库非常适合快速地向 React Native 应用程序添加简单的动画转换。这个库有两种使用方式:声明式命令式。...这个库还支持带有调度重复支持的本地通知。...因此,如果你同时需要远程本地通知,那么可以使用 response-native-fcm 12.React Native Hyperlink 一个简单的 react-native 超链接组件的可以让...React Native Progress 在应用程序中,显示加载或任何其他操作的进度是很重要的。这个库通过支持5个不同的组件,如线性进度条、圆形、饼状图等,可以很容易地显示进度。 实际案例 ?...React Native Vector Icons 这是最好的 Icon 组件。 它捆绑了 10 个图标集,图标按钮组件,还允许你使用字形图,Fontello TTF 文件导入自定义图标集。

5.7K31

react-navigation,刷新你的导航一、属性介绍二、案例

建议使用 header:设置一些导航的属性,若想要隐藏顶部导航栏则只需要把这个属性设置为null headerTitle:设置导航栏标题 headerBackTitle:设置跳转页面左侧返回箭头后面的文字...默认是true隐藏 tabBarIcon:设置标签栏的图标。...的前景色 activeBackgroundColor:labelicon的背景色 inactiveTintColor:设置在活跃状态下,labelicon的前景色 inactiveTintColor...:设置在活跃状态下,labelicon的背景色 showLabel:是否显示label,默认卡其style:tabbar的样式 labelStyle:label的样式 安卓属性 activeTintColor...:labelicon的前景色 活跃状态下 inactiveTintColor:labelicon的前景色 活跃状态下 showIcon:是否显示图标,默认关闭 showLabel:是否显示label

19.6K90

React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南

initialLayout : 包含初始高度宽度的可选对象可以被传递以防止react-native-tab-view呈现中的一个帧延迟; tabBarOptions: 配置TaBar下文会详细讲解;...tabBarOptions(tab配置) activeTintColor: 设置TabBar选中状态下的标签图标的颜色; inactiveTintColor: 设置TabBar非选中状态下的标签图标的颜色...react-native-vector-icons的矢量图标作为Tab的显示图标,tabBarIcon接收一个React 组件,大家可以根据需要进行定制: tintColor: 当前状态下Tab的颜色;...大家在学习使用React Navigation3x过程中遇到任何问题都可以在React Navigation3x的视频教程中寻找答案哈。...另外,也可以通过最新版React Native+Redux打造高质量上线App视频教程学习React Navigation开发的更多实战经验技巧,以及优化思路。

12.6K20

React Native中构建启动屏

在这个教程中,我们将演示如何在React Native中构建一个启动屏幕。我们将指导你如何使用 react-native-splash-screen 为iOSAndroid应用构建出色的欢迎界面。...可以说,启动画面是让您的移动应用的品牌名称图标深入用户记忆的最佳方式。 在网络应用中,我们使用预加载器为用户提供动画娱乐,同时服务器操作正在处理中。...在React Native中创建启动屏有很多好处。例如,考虑一个从API加载数据的场景。在用户等待时显示加载器是一种良好的用户体验。...在这个教程中,我们将使用 App Icon Generator,这是一个用于创建AndroidiOS应用图标图片的在线平台。...接下来,我们代码 [RNSplashScreen show] 设置 RNSplashScreen 默认显示

34610

React-Native组件之 TabBarIOSTabBarIOS.Item

TabBarIOS.Item 常见属性 继承了View的所有属性 badge:图标右上角显示的红色角标 icon:给当前标签指定一个自定义图标(如果定义了 systemIcon属性 这个属性会被忽略)...(如果定义了systemIcon属性,这个属性会被忽略,如果定义了icon而没定义这个属性,在选中的时候图标会被染上蓝色) systemIcom:一些预定义的系统图标(如果使用了此属性,标题自定义图标都会被覆盖为系统定义的值...} from 'react-native'; 使用 TabBarIOS 很简单,但是需要配合 TabBarIOS.Item 使用,(需要注意的是我们必须给TabBarIOS设置尺寸,不然可能会造成实例化却无法看到的问题...自定义图标(目前只支持本地图片) <TabBarIOS.Item renderAsOriginal={true} // 如果为false,只会显示纯色图片 icon={require...自定义高亮图标(目前只支持本地图片,如果没有设置,则会显示选中颜色图标) selectedIcon={require('image!baker')} ?

1K100

【油猴脚本】在 Iconfont 上直接复制 React component 代码

Iconfont SVG 优缺点对比 在上文中介绍了使用 iconfont 的缺点,以及使用 SVG 的优点,简单归纳为以下几点: Icon 的缺点 当网络不好的时候,会显示方块 如只使用一个图标,...字体冗余 维护依赖 iconfont 平台 在组件开发的时候命名冲突 使用 SVG 的优点 完全离线化使用,不需要从 CDN 下载字体文件,图标不会因为网络问题呈现方块,也无需字体文件本地部署。...支持多色图标。 SVG 可以支持动画 并给出了最终方案,放弃使用字体,使用 SVG 代替 iconfont。...装完插件后会在原先的下载按钮边上多出一个复制按钮,点击复制按钮复制 react 代码,就可以在 react 项目中粘贴使用了。...接下来我们只需要通过 Dom api 获得当前点击元素的 SVG 代码 在每个图标的操作覆盖层加入一新图标,用于复制 react component 原先是块级布局,一列显示 3 行 为了减少页面空间

1.9K20

react-native 开发笔记(一)

react-native 开发笔记 开始使用react-native开发产品,讲讲今天遇到的坑 TabBarIos的使用 一般app的设计都是主页是一个tab页面,我们的app产品也是例外的,所以我使用了这个...iOS专用的组件(先搞定ios,再考虑兼容性) 遇到的问题 图标大小适配问题 因为设计给出来的设计稿的2X,所以切出来的图都是2倍的,这就导致图标很大,翻遍文档,只找到一个{{uri: base64Icon..., scale: 2}}这样子的配置,但是本地图片,总不能先手动转换成base64字符串再用吧。...一般做web开发,如果不是图标字体的话,我们会为图片的选中和选中准备两张图片做切换。...="#f7f7f7" Navigator的使用使用react-native的版本是0.44,这个版本里面移除了Navigator这个组件,所以在非正式版本里面出现问题,需要优先查看是不是版本问题导致的

57340

移动跨平台ReactNative【入门】

2.React Native基本完成了对多端的支持,可以灵活的使用HTMLCSS布局,使用React语法构建组件,实现:H5, Android, iOS多端代码的复用 3.追求极致的用户体验:实时热部署...React Native采用了类似HTML + CSS的排版,可以内嵌到模块,也可以全局使用,定义样式变得非常简单通用。引入了Flexbox布局,使用很方便,学习起来也更简单。...7.第三方组件里有一个可以把icon font引入项目的组件,可以在任何显示图标的地方直接icon font显示 8.调试很方便,一次编译后,每次改了js代码,只需要在模拟器里command+R即可重新加载代码...10.引入ES6的支持,可以使用各种新特性,例如最常用的箭头函数,解决this作用域乱套的问题。 1.3 React Native是什么?...Facebook于2015年9月15日发布React Native 广大开发者可以使用JavaScriptReact开发跨平台移动应用.

1.2K10

【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

请注意如果你正在使用它们,标题选中的图标将被系统图标覆盖。     title字符串         出现在图标下的文本。当定义了系统图标时,它会被忽略。...对于React Native,我们决定使用Web模式,在这里我们可以利用 嵌套文本来达到同样的效果。...2.4 ToolbarAndroid         React组件,包装了Android Toolbar小工具。工具栏可以显示一个标志,导航图标(如汉堡包菜单),标题 副标题操作列表。...标题子标题被扩展这样以来标志导航图标显示在左边,标题副标题在中间并且操作 在右边。         如果工具栏具有唯一子级,它将显示在标题操作之间。...some_icon')     • show :当把这个操作显示为一个图标或隐藏在溢出菜单中时:always , ifRoom或never     • showWithText :布尔值,是否显示图标旁边的文本

45140

react-native-easy-app 详解与使用之(三) View,Text,Image,Flatlist

react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android),特别是在从0到1的项目搭建初期,至少可以为开发者减少...react-native-easy-app 主要做了这些工作: 1. 对AsyncStorage进行封装,开发者只需几行代码即可实现一个持久化数据管理器。 2....其它用法跟原生组件一致,所有原生属性都支持: XWidget.initResource('https://react-native-easy-app.oss-cn-beijing.aliyuncs.com...View去包裹Image与Text,这样使用得UI布局结构变得相对复杂,这时候就可以使用XXText了 <XText style={styles.textStyle} text='<em>图标</em>在上' icon=...###react-native-easy-app 详解与使用之(四)屏幕适配 想进一步了解,请移步至 npm 或github查看 react-native-easy-app,有源码及使用示例,待大家一探究竟

2.2K10

如何开发适配安卓iOS双平台的React Native应用

众所周知React Native是可以开发跨平台的AndroidiOS App。...我们可以React Native开发Android应用也可以开发iOS应用,那么如何让我们开发的React Native应用适配AndroidiOS双平台呢?...留意api doc的android或ios标识 并不是所有React Native的一些api或组件的一些属性方法都兼容AndroidiOS,在React Native的api doc中通常会在一些属性或方法的前面加上...组件选择 React Native发展到现在已经有相当丰富的组件来供开发者使用,那么从适配AndroidiOS平台的角度如何甄选这些组件呢?...为此我们需要为每个图标提供1x、2x、3x三种大小的尺寸,React Native会根据屏幕的分辨率来动态的选择显示不同尺寸的图片。

3.3K20

React Native 开发适配心得

众所周知React Native是可以开发跨平台的AndroidiOS App。...我们可以React Native开发Android应用也可以开发iOS应用,那么如何让我们开发的React Native应用适配AndroidiOS双平台呢?...比如,我们在使用StatusBar做导航栏的时候,在iOS平台下根视图的位置默认情况下是占据状态栏的位置的,我们通常希望状态栏下面能显示一个导航栏,所以我们需要为StatusBar的外部容器设置一个高度...组件选择 React Native发展到现在已经有相当丰富的组件来供开发者使用,那么从适配AndroidiOS平台的角度如何甄选这些组件呢?...为此我们需要为每个图标提供1x、2x、3x三种大小的尺寸,React Native会根据屏幕的分辨率来动态的选择显示不同尺寸的图片。

2.4K50
领券