React Native 环境配置
搭建环境笔记记录:
搭建开发环境
安装node, watchman
brew install node brew install watchman 复制代码
设置镜像加速
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global 复制代码
Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)
Yarn、React Native 的命令行工具(react-native-cli)
Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli 复制代码
安装完 yarn 后同理也要设置镜像源
yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global 复制代码
创建项目
到固定的目录下创建项目文件夹
react-native init AwesomeProject 复制代码
运行项目
cd AwesomeProject react-native run-android 复制代码
遇到的问题
运行 react-native start 是一直卡在 loading dependency graph...
最后出来 unable to talk to your watchman on /usr/local/var/run/watchman/xiuchengyin-state/sock
- 在 /AwesomeProject/android/app/src/main 目录下创建 空目录 assets目录
- 回到 /AwesomeProject 下,执行以下命令:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
复制代码
最终HelloWorld页面起来了:
其它方案
adb reverse tcp:8081 tcp:8081
adb reverse tcp:8081 tcp:8081react-native run-android
复制代码
这样就OK了,其实上面添加assets的方案不知道啥意思,不推荐。
RN调试
利用Chrome来调试:浏览器输入http://localhost:8081/debugger-ui, 然后右键 选择 检查打开调试,看到 console。
连上真机调试。
React Native 环境配置相关推荐
- 史上最详细Windows版本搭建安装React Native环境配置
说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...
- Mac M1 搭建 React Native 环境
Mac M1 搭建 React Native 环境 环境安装 可以参考对照官方文档,本文针对M1芯片目前未完全适配情况下的方案,算是临时解决方案,不具有时效性. 你需要自行准备的依赖:Xcode &g ...
- 逻辑性最强的React Native环境搭建与调试
ReactNative系列文章: 1.<逻辑性最强的React Native环境搭建与调试> 2.<ReactNative开发工具有这一篇足矣> 正文 React Native ...
- React Native 环境搭建步骤
之前一直用RN写APP,但是真正对于RN的安装以及环境配置缺不太了解.相当于站在巨人的肩膀.这次,研究RN的同事离职,所以这块儿就必须要接手.从新搭建了一次环境.在此记录一下. 一.RN环境搭建的必须 ...
- React Native 环境搭建
搭建开发环境 在React Native官网 https://reactnative.cn/docs/environment-setup 网址上有两种环境,一种完整原生环境,所谓原生环境, RN之所以 ...
- webstorm 运行android,Windows React Native环境搭建:webstorm+android studio 及解决热更新
工具准备: SDK Android SDK Build-tools:23.0.1 SDK Platform:Android N .6.0 .5.1.1.5.0.1.4.4.2.4.1.2 Androi ...
- React Native项目配置路由和选项卡导航__React Navigation的使用
React Native 配置路由 在网上看了很多例子跟着写,发现都不行,发现之前的写法都已经弃用了,跟着官方一步步来吧. 参考官方文档:React Navigation 先创建好项目: npx re ...
- react Native 环境安装配置——图解版一目了然
✨原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下
- React native 环境搭建遇到问题解决(android)
新建项目 react-native init TestApp 运行项目 react-native run-android 不好意思,错误马上就到了 问题一 通常遇到这个错误之后,系统会给出这个具体详情 ...
最新文章
- 哪些操作会造成raid数据无法恢复?raid多块硬盘离线后切记不要做这些事情
- k8s 资源文件基础练习
- char* 和 char * 思考
- dbref java_java – Spring Data REST MongoDB:检索DBRef的对...
- Ubuntu Linux服务器安装JDK8
- [转]C#自定义应用程序配置文件App.config
- Hibernate之一对多与多对一映射
- hp linux 禁用u盘启动项,惠普台式机UEFI BIOS设置U盘启动
- 关闭Win 11自动更新工具
- java linux路径带括号,java执行linux命令 括号
- unity——UI拖拽实现拼图
- spring集成flyway
- U3D教程多摄像机协同运行
- 连续值特征分桶区间设置
- Apollo星火计划学习笔记——参考线平滑算法解析及实现(以U型弯道场景仿真调试为例)
- 快速排序(划分函数partition和主元pivot选取)
- 10 场年薪 60W 的 DBA 面试,被问到最多的 10 道题
- LaTeX 向量两种表示方法(加粗、箭头)示例
- 云函数调用失败的原因
- css【详解】steps()函数