ReactNative开发环境配置

核心理念：既拥有Native的用户体验,又保留React的开发效率.

目前,React Native基本完成了对多端的支持,实现了真正意义上的面向配置开发:开发者可以灵活的使用HTML和CSS布局,使用React语法构建组件,实现:H5,Android,iOS多端代码的复用.

React Native的优势

• 跨平台开发: 运用React Native,我们可以使用同一份业务逻辑核心代码来创建原生应用运行在Web端,Android端和iOS端;
• 追求极致的用户体验:实时热部署
• Learn once, write anywhere 只需要学习React Native，我们就能够编写针对不同平台的应用，并且使用React Native框架开发相较于原生代码开发应用，更简单更高效。

React Native开发注意事项

• 官方文档

目前React Native在iOS上仅支持ios7以上,Android仅支持Android4.1以上版本;
github地址:https://github.com/facebook/react-native
官方文档:http://facebook.github.io/react-native/docs/getting-started.html

环境需求

1.1安装Homebrew

ruby -e"$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"

命令行执行brew -v进行检查brew是否已经安装成功

1.2安装npm 和 Node.js

brew install node

此方式需要将Xcode更新到8.0

1.3安装WatchMan

watchman是Facebook用于监视JavaScript文件改动的开源项目,该插件用于监控bug变化和文件变化,并且可以触发指定的操作

brew install watchman

1.4安装flow

flow是Facebook开源的一个JavaScript静态类型检查器，建议安装它,以方便找出JavaScript程序中可能存在的类型错误

brew install flow

==注意事项==

• 在Mac终端上出现npm command not found
  执行

curl -L http://npmjs.org/install.sh | sudo sh

• 配置全局环境变量
  打开Mac终端，配置全局环境变量

vim .bash_profile

打开之后添加一行以下代码，（Mac的node，npm可执行文件都在/usr/local/bin/目录下）

PATH=$PATH:/usr/local/bin/

:wq  //保存并退出
#执行下面一句代码
$source .bash_profile

• bash: react-native: command not found

npm install -g yarn react-native-cli //安装多个包
npm install -g react-native-cli 

React Native的安装

安装react-native-cli

react-native-cli是React Native的命令行工具，安装react-native-cli后我们就能够通过react-native相关命令管理ReactNative工程。

npm install -g react-native-cli 

不报错即为安装成功

创建第一个RN工程

react-native init 项目名称(RN)

是否成功标志

Installing Jest...
+ metro-react-native-babel-preset@0.51.1
+ react-test-renderer@16.6.3
+ babel-core@7.0.0-bridge.0
+ babel-jest@24.1.0
+ jest@24.1.0
added 449 packages from 255 contributors and updated 2 packages in 63.055s
To run your app on iOS:
   cd /Users/MengYu/Desktop/RN
   # react-native run-ios
   - or -
   Open ios/RN.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/MengYu/Desktop/RN
   Have an Android emulator running (quickest way to get started), or a device connected
   # react-native run-android

** BUILD SUCCEEDED **

The following commands produced analyzer issues:
    Analyze /Users/MengYu/Desktop/RN/node_modules/react-native/React/Base/RCTModuleMethod.mm normal x86_64
    Analyze /Users/MengYu/Desktop/RN/node_modules/react-native/Libraries/Image/RCTImageCache.m normal x86_64
    Analyze /Users/MengYu/Desktop/RN/node_modules/react-native/Libraries/Network/RCTNetInfo.m normal x86_64
(3 commands with analyzer issues)
Installing build/Build/Products/Debug-iphonesimulator/RN.app
Launching org.reactjs.native.example.RN
org.reactjs.native.example.RN: 18533

运行iOS工程

cd /Users/MengYu/Desktop/RN
   #执行 react-native run-ios

运行成功标志

ReactNative开发环境配置

原文：https://www.cnblogs.com/StevenHuSir/p/10363140.html