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

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

脚手架 我之前是按照官方提供的脚手架安装的,出现各种坑,创建好了项目,启动项目,各种报错,最后各种百度,没果。...创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPO Expo是通用React应用程序的框架和平台。...它是围绕React Native和本机平台构建的一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库在iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...全局安装 EXPO 推荐用 yarn 安装// npm install --global expo-cli (当时用npm,安装了半个小时,也没安装完......) ​ 2....当你想打包你的App 成APK 文件: 你可以是使用EXPO 提供的 指令: expo build:android 打包的时候,会需要EXPO的账户, 因为它会发布到你EXPO账户下,生成APK 文件

4.3K00

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

创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPO ★Expo是通用React应用程序的框架和平台。...它是围绕React Native和本机平台构建的一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库在iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...全局安装 EXPO 推荐用 yarn 安装// npm install --global expo-cli (当时用npm,安装了半个小时,也没安装完......) 2....创建项目 expo init my-project EXPO 提供了 很方便开发便捷 ★从项目的开发 到 最终的上线, 都很轻松。...当你想打包你的App 成APK 文件: 你可以是使用EXPO 提供的 指令:expo build:android 打包的时候,会需要EXPO的账户, 因为它会发布到你EXPO账户下,生成APK 文件

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

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

    在这篇文章中,我们将看到如何在React Native应用中创建和发送推送通知。 什么是推送通知? 推送通知是从应用程序发送到已安装该应用的用户的消息或警报。...你可以直接使用 FCM/APNs 或者使用这些库的托管推送通知服务。然而,请记住,我们必须在 Expo 中使用裸工作流来使用这些库,因为这些库不包含在 Expo 应用程序中。...,并启动React Native开发服务器: yarn install yarn start 上述命令安装依赖项并启动Expo开发服务器,因此你可以通过在Android或iOS上使用Expo应用来测试你的应用程序...获取推送通知令牌 记住,要在React Native应用程序中使用推送通知,我们首先需要注册应用程序以获取推送通知令牌。在这里,我们将使用Expo中的通知API。...首先,让我们创建一个空白的React Native项目,并安装 notifee 模块以开始使用 Notifee: npx react-native@latest init notifeeLearn npm

    1.4K10

    React Native 导航:示例教程

    首先,我们使用下面的命令创建一个新的应用程序: npx create-expo-app ReactNavigationDemo 这将创建一个名为 ReactNavigationDemo 的新项目 接下来...用这个启动应用程序: npx expo start 接下来,使用以下任一命令在 React Native 项目中安装 React Navigation 库: /* npm */ npm install...相反,我们使用了 npx expo install ,因为它会安装与我们的项目软件包兼容的依赖版本。...我建议您始终使用该命令来安装依赖包,因为 npm 和 yarn 将始终安装最新版本,而最新版本可能与您的项目不兼容。缺点是可能会出现生产级别的错误。...要使用抽屉导航,请首先使用以下任一命令安装 @react-navigation/drawer 包: 接下来,我们将使用 npx expo install 安装依赖项: npx expo install

    45410

    使用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...expo-13.安装其他依赖项如果是苹果M1、M2芯片,需安装watchmanbrew install watchman4.启动npm start启动完成后,可以在web端查看效果:http://localhost...:8081/也可以按 i 启动IOS虚拟机(前提是你已经安装了xcode和IOS虚拟机),启动IOS虚拟机后expo会首先给你安装Expo Go,如下图所示:安装好后就可以正式进入app了,效果如下:expo

    1.6K10

    npx error enoent ENOENT: no such file or directory, lstat C:UsersAdministratorAppDataRoaming...

    C:\test>npx create-expo-app my-app npm ERR!...enoent 检查了一下这个目录确实不存在,开始以为是 nodejs 或 npm 安装有问题,重新安装了一下,还是同样的错误。...查了一下这个问题可能的原因: 系统找不到npm所在目录 权限问题 npm安装不完整或中间出错 环境变量问题 解决办法一:手动创建目录 在 “C:\Users\Administrator\AppData\...解决办法二:使用不同的目录 在提示上面错的时候,如果使用 npm config list 查看 npm 配置,可以发现有个 prefix 参数指定到了上面错误的目录 npm config list 。...所以,我们可以使用 “npm config set” 命令指定不同的目录,比如: npm config set prefix 任何再次执行 “npx create-expo-app my-app

    87510

    快速创建React Native App

    Quick Start是在v0.4.5版本添加的一种快速创建React Native App的方案,旨在为React Native开发者提供一种快捷的,无需配置任何工具,同时也无需安装XCode与AndroidStudio...第一步:安装create-react-native-app create-react-native-app是React 社区孵化出来的一种无需构建配置就可以创建RN App的一个开源项目。...作为一个创建react native应用的脚手架工具,你可以通过如下命令完成安装: npm install -g create-react-native-app 接下来就可以通过create-react-native-app...运行React Native应用 想要将上述创建的aa运行起来,你需要下载安装Exponent。 为了方便大家下载使用,我已将Exponent上传到网盘,供大家下载使用。...然后用Expo扫码屏幕上的二维码,aa就可以运行在Expo上了。 ? 提示:为了确保Expo App能够正常访问到你的PC,你需要确保你的手机和PC处于同一网段内或者他们能够联通。

    2.3K51

    快速创建React Native App

    Quick Start是在v0.4.5版本添加的一种快速创建React Native App的方案,旨在为React Native开发者提供一种快捷的,无需配置任何工具,同时也无需安装XCode与AndroidStudio...第一步:安装create-react-native-app create-react-native-app是React 社区孵化出来的一种无需构建配置就可以创建RN App的一个开源项目。...作为一个创建react native应用的脚手架工具,你可以通过如下命令完成安装: npm install -g create-react-native-app 接下来就可以通过create-react-native-app...运行React Native应用 想要将上述创建的aa运行起来,你需要下载安装Exponent。 为了方便大家下载使用,我已将Exponent上传到网盘,供大家下载使用。...然后用Expo扫码屏幕上的二维码,aa就可以运行在Expo上了。 ? 提示:为了确保Expo App能够正常访问到你的PC,你需要确保你的手机和PC处于同一网段内或者他们能够联通。

    2.5K10

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

    Google字体是一个免费的开源字体库,可在设计网页和移动应用程序时使用。...一旦项目成功安装,你将会看到下面的图片: 在你喜欢的IDE中打开你的项目以开始。在这个教程中,我们将使用VS Code。 一旦项目已经启动,我们将继续获取我们想要使用的字体。...首先,通过运行此命令创建一个新的Expo项目: npx create-expo-app my-app 一旦项目成功安装,通过运行 npm run start 启动开发服务器,并选择iOS 或 Android...当你的模拟器完成项目加载后,你应该会看到这个: 使用Google字体 因为我们将 Raleway 和 Quicksand 字体添加为我们的自定义字体,我们将安装这两个包: @expo-google-fonts...创建一个名为 assets 的文件夹,并在其中创建一个 fonts 文件夹,就像你使用React Native CLI所做的那样。

    61610

    在React Native中构建启动屏

    此外,由于Expo很受欢迎,许多人常常选择使用它,我们也将探讨如何在Expo中构建启动屏幕。 什么是启动画面? 启动画面是用户访问应用程序其余功能之前出现的第一个屏幕。...在这个教程中,我们将使用 App Icon Generator,这是一个用于创建Android和iOS应用图标和图片的在线平台。...首先,使用下面的任一命令安装 react-native-splash-screen 包: /* npm */ npm i react-native-splash-screen --save /* yarn...使用 Expo,我们可以以简化和直接的方式做到这一点,因为 Expo 允许我们在 app.json 文件中配置我们的启动屏幕和图片。 我们将使用上述的 App.js 和 Login.js 文件。...为了做到这一点,我们将使用 expo-splash-screen 包,我们可以用以下命令来安装: npx expo install expo-splash-screen 接下来,在我们的 App.js

    63210

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

    通常情况下,App 内部会使用 WebView 控件作为网页引擎。这是系统自带的控件,专门用来显示网页。应用程序的界面,只要放上 WebView,就好像内嵌了浏览器窗口,可以显示网页。 ?...为了方便使用,官方团队提供了一个封装好的工具集,叫做 Expo。第一步,在手机安装 Expo 的 App 客户端(App Store,Google Play)。 ?...然后,在命令行安装脚手架工具expo-cli,新建一个示意项目。...$ npm install -g expo-cli $ expo init rnDemo 新建项目时,会要求你选择项目模板,可以选minimum模板。...$ npm run web 运行上面的命令,命令行会出现一个二维码。 ? 这时可以打开手机端的 Expo 客户端,扫描这个二维码,就会显示 App 的页面。注意,计算机和手机必须在同一个局域网。

    6.9K41

    ​用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.9K60

    从零开始学习React-开发环境的搭建(一)

    本着学习的精神,开始了搭建react开发环境之前需要准备的工作: 1:安装node.js,查看版本号 ? 2:安装cnpm替代npm,查看版本号 ? 3:yarn,查看版本号 ?...不会安装yarn的童鞋,可以查看官方文档: 使用安装命令:npm i -g yarn ?...以上三大步骤就不细说了,准备工作完成后 4:安装脚手架 cnpm install -g create-react-app ? 5:在d盘创建一个空目录,存放项目 ? 6:进入文件夹,创建项目 ?...7:cd 到刚刚生成的项目文件里面,运行项目 cd reactdemo 使用yarn start或者 npm start 弹出浏览器,显示界面,react环境安装完成了 ? ?...从零开始学习React-开发环境的搭建完成,忽然觉得,是不是和vue的操作步骤是一样一样的呐。

    72120

    Cordova

    Cordova是用于使用HTML,CSS和JS构建移动应用的平台。我们可以认为Cordova是一个容器,用于将我们的网络应用程序与本机移动功能连接。默认情况下,Web应用程序不能使用本机移动功能。...这就是Cordova进来的地方。它为网络应用和移动设备之间的连接提供了桥梁。 通过使用cordova,我们可以使混合移动应用程序,可以使用摄像头,地理位置,文件系统和其他本地移动功能。...---- 安装步骤 以下内容为本人以前安装Cordova时所记录的步骤,今无意间翻出来了就给放博客备忘吧!以备不时之需... 1....安装node.js(npm附带安装好了) #查看node版本号 node -v #查看npm版本号 npm -v 2.npm安装cordova #安装cordova npm install -g cordova...创建Cordova项目 #创建名为hello项目,cd到指定目录创建 cordova create hello 5.添加平台 cordova #IOS,需cd到项目任意目录下 platform add

    87510

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

    your own native builds 但是,是男人的话怎么能那么快eject的,所以这时就该大名鼎鼎的’Expo’登场了,你只需要在你的手机或者模拟器上安装上这个最新版的’Expo’软件,然后在你的本地项目运行命令...npm start,这时不出意料的话你就会弹出一个二维码出来(但是不知为何我每次都是出意外地弹了一个崩了的二维码),在你的Expo上扫一扫就能运行成功了,当然最后是少不摇一摇你的手机打开调试,Android...当运行npm run android/npm run ios后,你的手机/模拟器毫无意外就会被强制地安装上了一个应用了,这时候调试同上的。...解决方法: 1、使用Image自带的getSize方法先获取宽高 2、使用别的大神的组件React Native Fit Image 等 资源超过400kb左右不显示 所以说原生组件, 推荐使用别的组件库.../xxx/') 点击事件尽量使用Touchable开头的 react-navigation 官方推荐的路由组件库 我使用StackNavigator方法 坑1:

    96110

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

    然后借助官网推荐的 Expo 工具可以快速搭建起来本地的一个开发环境。因为笔者是 MacOS 用户,之前安装过 Xcode 所以整体安装起来还算是流畅。...首先是 Nodejs 的命令行工具安装: yarn global add expo-cli 这里不说配置源什么的了,如果慢的话,可以切换国内 yarn 源,安装完毕后,直接使用 expo init AwesomeProject...安装项目,项目安装完毕后进入项目执行 yarn start 会重新安装一次 expo-cli,之后本地启动项目,打开 dev 的浏览器界面如下,最左边可以看到打开的是本地的 expo 得调试台,选择本地...140.82.114.9 codeload.github.com 使用 ns 命令创建 NativeScript 项目: ns create myNativescriptApp 选择创建一个 Vue...,需要使用真机安装 AppLoader 进行调试,类似 RN 的 Expo。

    5.3K30

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

    然后借助官网推荐的 Expo 工具可以快速搭建起来本地的一个开发环境。因为笔者是 MacOS 用户,之前安装过 Xcode 所以整体安装起来还算是流畅。...首先是 Nodejs 的命令行工具安装: yarn global add expo-cli 这里不说配置源什么的了,如果慢的话,可以切换国内 yarn 源,安装完毕后,直接使用 expo init AwesomeProject...安装项目,项目安装完毕后进入项目执行 yarn start 会重新安装一次 expo-cli,之后本地启动项目,打开 dev 的浏览器界面如下,最左边可以看到打开的是本地的 expo 得调试台,选择本地...笔者之前安装过 android studio,需要更新SDK 到最新,然后在 tools 里找到 AVD 面板,创建一个模拟器。...140.82.114.9 codeload.github.com 使用 ns 命令创建 NativeScript 项目: ns create myNativescriptApp 选择创建一个 Vue 模板的空项目

    7.1K20

    从零开始学习React-在react项目里面使用mock(七)

    从零开始学习React-开发环境的搭建(一) https://www.jianshu.com/p/97f3a1ba168e 从零开始学习React-目录结构,创建组件页面(二) https://www.jianshu.com...-解析json、渲染数据(六) https://www.jianshu.com/p/1a998147b09b 从零开始学习React-在react项目里面使用mock(七) https://www.jianshu.com.../p/2a5f296a865c 在前面六章里面,从零开始,搭建环境,新建组件,实现路由配置,获取到接口数据,再到渲染在前端界面,大家可能已经对React项目从零开始创建的大致步骤有了一定的了解,关于语法属性时间函数等细节需要自己去慢慢探索啦...,今天主要是写一下在react项目里面使用mock.js模拟后端接口数据。...mockjs 3:在项目里面运行 mockjs依赖安装完成以后,就可以开始执行开启接口服务的命令了。

    1.8K20

    (26)打鸡儿教你Vue.js

    weex框架的使用 weex介绍 安装开发环境 Weex样式,内建组件,模块和事件 html,JavaScript,Css的概念 ? ? ? weex开发环境的搭建 安装依赖 node.js ?...Weex是一个使用现代Web技术构建高性能移动应用程序的框架。 高性能 Weex使用本机组件和本机模块来利用本机渲染性能和平台功能。组件和模块都是可插拔的。...跨平台 您可以使用单个代码库生成不同的捆绑文件,以便在Web,Android和iOS平台上运行。本机组件和模块在每个平台上都有不同的实现,但它们都暴露了相同的API。...前端友好 Weex拥抱现有的Web生态系统,您可以使用现代前端技术来开发您的移动应用程序。Weex支持最常用的CSS属性和最流行的前端框架,例如Vue和Rax,将来可能更多。...vue-router是以vue.js插件的形式存在的 创建Vue实例 v-for指令渲染商品列表 过滤器的使用 Vue过滤器的使用 购物车综合案例 单击商品金额计算和单选全选功能 商品总金额计算

    87220
    领券