React Native项目搭建运行与踩坑注意点
站长
· 阅读数 17
前言
react native开发项目的坑巨多，学习几天下来被配置整得挺狼狈。还好学到就是赚到。多做记录和分享，避免踩更多的坑。
创建和运行项目
# 初始化
react-native init myproject
cd myproject
yarn install
# 如果ios报错
cd ios
bundle install
bundle exec pod install（需要梯子，容易失败，多来几次）
# 启动方式一
yarn start(运行后根据选项选择，按i启动ios模拟器)
// 或者使用以下方式，清除缓存后启动
yarn start —reset-cache
# 启动方式二
yarn ios
调试工具安装
# 安装 react-native-debugger
brew update && brew install react-native-debugger
# package.json文件中添加如下代码
"debugger": "open 'rndebugger://set-debugger-loc?host=localhost&port=8081' || node node_modules/react-native/local-cli/server/util/debugger-ui",
# 启动调试器
yarn run debugger
项目目录结构
__tests__/： 包含测试文件的目录，可以用来编写单元测试。android/： 包含 Android 项目的目录，可用于使用 Android Studio 打开。ios/： 包含 iOS 项目的目录，可用于使用 Xcode 打开。node_modules/： 包含项目依赖的所有 Node.js 模块。 可以通过npm install安装或者通过yarn add添加依赖。src/： 包含应用程序源代码的目录。components/： 包含应用程序的 React 组件。screens/： 包含应用程序的屏幕。services/： 包含应用程序的服务。utils/： 包含应用程序的实用函数。App.js： 应用程序的主要入口点。index.js： 用于创建 React Native 应用程序的入口点。
.buckconfig： 用于 Buck 构建系统的配置文件。.editorconfig： 用于设置编辑器的配置文件。.eslintignore： 指定哪些文件或目录应该被 eslint 忽略。.eslintrc.js： eslint 的配置文件。.flowconfig： Flow 静态类型检查器的配置文件。.gitattributes： 用于配置 Git 的属性。.gitignore： 指定哪些文件应该被 Git 忽略。.watchmanconfig： Watchman 文件监视器的配置文件。app.json： 应用程序的元数据和配置。babel.config.js： Babel 转换器的配置文件。index.js： 用于创建 React Native 应用程序的入口点。metro.config.js： Metro 打包器的配置文件。package.json： 包含应用程序的所有依赖项和脚本的配置文件。README.md： 应用程序的说明文档。yarn.lock： Yarn 的锁定文件，用于确保项目的依赖项版本一致。
踩坑注意点：
- 子级加flex:1，需要每层父级都加flex: 1，否则不显示视图
- 移动端只渲染和显示肉眼可见的DOM
- h5是流式布局，移动端是约束布局(以视窗为约束，子组件以父组件为约束，占满)
- 元素高度如果不指定，超出屏幕高度会报错，且不渲染
- view = div + display: flex
- css的flex权重高于height、width
- 如果是scrollview 不设定高度和flex的话布局会崩
- app的路由会一直缓存累积，不会自动清空，没有数量限制
- 模拟器用电脑键盘输入会导致软键盘消失。在模拟器I/O 处选择keyboard ⇒ toggle software keyboard
- 每当依赖变动，记得去
ios文件下运行pod install - 原生组件有变动时需要重启项目
常用快捷指令
rnc + tab 生成 class
rnf + tab 生成function
模拟器常用快捷键
CMD+R 刷新
CMD+D debugger