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

使用Expo开发React-native程序(一)

开发React-native程序,除了官方提供的React-native CLI外,目前还有一个新的选择Expo。Expo通过编写React和js代码,来生成IOS app、安卓app和web端应用。...它主要包括两个工具:Expo CLI:命令行工具,用来创建脚手架、运行、build程序。Expo Go:安装在真机或虚拟机上的app,可以直接运行你构建出来的项目(不需要签名),方便debug和测试。...如何使用:1.全局安装Expo CLI工具npm install -g expo-cli2.创建项目(假设项目名称为expo-1)expo init expo-1或者npx create-expo-app...:8081/也可以按 i 启动IOS虚拟机(前提是你已经安装了xcode和IOS虚拟机),启动IOS虚拟机后expo会首先给你安装Expo Go,如下图所示:安装好后就可以正式进入app了,效果如下:expo...支持热更新,编辑保存后会立即rebuild并立即显示到模拟器上。

1.6K10

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

后来选择了EXPO,可真香。 官方提供 脚手架 1. 全局安装脚手架 npm uninstall -g react-native-cli 2....全局安装 EXPO 推荐用 yarn 安装// npm install --global expo-cli (当时用npm,安装了半个小时,也没安装完......) ​ 2....当你想打包你的App 成APK 文件: 你可以是使用EXPO 提供的 指令: expo build:android 打包的时候,会需要EXPO的账户, 因为它会发布到你EXPO账户下,生成APK 文件...是不是很轻松哈,使用官方提供的,你的自己配置,查找模拟器。 React Native 支持热更新 这样很方便我们开发APP 中调试, 数据改变, 视图同时改变。...打包成功,它会提供一个链接,去这个链接你就可以下载打包后的APK 文件 ​ 下载APK 显示效果 到此该结束了 本章介绍了,如何配置React Native 环境, 以及EXPO 神器如何使用,

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

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

    后来选择了EXPO,可真香。 ” 官方提供 脚手架 1. 全局安装脚手架 npm uninstall -g react-native-cli 2....全局安装 EXPO 推荐用 yarn 安装// npm install --global expo-cli (当时用npm,安装了半个小时,也没安装完......) 2....当你想打包你的App 成APK 文件: 你可以是使用EXPO 提供的 指令:expo build:android 打包的时候,会需要EXPO的账户, 因为它会发布到你EXPO账户下,生成APK 文件...是不是很轻松哈,使用官方提供的,你的自己配置,查找模拟器。 ” React Native 支持热更新 ★这样很方便我们开发APP 中调试, 数据改变, 视图同时改变。...” 打包成功,它会提供一个链接,去这个链接你就可以下载打包后的APK 文件 下载APK 显示效果 到此该结束了 ★本章介绍了,如何配置React Native 环境, 以及EXPO 神器如何使用

    3.3K30

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

    向 React Native CLI 项目添加自定义字体 对于我们的项目,我们将研究如何通过构建使用Google字体的基础应用程序,将自定义字体添加到React Native CLI项目中。...当你的模拟器完成项目加载后,你应该会看到这个: 使用Google字体 因为我们将 Raleway 和 Quicksand 字体添加为我们的自定义字体,我们将安装这两个包: @expo-google-fonts...在我们的模拟器中看看这是什么样子: 使用自定义字体 假设你正在构建一个个人的 React Native 项目,并且你得到了一些自定义字体,这些字体并不在 Expo 支持的 Google 字体库中。...使用不受支持的字体格式:在使用自定义字体时,验证你正在使用的系统(iOS,Android 或网页)是否支持你正在使用的字体格式(例如,.ttf,.otf)非常重要。...无论是使用Expo还是React Native CLI,这个过程都将大大提升你的应用的美观度和可用性。

    62010

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

    首先是 Nodejs 的命令行工具安装: yarn global add expo-cli 这里不说配置源什么的了,如果慢的话,可以切换国内 yarn 源,安装完毕后,直接使用 expo init AwesomeProject...安装项目,项目安装完毕后进入项目执行 yarn start 会重新安装一次 expo-cli,之后本地启动项目,打开 dev 的浏览器界面如下,最左边可以看到打开的是本地的 expo 得调试台,选择本地...本地配置好对应的 iOS 模拟器,在 vscode 左边点击调试按钮选择对应的模拟器,就可以直接进行开发调试了。...npm install -g ios-sim brew install ios-deploy 然后在项目目录先 build 项目,然后我们直接使用 Ionic Cli: npm run build ionic... capacitor run ios -l --external 选择一个本地的模拟器,之后就可以看到界面了,但是因为笔者本地的 Xcode 是11的老版本,会报编译错误,所以需要升级到最新的Xcode12

    7.1K20

    深度测评 | 五大主流多端开发框架全面对比

    首先是 Nodejs 的命令行工具安装: yarn global add expo-cli 这里不说配置源什么的了,如果慢的话,可以切换国内 yarn 源,安装完毕后,直接使用 expo init AwesomeProject...安装项目,项目安装完毕后进入项目执行 yarn start 会重新安装一次 expo-cli,之后本地启动项目,打开 dev 的浏览器界面如下,最左边可以看到打开的是本地的 expo 得调试台,选择本地...本地配置好对应的 iOS 模拟器,在 vscode 左边点击调试按钮选择对应的模拟器,就可以直接进行开发调试了。...npm install -g ios-sim brew install ios-deploy 然后在项目目录先 build 项目,然后我们直接使用 Ionic Cli: npm run build...,需要使用真机安装 AppLoader 进行调试,类似 RN 的 Expo。

    5.3K30

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

    先说明一下我的运行环境: 1.我当时这个年代用的RN版本是0.55 2.使用的脚手架是create-react-native-app 调试 EJECT前(即生成那个android和ios文件前) 如果你像我那样...your own native builds 但是,是男人的话怎么能那么快eject的,所以这时就该大名鼎鼎的’Expo’登场了,你只需要在你的手机或者模拟器上安装上这个最新版的’Expo’软件,然后在你的本地项目运行命令...模拟器:Command⌘ + M,iOS模拟器:Command⌘ + D,打开Enable Live Reload,然后你就能愉快地撸码了。...当运行npm run android/npm run ios后,你的手机/模拟器毫无意外就会被强制地安装上了一个应用了,这时候调试同上的。...style={{width: 100, height: 100}} source={{uri: url}} /> 那么问题来了,我特么的怎么知道图片的尺寸是什么。

    96210

    H5 手机 App 开发入门:技术篇

    跨平台技术栈的框架,都是使用自己的语法编写页面,不使用 Web 技术,编译的时候再将其转为原生控件,或者使用自己的底层控件,生成原生 App。这样就完全解决了 Web 页面性能不佳的问题。...为了方便使用,官方团队提供了一个封装好的工具集,叫做 Expo。第一步,在手机安装 Expo 的 App 客户端(App Store,Google Play)。 ?...然后,在命令行安装脚手架工具expo-cli,新建一个示意项目。...$ npm install -g expo-cli $ expo init rnDemo 新建项目时,会要求你选择项目模板,可以选minimum模板。...最主要的一个问题是, UI 抽象层翻译出来的 iOS 和安卓原生页面,做不到完全一致,尤其是复杂页面,样式或功能存在差异。编译出来两个平台的原生 App 往往是一个正常,另一个会出现各种奇怪的小毛病。

    6.9K41

    React Native 开发心得分享

    很简单,就是技术栈问题。从开发角度而言,尤其还是对于前端开发人员,会 JS 且搞过 React ,那 RN 上手就十分友好,最起码有关 React 社区的逻辑库或状态库是可以使用的。...相关链接:https://github.com/expo/expo/issues/9591#issuecomment-1485871356 样式问题​ 在样式方面与传统的 Web 开发存在一定的区别。...模拟器无法请求本地 api​ 由于一开始是在 Web 端进行调试开发的,所以没留意到这个问题,直到切换到安卓模拟器之后发现模拟器无法请求本地后端服务,在IOS 端暂无这问题。...adb reverse tcp:6001 tcp:6001 此时安卓模拟器便可正常请求本地后端服务的资源,IOS 端并未有该问题。...另一段是在接触自动化开发的时候,看到了 Auto.js 这个库, 可以使用 JavaScript 和 Node.js 实现小型的安卓应用(不支持 IOS),更多是使用这个库来编写一些脚本类相关的应用。

    50231

    Expo与Flutter:如何选择合适的移动框架

    在本文中,我将提出并回答十个可操作的问题,这些问题将帮助您确定适合您特定用例的技术,以便您自信地说:“我选择 Expo/Flutter 是因为 X、Y 和 Z。”...在 Expo 中,相机被抽象化,您可以使用 expo-camera 包来渲染原生 iOS 和 Android 相机视图。 虽然看起来是一个很小的区别,但它会影响某些项目的关键要求。...但是,管理 Flutter 通道可能比编写 Expo 模块更复杂,因为您需要设置许多文件和处理程序(这也会变得很混乱),并且 Expo 模块可以使用 CLI 轻松引导。...Expo 提供了 Expo Go 等工具来在您的手机上测试您的应用程序,Expo CLI 来管理您的项目,以及 Expo Orbit 来使用一键式构建启动和模拟器管理与您的团队协作。...除此之外,您还可以选择使用 Expo 应用程序服务 (EAS): EAS Build 在云端构建您的应用程序,因此您无需担心为 iOS 和 Android 设置构建环境。

    36410

    expo

    https://docs.expo.dev/ https://github.com/expo/expo Expo 是一个开源平台,旨在帮助开发者构建可以在 Android、iOS 和 Web 上运行的通用原生应用...通过结合使用 React 和 JavaScript,开发者可以在一个统一的环境中构建跨平台的应用,而不需要切换不同的技术栈。...Expo 的核心优势之一就是它提供了一个完整的 SDK、模块 API、CLI 工具以及丰富的文档,极大简化了跨平台开发过程。...安装和使用 Expo 的安装过程非常简单,用户只需要按照官方文档中的步骤进行配置,就可以开始使用它进行应用开发。Expo CLI 提供了一套命令行工具,支持创建新项目、构建应用、发布到应用商店等操作。...在官方文档中,Expo 还提供了丰富的资源,包括教程、常见问题解答 (FAQ) 和开发指南,帮助开发者解决在使用过程中遇到的各种问题。 Expo 鼓励开发者为开源社区贡献代码。

    11210

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

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

    3.9K60

    iOS - FTPManager的简单使用及常见问题

    FTP是一个重要的文件传输协议,在电脑上比较常用些,今天介绍一下iOS上一个好用的FTPManager �简介 FTPManager 是一个很方便的第三方FTP工具,使用它我们可以轻松的使用ftp...出现这个错误的情况,我遇到的有两种情景 一、文件已存在 简单来说,我们给需要上传的文件起的名字,在服务器对应的路径下已经存在,改个名字再传一遍就好。...二、服务器问题 与后台的同事沟通后无果,因为我们得知的错误就只有上面的那个提示,并其它的信息,也就无法给后台同事更多的信息。我也试过在源码里一路追踪下去,只知道它在打开流的时候失败了。...所以我就试了一下终端来进行FTP的操作 先连接好FTP服务器,输入dir查看目录,这时120服务器(就是120开头的ip)的目录一下子就出来了。 ?...同事给出的�解释:FTP主动 被动模式,需要设置传输链路的地址和端口 有兴趣的可以看下200如何解决:200 PORT command successful. Consider using PASV

    1.7K40

    iOS学习——如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒

    如题,本文主要研究如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒。...做过安卓开发的小伙伴肯定很方便就能像打开资源管理器一样查看我们写到手机本地或应用中的各种资源,但是在iOS开发中,在真机上还可以通过一些软件工具 iExplorer 等查看手机上的资源,但是如果你在开发过程中经常使用...xcode自带的模拟器进行调试,这是你要查看模拟器中相关应用的数据则显得无能为力。。。   ...下面两张图第一张是模拟器上的资源文件夹式的资源库,第二张是模拟器中某个应用App对应的应用沙盒(其实就是该应用对应的文件系统目录)。   ...需要找到模拟器的目录目前好像只有通过本方法   接下来,我们就直接进入我们需要的模拟器资源库,模拟器资源库的路径:Users/mukekeheart/Library(即资源库)/Developer/CoreSimulator

    2.9K70
    领券