react-native环境搭建

一、环境配置
1、安装Homebrew(Homebrew 是 Mac 中的一个包管理器,官网http://brew.sh),执行下面命令:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

你可能会遇到如下错误:
fatal: unable to access ‘https://github.com/Homebrew/homebrew/‘: SSLRead() return error -9806
Failed during: git fetch origin master:refs/remotes/origin/master -n –depth=1
完整错误信息截图如下:
这里写图片描述
原因是:我们天朝的网络问题,万恶的长城防火墙。
解决办法:买一个VPN,百度里一搜一大把。

网络没问题了,再次执行命令:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

可能会出现如下问题:
It appears Homebrew is already installed. If your intent is to reinstall you
should do the following before running this installer again:
ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)”
The current contents of /usr/local are bin git .git

大概意思是你本地已经安装好Homebrew了,实际是残缺的。你需要执行上面提示的命令卸载之前安装的残缺版本:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"

控制台LOG信息截图如下:
这里写图片描述

再次执行命令:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

控制台LOG信息截图如下:
这里写图片描述

2、通过Homebrew安装nvm,命令如下:

brew install nvm

注:nvm是Node.js的版本管理器,可以轻松安装各个版本的 Node.js 版本。
安装完毕,按提示执行下面两行命令:

mkdir ~/.nvm
export NVM_DIR=~/.nvm

3、安装Node.js,命令如下:

nvm install node && nvm alias default node

注:安装好Node.js之后,npm 也有了。

控制台LOG信息截图如下:
这里写图片描述

4、安装好之后,查看版本信息如下:

node -v
npm -v

控制台LOG信息截图如下:
这里写图片描述

5、安装watchman和flow(这两个包分别是用来监控文件变化和类型检查的),命令如下:

brew install watchman
brew install flow

6、通过npm安装React-Native,命令如下:

npm install -g react-native-cli

控制台LOG信息截图如下:
这里写图片描述

7、设置环境变量ANDROID_HOME,命令如下:

export ANDROID_HOME=/Applications/Tool/adt-bundle-mac-x86_64-20130917/sdk

其中/Applications/Tool/adt-bundle-mac-x86_64-20130917/sdk为你本地SDK的目录

全部安装完毕后,查看版本号信息如下图:
这里写图片描述

二、创建第一个react-native项目
1、初始化第一个项目,命令如下:

react-native init bolomeProject

你可能会遇到如下错误:
This will walk you through creating a new React Native project in /Users/android_ls/bolomeProject
Installing react-native package from npm…

npm ERR! registry error parsing json
npm ERR! Darwin 15.2.0
npm ERR! argv “/Users/android_ls/.nvm/versions/node/v5.5.0/bin/node” “/Users/android_ls/.nvm/versions/node/v5.5.0/bin/npm” “install” “–save” “react-native”
npm ERR! node v5.5.0
npm ERR! npm v3.3.12

npm ERR! shasum check failed for /var/folders/4m/3wr7c_xj7336fylxzrljv0qm0000gn/T/npm-68134-fc1c823d/registry.npmjs.org/moment/-/moment-2.11.2.tgz
npm ERR! Expected: 87968e5f95ac038c2e42ac959c75819cd3f52901
npm ERR! Actual: 4db3e24c23c292b0c30556d5d9de5ee7a2663662
npm ERR! From: https://registry.npmjs.org/moment/-/moment-2.11.2.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /Users/android_ls/bolomeProject/npm-debug.log

npm install --save react-native failed

控制台LOG信息截图如下:
这里写图片描述

这到底是什么问题呢?你没猜错,又是该死的网络问题。
react-native命令行从npm官方源拖代码时会遇到问题,需要将npm仓库源替换为国内淘宝的镜像,执行如下两行命令:

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

2、重新执行初始化项目命令:

react-native init bolomeProject

会报如下提示:
prompt: Directory bolomeProject already exists. Continue?: (no)
Project initialization canceled
控制台LOG信息截图如下:
这里写图片描述
解决办法,进入bolomeProject所在目录,然后删除它。

3、再次执行初始化项目命令:

react-native init BolomeProject

构建项目成功后,log如下:
This will walk you through creating a new React Native project in /Users/android_ls/BolomeProject
Installing react-native package from npm…
Setting up new React Native app in /Users/android_ls/BolomeProject
To run your app on iOS:
cd /Users/android_ls/BolomeProject
react-native run-ios
- or -
Open /Users/android_ls/BolomeProject/ios/BolomeProject.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
cd /Users/android_ls/BolomeProject
react-native run-android

控制台LOG信息截图如下:
这里写图片描述

4、进入BolomeProject的目录

cd /Users/android_ls/BolomeProject

执行下面的命令:

react-native run-android

若使用真机调试,需要执行下面这行命令:

adb reverse tcp:8081 tcp:8081
搭建 React Native 环境需要以下步骤: 1. 安装 Node.js React Native 依赖 Node.js 运行环境,因此需要先安装 Node.js。你可以在官网上下载适合你操作系统的版本并安装。 2. 安装 React Native 命令行工具 在终端中运行以下命令安装 React Native 命令行工具: ``` npm install -g react-native-cli ``` 3. 安装 Java SE Development Kit 安装 Java SE Development Kit (JDK) 是因为 React Native 的一些依赖需要 Java。你可以在官网上下载适合你的操作系统的版本并安装。 4. 安装 Android Studio 安装 Android Studio 是因为 React Native 开发需要 Android 环境Android Studio 提供了 Android 的开发工具和模拟器。你可以在官网上下载适合你操作系统的版本并安装。 5. 配置 Android SDK 在 Android Studio 中配置 Android SDK。打开 Android Studio,选择 "Configure" -> "SDK Manager",在 "SDK Platforms" 标签页中选择相应的 Android 版本并安装,然后在 "SDK Tools" 标签页中安装 "Android SDK Build-Tools" 和 "Android SDK Platform-Tools"。 6. 配置环境变量 将以下路径添加到环境变量中: ``` ANDROID_HOME=<path to Android SDK> ``` 将 `<path to Android SDK>` 替换成你的 Android SDK 的路径。在 macOS 或 Linux 中,可以将以上命令添加到 `~/.bash_profile` 文件中。 7. 创建 React Native 项目 在终端中运行以下命令创建一个新的 React Native 项目: ``` react-native init <project name> ``` 将 `<project name>` 替换成你的项目名称。等待一段时间,直到项目创建完成。 8. 运行 React Native 项目 进入项目目录,运行以下命令启动项目: ``` cd <project name> react-native run-android ``` React Native 将会自动编译和安装应用程序到模拟器或连接的设备中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值