10、React Native 组件开发：评论功能实现全解析

React Native 组件开发：评论功能实现全解析

1. 评论列表组件（CommentList）

在开发过程中，若要查看组件的实际效果，可在 App 中进行渲染测试。接下来，我们要为每张图片渲染评论列表，这里使用 ScrollView 来实现。

ScrollView 相较于 FlatList 更为简单，它能将所有子元素渲染为垂直或水平滚动列表，无需处理 keyExtractor 或 renderItem 等复杂属性。不过，ScrollView 适合滚动少量内容（约少于 20 项），因为即使内容不在屏幕可视范围内，也会进行渲染。对于大量数据或有许多子元素在屏幕外的情况，建议使用 FlatList 以提升性能。

ScrollView 的尺寸和布局可看作是一个外部视图包裹着一个内部视图。外部视图有固定大小，而内部视图大小可能超出外部视图，若超出则仅显示部分内容。传递给 ScrollView 的子元素会在内部视图（即“内容容器视图”）中渲染，且可单独对其进行样式设置。

在开发应用时，有时渲染 ScrollView 却看不到内容，常见原因如下：
- 内容容器视图默认 flex: 0，高度初始为 0，会扩展到容纳子元素的最小尺寸。若子元素设置 flex: 1，由于内容容器初始高度为 0，该子元素将不可见。虽然可将 contentContainerStyle 设置为 flex: 1，但这可能并非理想选择，因为这样内容不会超过外部视图大小。应确保传递给 ScrollView 的子元素有大于 0 的固有高度值，可通过设置显式高度或包含有高度的子元素来实现。
- 外部视图大小不会根据内容容器视图改变。除确保 ScrollView 的子元素有非零高度外，还需