NativeScript开发环境搭建(Mac系统)

文章最后更新时间 2019年4月26日

简短介绍NativeScript

可能很多人听说过了nativescript，也可能有很多人还没有听说过这个名词，但是对于通过运用Web技术来写Android与iOS的应用这件事情已经是司空见惯了。
nativescript就是一款能够让你用Angular，TypeScript，JavaScript来开发构建真正的原生手机应用的框架。官网地址
本文简述的是如何在Mac系统下搭建nativescript的开发环境，在这个过程中还是会遇到一些小问题在官网中没有给出提示，下面做出阐述。

安装Node.js

在Mac上你可以通过homebrew来安装nodejs，或者你可以用nvm来安装nodejs，我倾向于后者，安装办法可以参考链接，写得很详细，本文不再赘述。

安装Android必要的开发环境

安装java JDK

我安装的是JRE 8u152

设置JAVA_HOME路径

在终端中运行export JAVA_HOME=$(/usr/libexec/java_home)

安装Android SDK

这一步中官网的方式是通过homebrew进行安装，这里我的建议是通过安装Android Studio的方式来进行安装Android SDK，所以这一步跳过
直接安装Android Studio，直接安装Android Studio的好处是，自动安装好开发安卓的所有开发环境，包括Android SDK，Android模拟器等等。
下载好Android Studio以后，进行安装

为Android设置Proxy

由于被block，通过Android Studio下载一些需要的模拟器，还有创建项目的时候需要的gradle文件都会失败。这里以Shadow Sockets为例，演示如何配置Proxy

确保有一个正常工作的shadow sockets

到此为止，你必须有一个能够正常工作的shadow sockets，能够访问一些block的网站，无论你是自己在linode上自己搭建服务还是通过购买第三方的服务，你都需要有一个能够正常工作的shadow sockets

检验是否需要配置Proxy

打开刚刚安装好的Android Studio，如下所示：

图片.png

点击进入到SDK Manager中，如果你出现如我所示的界面：

图1.png

图2.png

那么恭喜你，你的Android Studio已经为你自动下载安装好了Android SDK，如果没有出现，或者是出现了，图2中红色文字提示的情况，那么，你就需要配置一下你的Android Studio的Proxy了，请往下看。

配置Android Studio Proxy

图片.png

图片.png

然后点击Apply，OK。
看配置好的Proxy是否是正常工作了，回到这个界面：

图片.png

如果没有出现黄色的感叹号，就说明你的Proxy是配置成功了。

设置ANDROID_HOME路径

看上面一段文字的图片， 那个Android SDK Location这个路径就是你的Android安装路径，在终端中执行命令export ANDROID_HOME=your_path把your_path换成你Android Studio中显示的路径即可，当然了，如果你不想每次进入终端都不能找到这个环境变量，就直接在.bashrc或者.zshrc文件中直接输入这条命令

设置ANDROID_SDK_ROOT路径

该路径与ANDROID_HOME路径一致

运行命令

$ANDROID_HOME/tools/bin/sdkmanager "tools" "platform-tools" "platforms;android-25" "build-tools;25.0.2" "extras;android;m2repository" "extras;google;m2repository"

当你完成上述要点后你就已经完成了大多数Android开发所需要的环境配置，打开你的Android Studio，新建一个项目，此时如果你的Proxy没有设置好的话，在新建项目的时候会一直显示在Loading，如果你的Proxy配置好了，你就可以看到那个进度条在进行滚动了，如下所示：

图片.png

新建好项目后，你会看到如下所示：

图片.png

点击图示的小图标(如果此时这个小图标是灰色的，那么一定是前面的某个步骤没有做对，做完整，请检查，另外注意一下Android Studio中Event Log中给出的错误信息提示，这将有助于你找到问题的所在）

图片.png

图片.png

图片.png

根据提示安装所有需要安装的包。
至此，安卓的开发环境已经搭建完毕。

搭建IOS开发环境

安装xcode

xcode的安装没有什么可说的，直接在App Store中下载即可。

安装Command Line Tools

在终端中运行xcode-select --install

依次运行以下命令

• sudo gem install xcodeproj
• sudo gem install cocoapods
• brew install xcproj

至此IOS的开发环境也大家完毕了

最后一步

• 运行 npm i -g nativescript
• 重新打开terminal
• 运行tns doctor
  如果没有提示Warning，那么就说明大功告成了，到tutorial页面开启你的第一个NativeScript应用吧。

如有任何疑问，欢迎随时交流