搭建环境笔记记录:

搭建开发环境

  1. 安装node, watchman

    brew install node
    brew install watchman
    复制代码
  2. 设置镜像加速

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    复制代码

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)

  1. Yarn、React Native 的命令行工具(react-native-cli)

    Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g yarn react-native-cli
    复制代码
  2. 安装完 yarn 后同理也要设置镜像源

    yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global
    复制代码

创建项目

  1. 到固定的目录下创建项目文件夹

    react-native init AwesomeProject
    复制代码
  2. 运行项目

    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

  1. 在 /AwesomeProject/android/app/src/main 目录下创建 空目录 assets目录
  2. 回到 /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 环境配置相关推荐

  1. 史上最详细Windows版本搭建安装React Native环境配置

    说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...

  2. Mac M1 搭建 React Native 环境

    Mac M1 搭建 React Native 环境 环境安装 可以参考对照官方文档,本文针对M1芯片目前未完全适配情况下的方案,算是临时解决方案,不具有时效性. 你需要自行准备的依赖:Xcode &g ...

  3. 逻辑性最强的React Native环境搭建与调试

    ReactNative系列文章: 1.<逻辑性最强的React Native环境搭建与调试> 2.<ReactNative开发工具有这一篇足矣> 正文 React Native ...

  4. React Native 环境搭建步骤

    之前一直用RN写APP,但是真正对于RN的安装以及环境配置缺不太了解.相当于站在巨人的肩膀.这次,研究RN的同事离职,所以这块儿就必须要接手.从新搭建了一次环境.在此记录一下. 一.RN环境搭建的必须 ...

  5. React Native 环境搭建

    搭建开发环境 在React Native官网 https://reactnative.cn/docs/environment-setup 网址上有两种环境,一种完整原生环境,所谓原生环境, RN之所以 ...

  6. 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 ...

  7. React Native项目配置路由和选项卡导航__React Navigation的使用

    React Native 配置路由 在网上看了很多例子跟着写,发现都不行,发现之前的写法都已经弃用了,跟着官方一步步来吧. 参考官方文档:React Navigation 先创建好项目: npx re ...

  8. react Native 环境安装配置——图解版一目了然

    ✨原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下

  9. React native 环境搭建遇到问题解决(android)

    新建项目 react-native init TestApp 运行项目 react-native run-android 不好意思,错误马上就到了 问题一 通常遇到这个错误之后,系统会给出这个具体详情 ...

最新文章

  1. 哪些操作会造成raid数据无法恢复?raid多块硬盘离线后切记不要做这些事情
  2. k8s 资源文件基础练习
  3. char* 和 char * 思考
  4. dbref java_java – Spring Data REST MongoDB:检索DBRef的对...
  5. Ubuntu Linux服务器安装JDK8
  6. [转]C#自定义应用程序配置文件App.config
  7. Hibernate之一对多与多对一映射
  8. hp linux 禁用u盘启动项,惠普台式机UEFI BIOS设置U盘启动
  9. 关闭Win 11自动更新工具
  10. java linux路径带括号,java执行linux命令 括号
  11. unity——UI拖拽实现拼图
  12. spring集成flyway
  13. U3D教程多摄像机协同运行
  14. 连续值特征分桶区间设置
  15. Apollo星火计划学习笔记——参考线平滑算法解析及实现(以U型弯道场景仿真调试为例)
  16. 快速排序(划分函数partition和主元pivot选取)
  17. 10 场年薪 60W 的 DBA 面试,被问到最多的 10 道题
  18. LaTeX 向量两种表示方法(加粗、箭头)示例
  19. 云函数调用失败的原因
  20. css【详解】steps()函数

热门文章

  1. c++ primer5th,习题12.24
  2. linux命令chmod如果当前用户属于多个组,那这个命令中的g指的是哪个组?按什么规则?
  3. php7的稳定性,探索PHP7(一)--性能
  4. 有关Vector里面元素重复解决办法
  5. 用xml画水平虚线和竖直虚线.md
  6. 2013年7月28日web前端学习笔记-------head相关标签应用
  7. input onblur事件在chrome/safari中失效
  8. HttpModule
  9. ANDROID中ACTIVITY间的数据传递
  10. SQL 每行随机产生数字