react native 环境搭建for mac |七日打卡

865 阅读3分钟

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

今天的笔记主要记录一下在mac系统下ReactNative环境的搭建:

首先要知道ReactNative的环境依赖于node、android、ios的开发环境,因此需要依次安装一下环境:

1、node.js安装

安装node的过程中,需要注意 Node 的版本必须大于等于10

1.1 打开NodeJs的官网下载页面:nodejs.org/en/download…
1.2 根据系统选择
1.3 然后打开终端执行命令node -v ,查看node版本,如果出现版本号则说明安装成功。

2、安装Python2

2.1 Python的官网下载地址为:www.python.org/downloads/

默认安装后,将python2配置到环境变量中。

3、安装Java SE Development Kit (JDK)

1.下载jdk并安装(注1.8版本的jdk可行)

2.设置java环境变量(Android环境的前置)

sudo vim /etc/profile

JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_77.jdk/Contents/Home/"

CLASS_PATH="$JAVA_HOME/lib"

PATH=".:PATH:PATH:JAVA_HOME/bin"

3.使命令生效

source /etc/profile

4.检查环境变量

echo $JAVA_HOME

4.切换源

首先,使用nrm工具切换淘宝源

npx nrm use taobao

如果必要,可以使用一下命令切换回来

npx nrm use npm

5.安装yarn

Yarn是 Facebook 提供的替代 npm 的工具,Yarn 对你的代码来说是一个包管理器。它可以让你使用并分享全世界开发者的(例如 JavaScript)代码。 Yarn 能够快速、安全、 并可靠地完成这些工作。

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn add 库名 代替 npm install 库名

npm install -g yarn

6.安装react-native cli

react-native cli 是React Native 的命令行工具

npm install -g react-native-cli

或者

yarn add -g react-native-cli

7.安装Watchman

Watchman是 facebook 的一个开源项目,它开源用来监视文件并且记录文件的改动情况,当文件变更它可以触发一些操作,例如执行一些命令等等。

brew install node

brew install watchman

8.Android环境搭建

1.下载新版Android studio

Android Studio 包含用于构建 Android 应用所需的所有工具。

2.安装Android sdk

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK(注意 SDK 版本不等于终端系统版本,RN 目前支持 android4.1 以上设备)。

3.配置Android环境变量

vi ~/.bash_profile

如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。

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

4.打开模拟器

9.IOS环境搭建

1.下载Xcode

Xcode 是运行在操作系统Mac OS X上的集成开发工具,由Apple Inc开发。Xcode是开发 macOS和 iOS 应用程序的最快捷的方式。Xcode 具有统一的用户界面设计,编码、测试、调试都在一个简单的窗口内完成。

2.React Native 目前需要Xcode 10 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

Xcode 的命令行工具

启动 Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具,比如git等。

Xcode Command Line Tools

10.创建ReactNative项目

1.创建

react-native init AwesomeProject

2.运行android项目

首先进入目标目录中:

cd AwesomeProject

然后运行项目:

react-native run-android

3.运行ios项目

同样的先进入项目中:

cd AwesomeProject

然后再运行项目:

react-native run-ios

运行react-native官方的demo

最后,我们再了解ReactNative项目的过程中肯定要去运行一下官方的demo,接下去介绍官方demo的运行步骤:

IOS环境

如果需要运行在IOS环境,分为以下几步:

1.安装Xcode

2.brew install cocoapods

3.cd RNTester;

4.pod install;

5.打开RNTesterPods.xcworkspace,然后build

Android环境

如果需要运行在Android环境运行,分为一下几步:

1.下载ndk

项目在Android环境中运行需要安装NDK:

以下提供几个下载地址

developer.android.com/tools/sdk/n… www.androiddevtools.cn tools.android-studio.org developer.android.google.cn/ndk/downloa…

(其中ndk版本要注意适配)

2.配置ndk环境

vi ~/.bash_profile export NDK_HOME=/Users/wayne/Downloads/android-ndk-r10e export PATH=PATH:PATH:NDK_HOME/

然后使用下列命令使其立即生效(否则重启后才生效): source ~/.bash_profile

3.接着运行:

./gradlew :RNTester:android:app:installJscDebug

./scripts/packager.sh

运行项目

1.进入目标目录

cd react-native

2.安装依赖

npm install

3.运行项目

npm start