React Native 开发环境搭建
0.React Native简介
- React Native 是什么?
React Native 是Facebook 发布的一个可以进行混合开发的框架 - React Native 能干什么 ?
React Native可以开发 iOS和安卓的应用 - 使用React Native 最大的优势?
- 跨平台 (macOS window linux 都能写,写的东西都一样,官网如是说:Learn once, write anywhere)
- 代码复用(一套代码,iOS和安卓都能用)
- 热更新 (不需要重新打包发布,远程修改配置,就能使对当前应用内的修改生效)
1.mac-iOS
- 安装包管理器 Homebrew(Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件)
终端输入
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:
sudo chown -R/usr/local
- 安装Node.js
终端输入
brew install node
安装完后设置镜像加速后面的过程或者科学上网
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
- 安装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
- 安装Xcode
在Appstore 搜索安装或者在开发者中心下载解压安装 - 安装完成 建一个项目看看吧
命令行输入
cd ~/Desktop !#希望项目创建的路径
react-native init TestProject !#react-native init "项目名称"
cd TestProject !#"项目所在路径"
react-native run-ios !# 或者直接使用Xcode打开 目录下ios/"项目名称".xcodeproj 点击运行
2.其他环境安装
3.推荐资料
- Reactnative中文网 中文官方学习网站从环境搭建到各组件使用以及各种API 详细介绍
- React Native开发错误警告处理总结 React Native开发过程中遇到的各种问题的解决办法,很详细,跳坑必看
- React Native 完整项目源码分享React Native 完整项目源码分享,目前有40多个项目,作者还在不断更新