React Native垂直滚动疑问：是否需为每个页面添加ScrollView？

首先明确：垂直滚动不是React Native视图的默认特性。默认的View组件只是一个布局容器，它只会渲染自身尺寸范围内的内容，超出部分会被直接裁剪，不会提供滚动能力。

是否每个页面都需要加ScrollView？ #

不需要，分两种情况处理：

• 如果页面内容固定且确定不会超出屏幕范围，直接用普通View作为根容器即可，没必要加ScrollView；
• 如果页面内容动态（比如加载列表、长文本）或可能超出屏幕，就需要用ScrollView包裹页面内容。另外要注意：如果是大量列表数据，优先用FlatList或SectionList，这两个组件是按需渲染可见区域的内容，性能比一次性渲染所有内容的ScrollView好得多。

简单示例：用ScrollView实现页面滚动 #

import { ScrollView, View, Text, StyleSheet } from 'react-native';

export default function LongContentScreen() {
  return (
    <ScrollView style={styles.root}>
      <View style={styles.contentWrapper}>
        {/* 这里放置你的长内容 */}
        <Text style={styles.textBlock}>这是一段测试文本，重复多次用来填充页面...</Text>
        <Text style={styles.textBlock}>这是一段测试文本，重复多次用来填充页面...</Text>
        <Text style={styles.textBlock}>这是一段测试文本，重复多次用来填充页面...</Text>
        <Text style={styles.textBlock}>这是一段测试文本，重复多次用来填充页面...</Text>
        <Text style={styles.textBlock}>这是一段测试文本，重复多次用来填充页面...</Text>
        <Text style={styles.textBlock}>这是一段测试文本，重复多次用来填充页面...</Text>
        <Text style={styles.textBlock}>这是一段测试文本，重复多次用来填充页面...</Text>
        <Text style={styles.textBlock}>这是一段测试文本，重复多次用来填充页面...</Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
  contentWrapper: {
    padding: 16,
  },
  textBlock: {
    fontSize: 18,
    marginBottom: 16,
    lineHeight: 24,
  },
});

为什么默认不支持滚动？ #

React Native的布局系统基于Flexbox，设计上优先让开发者自主控制容器行为。如果默认所有View都能滚动，反而会带来不必要的性能开销和布局混乱——比如很多页面根本不需要滚动，强制滚动会增加无意义的渲染逻辑。让开发者根据需求选择滚动容器，更符合React Native的灵活设计思路。

内容的提问来源于stack exchange，提问作者Rohan Vaish