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

如何在React Native添加自定义字体

该文件夹内,一个静态文件夹,所有的TTF文件都在其中。复制并保留这些TTF文件。 在下一部分,我们将会讲解如何将这些字体的TTF文件集成到我们的React Native CLI项目中。...然后,将你之前从静态文件夹复制的所有TTF文件粘贴到你的项目的 fonts 文件夹: 接下来,根目录创建一个 react-native.config.js 文件,并将下面的代码粘贴到其中: 将字体链接到要在项目文件中使用.../raleway @expo-google-fonts/quicksand 如果你其他想要使用的Google字体,你可以在这里查看Expo支持的可用字体。...Expo项目中集成自定义的Google字体 在你的 App.js 文件,粘贴以下代码块: import { Raleway_200ExtraLight } from "@expo-google-fonts...我们的模拟器中看看这是什么样子: 使用自定义字体 假设你正在构建一个个人的 React Native 项目,并且你得到了一些自定义字体,这些字体并不在 Expo 支持的 Google 字体

39510
您找到你想要的搜索结果了吗?
是的
没有找到

React Native构建启动屏

在网络应用,我们使用预加载器为用户提供动画娱乐,同时服务器操作正在处理。尽管这听起来很直接,但它是构建和保留用户群的关键工具。 React Native创建启动屏很多好处。...勾选 iOS 和 Android,然后点击生成: 接下来,解压下载的文件,并将 iOS 和 Android 文件夹复制到你克隆的启动项目的 assets 目录的 assets 文件夹里: React...首先,我们将之前安装的 RNSplashScreen 导入到 AppDeligate.m 。...接下来, Xcode 打开项目工作区,点击 Images,右键点击 Appicon 下方的任意位置,选择 New Image Set。...文件,我们导入并调用它: /* App.js */ import * as SplashScreen from 'expo-splash-screen'; SplashScreen.preventAutoHideAsync

39610

React Native推送通知:完整的操作指南

这里一个图表,简化了通知服务如何与设备进行通信: 当涉及到React Native设置推送通知时,几种设置方式: 原生平台特定的通知服务(FCM/APNS) Expo推送通知服务和其他云服务 像...然后,我们将在服务器上的数据库存储该令牌,发送通知,并处理我们发送的已接收到的通知。 我们深入研究之前,我们将向一个已经开发的项目添加推送通知。...我们首先导入了客户端模块,该模块也 api 目录。...要解决这个问题,请转到 Expo 通知安装文档并遵循设置步骤。 Notifee 无法 Expo 项目中运行:不幸的是,截至撰写本文时,这仍然是一个持续存在的问题。...最好是从 Expo 中弹出或者启动一个裸 React Native 项目。 总结 在这篇文章,我们了解了为什么推送通知如此受欢迎。

91010

使用umi开发react-native应用

笔者Web端习惯使用 umi 后,就变得越来越“懒”,什么问题都用这一锤子解决。 当工作涉及到 react-native(后文简称:RN)应用的内容时,发现 umi 暂时没有支持RN的打算。...于是就产生了这个项目:umi-react-native。 umi RN 仅用来生成中间代码(临时文件),介于编码和构建的之间,旨在引入 umi 的开发姿势来提升 RN 编程体验。...概览 NPM 包 简介 umi-plugin-antd-react-native 为@ant-design/react-native提供按需加载,主题定制、预设、切换,国际化支持,expo链接字体图标...所以不需要在.umirc.js配置plugins和presets。 RN 中集成其他umi插件需要开发者自行斟酌。...React Native CLI expo haul 推荐.gitignore文件末尾,追加以下内容: # umi-react-native tmp index.js metro.config.js

6.2K30

React-native,我们一起走过的坑。

我当时这个年代用的RN版本是0.55 2.使用的脚手架是create-react-native-app 调试 EJECT前(即生成那个android和ios文件前) 如果你像我那样,按照官方的说明方法:初始化了一个项目...’登场了,你只需要在你的手机或者模拟器上安装上这个最新版的’Expo’软件,然后在你的本地项目运行命令npm start,这时不出意料的话你就会弹出一个二维码出来(但是不知为何我每次都是出意外地弹了一个崩了的二维码...EJECT后 这时候,情况就比较尴尬了 这时你已经进入了贤者模式,而你的项目结构也会发生一些微妙的变化,看你能不能找出来,找出来后,这时候你要面对就是那个android文件夹和ios文件夹,身为一个只懂...StyleSheet.create({ view: { width:300, }, text:{ fontSize:10, } } 如果你想把这个view里面的text字体都设为...开头的 react-navigation 官方推荐的路由组件库 我使用StackNavigator方法 坑1: navigation.goBack(),返回上一个页面所有生命周期都没有进入,不像小程序一个

87810

React Native 开发心得分享

本地配置好应用所需的环境,就直接直接运行 RN 项目,开发十分方便。 此外 Expo 还提供了 Expo Go App,只需要在你的移动端设备安装它,启动开发服务器并生成 QR 码。...浏览器打开 snack.expo.dev ,点击 MyDevice,扫码并在 Expo app 查看。 会自动将该程序实时运行在你的移动端设备,意味着你更改代码也将会同步到Expo go 。...Expo 官方还贴心的提供了云服务 Expo Application Services (EAS),意为这你可以你可以将你的 RN 项目托管云服务上,来执行构建与发布等流程。...总之如今开发 RN 请毫不犹豫的使用上 Expo。 开发遇到的一些坑点​ 实际开发中所遇到的坑点远不止下述所说,这里只列举几个相对代表,坑比较深的点。甚至很多坑都不是前端方面的知识了。...next 和 expo 则直接通过 @xxx/app 子包来导入,具体可看代码,这里就不做过多介绍了。

17120

最新React Native环境搭建(从0到打包APK)

最近公司个React Native 项目,不得不学习下RN了。由于之前学过React,学React Native 过程还算可以,不太艰难。...它是围绕React Native和本机平台构建的一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...创建项目 expo init my-project ​ EXPO 提供了 很方便开发便捷 从项目的开发 到 最终的上线, 都很轻松。...光说不练 纯耍流氓,下面为EXPO 操作演示 创建项目 下载依赖会需要一段时间 EXPO 项目介绍 启动项目 yarn start 启动成功后,它会开启一个服务,会自动打开一个网页,在这个网页...React Native 支持热更新 这样很方便我们开发APP 调试, 数据改变, 视图同时改变。

4.1K00

最新React Native环境搭建(从 0 到 打包APK)

最近公司个React Native 项目,不得不学习下RN了。由于之前学过React,学React Native 过程还算可以,不太艰难。...它是围绕React Native和本机平台构建的一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...创建项目 expo init my-project EXPO 提供了 很方便开发便捷 ★从项目的开发 到 最终的上线, 都很轻松。...” 光说不练 纯耍流氓,下面为EXPO 操作演示 创建项目 下载依赖会需要一段时间 EXPO 项目介绍 启动项目 yarn start ★启动成功后,它会开启一个服务,会自动打开一个网页,在这个网页...” React Native 支持热更新 ★这样很方便我们开发APP 调试, 数据改变, 视图同时改变。

3.1K30

​用expo,从0到1 轻松学react native

回想我刚接触rn的时候,用的是mac,配置环境,初始化一个rn项目,然后通过xcode打开,然后模拟器运行,或者在手机真机调试,都经过了不断的调试,发现错误,查找文档,重新安装,调试,真的很烦。...可能就从入门到放弃了。。。 由于最近又要开始react native的开发,所以重新翻了下官方文档,发现rn已经迭代到46版本了,安装最新的版本,还需要额外的第三方编译库,还用上了yarn。...Expo 好处就是: 不用再去配置烦人的 iOS、Android 编译环境 可以用 Windows 开发 iOS 版的 RN 应用。...一、手机安装Expo 二、电脑安装 create-nreact-native-app 终端控制台: $ npm install -g create-react-native-app 三、初始化一个rn项目...接下来使用 Expo 扫描这个二维码就可以打开你编写的 RN 应用了。 并且只要在 Expo 打开过一次,就会在 App 中保留一个入口。 Expo相当于一个壳,你只需关注js层面的开发即可。

3.7K60

品牌设计 | PTX企鹅潮玩展2019

除了干货满满的原创设计论坛,9月19日及20日,由腾讯ISUX用户体验设计部举办的首届PTX企鹅潮玩展(PENGUIN TOY EXPO腾大北广场举行。现场人气超高,甚至还出现了排队进场的情况。...本次潮玩展的slogan是PASSION FOR TRENDY X,X是eXpo(展览),是eXperience(体验),是eXcellent(最好的),希望大家本次活动尽情释放对潮玩的热爱与激情!...品牌字体的选择上,最终确定的中文字体方正锐正黑,与英文字体Arial都属于方正且边角切割明显的字体,视觉冲击力强同时和logo及辅助图形方块的感受一致。...而中文正文部分,选择的是普适的兰亭黑系列字体,便于阅读与传播。 B.辅助图形 经过多次尝试与调整,最终确定用标志PTX的X延展出辅助图形。...2.从成本和实现效果上考虑,我们使用的是桁架+户外等布的处理方式,其中灯布是师傅手工安装,夜晚搭建的过程很容易出现误差,预算充足的情况下建议使用木板/KT板/PVC板等方式进行场地搭建。

78600

React Native最佳实践指北

如图所示,你只需要管理渠道即可:见下图所示,我因为Gemini 的API,所以我给添加进来了,注意这里是需要一点点黑科技的,one-api 最好部署某些不可描述的“万恶”的区域,这样以便他可以顺利和一些很激动人心的大模型进行对话...当然,以上都不是重点,但是么以上,我们客户端的代码将会比较麻烦,会需要去适配多个模型,但是本质上,不都是一样吗,这也就应了那句话,你以为的岁月静好,不过是有人在替你负重前行罢了,所以,如果你认为这个项目帮助你了...UI的选择为什么UI的选择单独拿出来呢,因为颜值即正义,对吗,所以,我选择 reactnativeelements他提供的demo可以直接看下,另外,因为他配置了 expo 的模板方式给我们初始化一个项目...npx create-expo-app --template @rneui/template上述方式,直接给你生成一个项目,如下:这是我生成的项目:而且是一个typescript版本的,也是省了很多配置的事情...总结本文探索了一下 react-native 的开发,使用 expo 直接进行开发,这样,我们不需要太多的环境配置就可以上手,注意最新的 expo ,即 50 版本可以直接文件路由的方式,这意味着熟悉

50510

webpack打包原理分析和实现(一)

webpack打包原理分析和实现(二) webpack打包原理分析和实现(三) 首先,新建一个空文件夹,编辑器(webstrom)打开文件夹,执行npm init -y,生成package.json,根目录新建...入口分析 分析依赖模块(拿到模块的路径) 分析内容(并对内容处理) 编译内容 依赖模块(递归找到依赖) 分析依赖模块(并对内容处理) 编译内容 生成bundle.js,代码可以直接在浏览器运行.../lib/webpack.js,其中利用了node的fs,读取文件内容,为了拿到文件依赖,不推荐使用字符串截取,引入的模块名越多,就越麻烦,不灵活,推荐使用@babel/parser,这是babel7...callee: [Node], arguments: [Array] }, trailingComments: [ [Object] ] } ] 可以看到,index.js的三行代码分别被解析成导入.../expo.js" //解析导入 add(1,2)解析成表达式 console.log("hello webpack")//解析成表达式

33820

如何从零高效的开发一款适配 Android 和 iOS 的移动端App

性能要求:虽然两个框架的性能都比较好,但是 Flutter 通常被认为性能上稍微优于 React Native。...而 React Native 则依赖于本地的 UI 组件,这可能会导致不同平台上的 UI 有所不同。...,我这两天也正是体验了一下 expo 研发一个 chatbox 的 App,了一些体验,所以才整理输出一篇关于 expo 开发 react native 的小作文。...一个小插曲,此时,我们发现 expo 的库了更新,你可以选择忽略,但还是建议你执行npx expo install --fix去更新下,一般expo 是因为修复某些 bug,版本会相对来讲更加稳定,...iOS 打包 ipa 其操作过程类似,因此无需过多废话,打包 Android 的命令如下:eas build -p android --profile preview不过需要注意,在打包之前,你需要在项目的根目录下面

1.1K00

iconfont矢量图标旋转晃动

(PS:页面中使用的图标是将svg图像传到iconfont网站处理以后,然后导出为字体矢量图标引用到页面。)...觉得可能是这个问题导致的旋转晃动,这种情况可能是它做成iconfont字体矢量图标运用后出现的。...详情见下面的两张属性图:矢量图标的父元素属性图(图三) 和 矢量图标页面的属性图(图四) 查看图标父元素i标签属性.jpg 图三(矢量图标父元素属性图) 查看icon图标属性.jpg...是不是我使用的这个svg图像问题,导致了它转换成字体矢量图标以后出现了这样的情况?...将使用的这个图标的SVG图像导入这个网站生成了一遍,把从这个网站下载下来的字体样式加载到我这里使用。 引入字体样式进来以后,查看矢量图标元素大小。

4.9K10

跨平台开发框架到底哪家强?5款主流框架横向对比!

目前来看比较火的应该是 Flutter,次之 RN,具体还要看企业的应用场景和领域,AVM,Ionic,NativeScript 不少企业和个人开发者也使用率较高。 一,安装环境,开发工具对比。...安装项目项目安装完毕后进入项目执行 yarn start 会重新安装一次 expo-cli,之后本地启动项目,打开 dev 的浏览器界面如下,最左边可以看到打开的是本地的 expo 得调试台,选择本地...npm install -g ios-sim brew install ios-deploy 然后项目目录先 build 项目,然后我们直接使用 Ionic Cli: npm run build ionic...扫描IDE 的二维码就可以实时看到真机效果了。...当然 Expo 和 AVM 都是前置 Loader的,所以肯定比没有 loader 程序的快一些。

5.6K20
领券