一个Android开发者的React Native入门(一)

238 阅读2分钟

环境搭建

参考:Ract Native 中文网 0.59

安装的依赖:Node、Watchman 和 React Native 命令行工具( Node、Watchman 安装推荐使用Homebrew

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

Homebrew 安装

brew install node 
brew install watchman

Node 和 Watchman 安装

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

安装完 Node 后建议设置 npm 镜像以加速后面的过程 (ps:npm入门

npm install -g yarn react-native-cli

安装 yarn 以及 React Native 的命令行工具(react-native-cli)

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

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

安装完 yarn 后同理也要设置镜像源

配置 Android、IOS 开发环境。。。(此过程忽略)

创建新应用

react-native init AwesomeProject

执行以上代码创建项目名为 AwesomeProject 的项目。

打开 Android 模拟器

cd AwesomeProject
react-native run-android

执行以上代码运行 在Android 模拟器中 ios则是 react-native run-ios

过程中遇到的问题

  • 遇到 permission denied 的问题,在运行命令前面+ sudo,以超级管理员来运行。例如: sudo npm install -g yarn react-native-cli

  • Metro Server 无法启动的问题,错误信息如下图。

这个问题主要是RN启动时会启动一个 Metro Server ,默认部署在127.0.0.1:8080,端口号被占用了。

解决方法有两种,一种是将占用端口的服务停掉,另一种是修改 Metro server 的部署端口号。

这里讲一讲修改 Metro server 端口号的方法。

react-native run-android --port 8088

启动时执行以上代码,8080就是我们启动的端口号

然后是修改客户端。command+m 打开Android模拟器的菜单,Dev Setting->Debug server host & port for device

输入 本机ip:端口号 即可