ReactNative-MacOs搭建环境保姆式教学

害,说多了都是泪,搞起吧,来搭个RN环境~

咱们分ios跟android两个平台环境,首先我们先进行ios的平台环境搭建

IOS目标平台

1下载xcode

知道你们懒,地址都给你们贴出来了,自己选版本哈,发文章的此时我用的是xcode11.4
https://developer.apple.com/download/more/

2安装Node

打开终端,输入命令

brew install node

如果一直在Updating Homebrew...长时间的话,按control+c,此时命令行会出现一个^C,等待1秒钟之后他就会继续往下跑了。
最后执行完毕,你会看到这样的


image.png

3切换成淘宝源

接下来执行命令

npx nrm use taobao

如果之后需要切换回官方,输入命令

npx nrm use npm

4安装watchman

输入命令

brew install watchman

老样子,如果出现长时间Updating Homebrew按control+c等待1秒

5安装Yarn

输入命令

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。

6创建一个新项目44

输入命令

npx react-native init AwesomeProject

等加载完后你将可以看到这样的一个鬼东西


image.png

走完流程后项目就创建完成了,这时我们试试运行项目吧
输入命令

cd AwesomeProject
yarn ios

Ok,不出意外你的模拟器已经开始启动了,运行成功后你将看到你的第一个RN项目


image.png

Android目标平台

1下载Android Studio

https://developer.android.google.cn/studio/
接下来的步骤你可以先试试不fanqiang,如果搞不定可能你需要找一个科学上网工具,因为接下来要在Android studio里面下载一些东西

1.1完善配置

好了,现在我们打开Android studio,选择Configure-SDKManager


image.png

左侧选择System Setting-AndroidSDK,右侧勾选Android9.0(pie)


image.png

(你的应该是Not installed)
然后切换到SDK Tools,右下角勾选show Package Details,注意选中第一个红框28.0.3版本
image.png

最后点击右下角Apply-OK 他就会启动下载了

1.2 配置Android开发环境

我们需要把sdk路径配置到环境变量去(就在上面这张图-SDKTools上面一行-Android SDK Location 这就是你的Android SDK存放路径)
打开访达-前往-前往文件夹,输入

~/.bash_profile

打开这个文件,填上

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

接下来打开终端,输入

source $HOME/.bash_profile

然后输入

echo $ANDROID_HOME

不出意外应该是看到路径了,好了,配置环节到这暂时结束

2-3-4-5跟上面的一模一样哈

6安装jdk

可以先查一下自己的本地jdk是否是1.8,如果不是需要自己去下载,输入命令查询

javac -version

官网下载很慢很慢,建议自行百度寻找~
https://www.oracle.com/java/technologies/javase-jdk8-downloads.html

7创建项目

跟ios的步骤6一样,不啰嗦了哈

8运行项目

8.1开启模拟器

打开Android studio 右下角选择Configure-AVDManager
左下角点击Create Virtual Device,在弹出的窗里面选择一个机型-Next-择一个系统版本-Next-Finish


image.png

之后界面会回到刚开始的弹窗,点击右边的三角形按钮,启动模拟器即可

8.2运行项目

打开终端,定位到项目目录

cd AwesomeProject

执行项目

yarn android

此时会帮你加载许多鬼东西比如安卓开发里烦的一比的gradle等等,如果失败了,不要激动,这是再正常不过了,如果有稳定的科学上网工具那自然最方便了,如果真没有,可以试试添加阿里源

8.3 切换阿里源

首先你可以关闭掉科学上网了,如果Android studio里面设置了proxy也关闭,但是这样关闭也没用,需要去另一个文件删掉,具体做法打开访达——前往——前往文件夹

~/.gradle/gradle.properties

打开文件后把里面几行这个去掉


image.png

好,这就彻底关掉了

接下来我们去到我们刚创建的项目,如果你按照这篇文章创建的,那项目应该是在

~/AwesomeProject/android

接下来我们打开build.gradle文件,是这样的


image.png

我们将下面这几句添加到allprojects——repostiories里面

        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

ok保存退出,回到终端,继续执行之前的命令

yarn android

你会发现这次加载的速度简直飞快,最后你就会在模拟器/真机上面看到项目了


image.png

好的,你可以开始你的RN之旅了(真是蛋疼我才不想搞什么跨平台(&(……*&#)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容