ReactNative遇到的深坑和搭建项目建构
1.导读
- 在搭建
React Native
的途中真的是遇到太多问题了 - 。。。这里记录一下
- 使用的操作系统是
Macos Monterey
- 可以直接克隆我的仓库 修改成自己的架构
- 仓库地址
- 已经集成了
- antd/react-native
- dva
- axios
- react-native-config (区分开发环境)
- eslint
- typescript
- reactnavigation (路由导航)
2.bug汇总
- 先进行下一步,遇到问题再回来看看
1 | # 搭建环境下载依赖一直失败 |
3.准备阶段
基本环境的安装
1 | npx react-native init AwesomeProject |
Android模拟器
- 这里就不提这个了
- 按照官网一步一步操作 && 有一个梯子 不然下载应用网站打不开 或者找第三方的地方下载
- 其次 配置环境变量时
open ~/.bash_profile
或open ~/.zshrc
打不开- 可能是自己电脑之前配置有问题
- 用这个命令打开
open -e ~/.bash_profile
调试
我的方案
- 我这里最终搭建的体系是采用
react-native-debugger
和ios
模拟器结合react-native-debugger 集成了 console.log network redux
调试工具等功能ios
模拟器 支持提示错误 元素审查 等功能- 基本满足调试的所有需要了
1 | # brew install --cask react-native-debugger |
调试如何使用
在调试中遇到的bug我统一放在第二章说明了,有问题话往前翻
- 刷新模拟器:两种方法
- 1.按两下
R || r
快速刷新 - 2.手动在模拟器操作
ios: command+R || command+D => reload
android: command + m reload
(模拟器在 应用=> avd => manager
里面)
- 1.按两下
- 审查元素
commend+d
show Inspector
- 点击元素
console.log
- 1.直接使用
react-native-debugger
调试工具console.log
界面就能看到了 - 2.运行模拟器的终端
- 3.
command+D
Debug with Chrome
- 切换到
console
界面 - 将
top
切换为debug...
- 1.直接使用
- 网络请求
react native debugger
- 在
Element
页面 右键开启enable network
- 然后在
network
页面刷新就能看到网络请求了
redux|dva
- 在
react native debugger
页面就能看到了
- 在
其他调试方案单独步骤
如果按照react-native-debugger方案,不需要看这里的内容,直接跳过
ts语法提示
1 | npm install --save @types/react-native |
网络请求
1 | // vscode 安装 react native tools 插件 |
react调试工具
1 | // npm i -g react-devtools@^4.13.0 |
目录结构
1 | __tests__ |
4. 插件集成
dva
1 | yarn add dva-core-ts react-redux @types/react-redux |
react-native-config
1 | // 区分多环境 需要重新打包 |
babel-plugin-module-resolve
1 | yarn add babel-plugin-module-resolver |
antd/reactNative
1 | import { View, Text, Button } from "react-native" |
React Navigation
1 | 这个直接参考官方文档就可以了 我没有遇到什么问题 |
5. 参考链接
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LiuYuanhua!
评论