React Native项目搭建运行与踩坑注意点

前言

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 的锁定文件，用于确保项目的依赖项版本一致。

踩坑注意点：

1. 子级加flex:1，需要每层父级都加flex: 1，否则不显示视图
2. 移动端只渲染和显示肉眼可见的DOM
3. h5是流式布局，移动端是约束布局(以视窗为约束，子组件以父组件为约束，占满)
4. 元素高度如果不指定，超出屏幕高度会报错，且不渲染
5. view = div + display: flex
6. css的flex权重高于height、width
7. 如果是scrollview 不设定高度和flex的话布局会崩
8. app的路由会一直缓存累积，不会自动清空，没有数量限制
9. 模拟器用电脑键盘输入会导致软键盘消失。在模拟器I/O 处选择keyboard ⇒ toggle software keyboard
10. 每当依赖变动，记得去ios文件下运行pod install
11. 原生组件有变动时需要重启项目

常用快捷指令

rnc + tab   生成 class
rnf + tab   生成function

模拟器常用快捷键

CMD+R  刷新
CMD+D  debugger