美文网首页
React Native 基本环境搭建及快速入门

React Native 基本环境搭建及快速入门

作者: IT小妞儿 | 来源:发表于2016-04-22 17:08 被阅读168次

要求

1、使用Homebrew方式安装watchman和flow

  • Homebrew是OS X下面的包管理应用,检测Homebrew是否安装brew -v
  • 安装Homebrew
    • Homebrew官网,拷贝
      /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"在终端运行
  • 安装watchman brew install watchman(用来检测文件变化的工具)
  • 安装flow brew install flow(检测JSX语法的工具)
    建议定期运行brew update && brew upgrade,使应用程序保持最新状态

2、安装Node.js 4.0或者更高的版本

  • nvm安装指南
    • nvm (Node Version Manager)
    • 安装脚本
      curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
    • 通过克隆,检测最新版本
git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
- 激活nvm `. ~/.nvm/nvm.sh`
- 安装以下内容到`~/.bashrc`, `~/.profile`, 或 `~/.zshrc`  
- `vim .bashrc`、`vim .profile`、`vim .zshrc`
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
- 退出编辑`:wq`
- 使用
    - 查看安装版本`nvm ls`
    - 查看有什么版本可以安装`nvm ls-remote`
    - `nvm install 5`
    - `nvm use 5`
    - 查看node版本`node -v`
  • 运行nvm install node && nvm alias default node(目的安装最新版本的Node.js,并设置终端别名,通过node来运行),使用nvm可以让您安装多个版本的Node.js,并且在他们之间轻松切换

快速开始

  • 安装react-native命令行工具 npm install -g react-native-cli
  • 初始化项目 react-native init AwesomeProject
  • 运行iOS应用程序
    • cd AwesomeProject
    • open ios/AwesomeProject.xcodeproj
    • 可在index.ios.js中编辑代码
    • Command+R来重新加载应用程序并且观察发生的变化
    • 项目目录下,运行npm npm start
    • 如出现如下问题
TransformError: /Users/admin/.nvm/AwesomeProject/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/admin/.nvm/AwesomeProject/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/admin/.nvm/AwesomeProject/node_modules/react-deep-force-update/.babelrc.stage

则删除.nvm/AwesomeProject/node_modules/react-deep-force-update/.babelrc此文件,然后重新启动终端及项目

  • 从网上下载项目,如出现RCTRootView.h文件找不到
    解决方案:RCTRootView属于react-native依赖中的类,需要cd到工程目录下,删除node_modules,命令行执行npm install即可

让安卓支持现有的React Native项目

  • package.json文件中得react-native目录更新到最新的版本
    • npm install
    • react-native android

相关文章

网友评论

      本文标题:React Native 基本环境搭建及快速入门

      本文链接:https://www.haomeiwen.com/subject/twjxrttx.html