React Native 开发第一节-优快云博客

React Native 开发第一节记录

搭建开发环境

1.1 安装 Homebrew https://brew.sh 打开终端输入粘贴

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

 然后回车键，自动下载完成。

1.2 使用Homebrew来安装 Node 和 Watchman

brew install node
brew install watchman

如果你已经安装了 Node，请检查其版本是否在 v8.3 以上。安装完 Node 后建议设置 npm 镜像以加速后面的过程

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

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能

1.3 Yarn、React Native 的命令行工具（react-native-cli）

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

npm install -g yarn react-native-cli

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

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

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

2.0 创建项目AwesomeProject

react-native init AwesomeProject

运行项目 ios

cd AwesomeProject
react-native run-ios

运行项目 android

cd AwesomeProject
react-native run-android

运行的时候出现一个坑：

坑一：
The development server returned response error code: 500

解决方法：

react-native start --reset-cache 
adb reverse tcp:8081 tcp:8081
cd AwesomeProject
react-native run-android

坑二：
unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

解决方法：

新建assets

进入\android\app\src\main 
新建assets文件夹

react-native bundle --platform android --dev false --entry-file
index.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest
android/app/src/main/res

运行run-android

React Native 开发第一节

React Native 开发第一节记录

相关推荐