React-Native环境简介

ReactNative

须知

1. 推荐使用YARN,切换源yarn config set registry https://registry.npmjs.org
2. 为了避免不意外的错误，所有的安装命令请一定要使用sudo(Mac)或管理员(Windows)权限
3. 最好自备梯子
4. 推荐使用VSCODE
5. 遇到问题最好先Google,在去对应的库下搜索issue

搭建开发环境

工具安装

1. 安装Node.js版本10以上,完成成功之后使用Node -V查看是否安装成功（需要全局安装）。
2. 安装Python2
3. 安装JDK8
4. 安装Watchman(RN项目中用来检测文件变动并刷新项目)，Mac童鞋需要先安装Homebrew(Mac软件包管理工具)
5. 安装yarn global add react-native-cli(Mac一定要使用sudo,不使用淘宝源)
6. 安装yarn global add typescript
7. Mac调试项目需要安装Xcode,调试安卓项目需要安装Android Studio具体请参考Getting Started

VSCODE推荐配置

1. 安装AutoFile
2. 安装EditorConfig for VS Code
3. 安装Eslint
4. 安装Tslint
5. 安装react-native-styled-component-snippets
6. 安装Gitlens

功能命令简介

1. npm start 启动 react-native 服务
2. npm run ios 启动 IOS模拟器
3. npm run android 启动 安卓模拟器
4. npm run build:android 生成安卓的JS BUNDLE
5. npm run build:ios 生成IOS的JS BUNDLE
6. npm run lint 会对代码进行静态检查

Mac下模拟器环境搭建

1. 安装XCODE
2. 进入项目目录

yarn
npm start
npm run ios

若遇到问题请尝试下列解决方案：
1. 删除IOS目录下的build文件夹
2. 查看是否有权限问题
3. 第一次npm run ios不要用sudo否则创建的文件夹build没有User权限
4. 遇到找不到Print: Entry, “:CFBundleIdentifier”, Does Not Exist,请尝试删除根目录下的.rncache,然后run-ios,还不行在run-ios一次
5. 遇到error:8081,请检测是否有项目占用的8081端口

IOS模拟器调试简介

1. Command+D，选择Enable Remote JS debugging会拉起打开Chrome,打开控制台则能正常debugger项目
2. Command+R是刷新工程
3. Toggle Inspector类似Chrome的Inspector可以查看元素样式
4. 如果想查看State的值可以安装react-devtools具体使用方法和上面类似
5. Hot Reloading是开启热重载形式，更改文件后会自动刷新

Android模拟器调试简介

1. 安装Android Studio（启动的时候需要拉取Google的服务请先翻墙）
2. 在Android Studio中新建个工程,并Run(具体自行百度很多)
3. 在Mac下有时候并不能成功唤起安卓模拟器,我们可以先进入Android Studio手动唤起模拟器,在npm run android
4. 在安卓模拟器中我们Command+M唤起调试工具,有时候会遇到不能loading的情况,我们需要进入调试工具dev settings选择 Debug server然后填写localhost:8081
   
   

Tips:
关于项目开发中有些改动必须强制Command+R，遇到红屏多Command+R下确认能避免60%的问题。
如果要查看2个端的效果，请先运行安卓，在运行IOS。2个端如果同时Hot Reload会有问题。
1. 增加文件
2. 更改theme.ts
3. 修改路由文件