记录学习 React Native 的过程中遇到的问题及一些需要注意的事项

滚动视图

ScrollView 适合用来显示数量不多的滚动元素。放置在 ScrollView 中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的 FlatList 组件。

使用长列表

FlatList 组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

FlatList 更适于长列表数据，且元素个数可以增删。和 ScrollView 不同的是，FlatList 并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

特定平台

1.使用 Platform 模块判断当前平台

2.使用不同的文件后缀，区分不同平台引入的文件，例如，iOS 平台引入 .ios.js，安卓平台引入 .android.js。还可以区分 APP 和 web，前者用 .native.js，后者用 .js，需要注意在 web 项目构建时忽略 .native.js 文件。

开发环境

在搭建开发环境时遇到几个问题：

创建项目

遇到的问题是使用 npx @react-native-community/cli@latest init project 命令时，报 fetch error 的错，但是网络是正常的，并且可以科学上网；后来查了一下，ai 提示在执行命令时需要加 sudo，加上之后可以正常创建项目

安装 watchman 时报错

这里报的错是：Error: python@3.12: the bottle needs the Apple Command Line Tools to be installed.

报错信息其实听明确的，只是我在想我的 mac 上是有 Command Line Tools 的，为什么还会报？

后来想了下应该是升级 XCode 的时候可能没更新 Command Line Tools，所以直接跟着提示，执行 xcode-select install 即可

启动项目时报错

这里的报错信息是：

error Unable to open base configuration reference file '/Users/henry/Desktop/xx/xx/ios/Pods/Target Support Files/Pods-xx/Pods-xx.debug.xcconfig'. (in target 'xx' from project 'xx')

这个问题的解决路径有点复杂，首先我在 react-native-community/cli 的代码库里看了一下 readme 文件，里面提到在初始化项目完成后，ios 和安卓项目需要做不同的处理，暂时先只看 ios 的：

For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps). The first time you create a new project, run the Ruby bundler to install CocoaPods itself: bundle install. Then, and every time you update your native dependencies, run: bundle exec pod install. For more information, please visit CocoaPods Getting Started guide.

查看原文

也就是说，对于 ios，在初始化项目完成之后，要在根目录执行 bundle install，执行完成之后在根目录会出现一个名为 ios 的文件夹；这时进入这个目录执行第二步：pod install，类似 npm install 或 yarn，即安装原生组件依赖。

安装完成后再执行 yarn ios，即可正常启动项目