React-Native环境的搭建并运行facebook例子

最新推荐文章于 2024-11-20 13:51:27 发布

原创最新推荐文章于 2024-11-20 13:51:27 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-native #node.js #android #ios

Android 同时被 2 个专栏收录

20 篇文章

订阅专栏

react-native

2 篇文章

订阅专栏

本文详述了如何搭建React-Native环境，包括安装Homebrew、Node.js、React Native命令行工具、Xcode和Android Studio，以及watchman和flow。接着，文章指导如何初始化一个React Native项目，并在Android或iOS模拟器上运行Facebook的Movies示例项目，强调了在运行前需要安装Android SDK、NDK（推荐版本为10e）并配置环境变量。

react-native环境的搭建

1、安装Homebrew

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

可以通过下面命令查看Homebrew是否安装成功

brew -v

2、安装Node.js

可以通过下载地址（Node.js官网下载）：

https://nodejs.org/en/

也可以在终端运行命令：

brew install node

之后通过：

npm -v

查看安装的node.js版本

3、安装React Native 命令行工具

React Native 命令行工具可以创建和初始化React Native的项目，还有其他打包等功能
在控制台运行：

sudo npm install -g react-native-cli

安装成功后可以通过如下指令查看：

react-native --help

4、安装Xcode和android studio

不细说，Xcode可以在苹果商店下载，AS可以在官网下载安装

5、安装 watchman

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

brew install watchman

6、安装 flow

开源的 JavaScript 静态类型检查器，旨在发现 JS 程序中的类型错误，以提高程序员的效率和代码质量

brew install flow

7、初始化一个项目

打开终端，cd到自己的工作目录

react-native init FirstApp

这时候可能比较慢，打开一个新的终端

cd /

打开根目录找到.npmrc文件打开加入

registry=https://registry.npm.taobao.org

或者

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

然后，来到新建的项目下：

cd FirstApp
react-native run-android
react-native run-ios

即可在模拟器运行安卓模拟器command＋m或者菜单键可以打开开发菜单rr可以刷新，ios可以使用command＋d，command＋r刷新

开发工具使用WebStrom 这个 HTML 开发神器

运行facebook的例子

打开自己的项目目录，从github克隆facebook项目：

git clone https://github.com/facebook/react-native.git
cd react-native
npm install

打开安卓模拟器，运行Movies的例子

cd react-native
./gradlew :Examples:Movies:android:app:installDebug
./packager/packager.sh

或者

./gradlew :Examples:UIExplorer:android:app:installDebug
./packager/packager.sh

注意：在运行上面的命令之前，你需要先装好Android sdk，除了这个还需要安装好NDK，并设置好环境变量。注意NDK可能不能用最新的版本，需要用10e版本，不然可能会发生错误

通过例子的分析可以对React native有个最初的了解