一个Android开发者的React Native入门（一）

环境搭建

参考：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:端口号 即可

转载于:https://juejin.im/post/5ce9f1d0e51d4556da53d02c