请选择 进入手机版 | 继续访问电脑版

mac电脑搭建react native环境

[复制链接]
谭先生 发表于 2021-1-2 17:51:34 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
mac RN的情况搭建

react native中文网官方文档
ios开辟情况的搭建



  • 安装依赖

    • 安装brew
       
        官网大概安装不乐成,可参考这篇文章
       
       

    • 安装node、watchman
       
        安装node:brew install node,如果你已经安装了 node,请查抄其版本是否在 v12 以上。安装完 Node 后发起设置 npm 镜像(淘宝源)以加快背面的过程:
    使用nrm工具切换淘宝源:npx nrm use taobao;下令分析:npx首先在本地寻找nrm,如果没有找到会在堆栈中下载nrm,nrm是用来管理npm镜像的,use taobao切换至淘宝镜像
    如果之后需要切换回官方源可使用:npx nrm use npm
    注意:不要使用 cnpm!cnpm 安装的模块路径比力希奇,packager 不能正知识别!
    安装watchman:brew install watchman,安装此工具可以提高开辟时的性能(packager 可以快速捕获文件的变革从而实现实时刷新)
       

  • 安装软件xcode、cocapods

    • xcode
       
        ios官方ide,appStore安装,安装后打开xcode(勾选同意协议),要否则以后的过程会报错
       
       

    • cocapods
       
        最常用的类库管理工具,功能与npm类似
       
       

    • 安装ios模拟器
       
        在安装完xcode时,已经内置了模拟器
       

android开辟情况的搭建



  • 安装依赖

    • 安装node、watchman

  • 安装软件

    • jdk 1.8版本
       
        官网下载会需要oracle账号登岸下载,点击这里提供常用的oracle账号暗码
    安装后输入下令:javac -version;有提示后证明jdk安装乐成
       
       

    • android studio
       
        开辟安卓步调的ide
    官网下载
    国内用户安装网站
       
       

    • android sdk及设置sdk情况变量

      • android sdk:下载android studio后打开软件,如下图,点击configure -> SDK Manager


      • sdk情况变量:

       
        React Native 需要通过情况变量来相识你的 Android SDK 装在什么路径,从而正常举行编译。详细的做法是把下面的下令加入到 shell 的设置文件中。如果你的 shell 是 zsh,则设置文件为~/.zshrc,如果是 bash 则为~/.bash_profile
       
    1. export ANDROID_HOME=$HOME/Library/Android/sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-tools
    复制代码
      
        首先输入下令cd ~(进入到mac电脑的根目次,显示隐藏文件,查察是否有.bash_profile文件,若没有touch .bash_profile -> open .bash_profile,上边的五行代码粘贴,生存即可,使用下令source $HOME/.bash_profile下令使情况变量立刻生效;再使用echo $ANDROID_HOME查抄此变量是否已正确设置,若有提示sdk的安卓路径,则乐成)
       
       

    • android模拟器

      • 再次打开android studio,选择点击configure -> AVD Manager -> create Virtual Device -> phone -> Pixel 2 -> next -> Pie Download (android 9.0) -> finish
      • 点击actions列的启动按钮,即可启动模拟器


创建项目

  1. npx react-native init AwesomeProject
复制代码
无任何报错后
  1. cd AwesomeProjectnpm run android // 使项目运行在安卓模拟器中npm run ios // 使项目运行在安卓模拟器中
复制代码
若出现如下图错误,打开android studio,单独运行android项目,android studio会下载缺失的依赖。然后再次在项目根目次运行npx react-native run-android即可

自动弹出安卓模拟器,同时开启 8080服务器bash窗口如下图


来源:https://blog.csdn.net/weixin_41643133/article/details/111475645
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )