因为最近想系统的整理一遍ReactNative，打算把Android，IOS涉及的内容都想记录下来，甚至想 “弄一个大的” 想把从Web开发开始到ReactJS再到ReactNative（包括Android/IOS）三大部分里面涉及到的每个技术栈都想整理出来，来弄一个关于ReactNative全面认知的全景图（因为我一直对于Web开发很有兴趣），想法是很宏大，但是路还得一步一步走，所以我们先立一个flag，然后利用空闲看能不能完成这个宏大的计划
我们先来一个开始篇吧，今天来简单介绍下关于ReactNative的环境搭建，工欲善其事，必先利其器，让我们开始吧：
首先安装HomeBrew：
/bin/wen -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能
其次根据HomeBrew安装node：
brew install node
nodeJS是一个JavaScript的运行环境
根据HomeBrew安装npm：
brew install npm
npm是nodeJS的包管理工具
根据HomeBrew安装watchman：
brew install watchman
Watchman是Facebook开发的一种用于监视文件更改的工具，简单的JavaScript脚本更新不需要刷新，立即生效可见
根据npm安装react-native-cli：
npm install -g react-native-cli
react-native-cli是Node.js的一个插件，可用于命令行执行React Native命令和RN应用启动时检查服务端js文件是否更新,以及进行打包服务。
根据package.json 安装所有依赖的包：切换到项目目录下运行 npm install 命令安装依赖
如果是Mac xcode下的IOS项目千万别忘记了还有早pod目录下运行pod install安装库文件哦（新版本好像不需要了）
如果某个module运行报错可以试试重新卸载所有modules：rm -rf node_modules，然后用yarn来安装：yarn install（这个也是官方的推荐）
启动命令：react-native run-ios 启动IOS虚拟机，react-native run-android 启动Android虚拟机
如果想真机调试的话，以IOS为例需要修改几句代码即可实现（其实网络上也有不需要改代码实现的，但是我这种方式很早就出现了，而且一直都可以使用）
没带代码之前的：
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"MyReactNative2"
initialProperties:nil];
修改为：
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.109:8081/index.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"MyReactNative2" //这个"App1"名字一定要和我们在index.js中注册的名字保持一致
initialProperties:nil//RN初始化时传递给JS的初始化数据
launchOptions: nil];
上面IP地址填你调试PC的IP地址即可，端口不变，切记你的手机要与你的PC在同一WIFI才有效
如果想选择虚拟机启动例如：react-native run-ios --simulator "iPhone 8”（也可以在package.json中去配置简易的命令这个就不详细写了）
网友评论