React Native ScrollView无法滚动问题求助（附相关代码）

问题原因 #

你给CatPreview设置了height:"25%"，这个百分比是相对于父容器（ScrollView的contentContainer）的高度。而你给ScrollView添加了contentContainerStyle={{ flexGrow: 1 }}，这会强制contentContainer的高度撑满父容器（屏幕高度）。11个各占25%高度的组件总高度远超屏幕，但flexGrow:1限制了contentContainer的高度，导致后续组件被截断，无法触发滚动。

另外，你的HomePage.js代码里使用了ScrollView但没有导入，这也是需要修复的问题。

解决方案 #

步骤1：修复ScrollView的contentContainer样式

移除contentContainerStyle={{ flexGrow: 1 }}，让contentContainer的高度由子元素总高度决定，这样ScrollView才能识别内容超出并允许滚动。

步骤2：改用固定高度代替百分比高度

因为百分比高度在ScrollView的contentContainer中无法正确计算（contentContainer高度不固定），可以用Dimensions获取屏幕高度，计算每个CatPreview的固定高度。

修改后的代码 #

HomePage.js

import { ScrollView, Dimensions } from 'react-native';
import CatPreview from '../../components/CatPreview';

// 获取屏幕高度
const screenHeight = Dimensions.get('window').height;

export default function HomePage() {
  const colors_arr = [
      {color:'#2196F3',category:'מסעדה'},
      {color:'#03A9F4',category:'מזנון'},
      {color:'#00BCD4',category:'מלון'},
      {color:'#009688',category:'סושי'},
      {color:'#4CAF50',category:'חלומי'},
      {color:'#8BC34A',category:'לורם'},
      {color:'#CDDC39',category:'איפסום'},
      {color:'#FFEB3B',category:'רוק'},
      {color:'#FFC107',category:'אנד'},
      {color:'#FF9800',category:'רול'},
      {color:'#FF5722',category:'שלום'}
  ];
  return (
      <ScrollView>
          {colors_arr.map((category, key) => (
              <CatPreview 
                  color={category.color} 
                  category={category.category} 
                  key={key}
                  itemHeight={screenHeight * 0.25}
              />
          ))}
      </ScrollView>
  );
}

CatPreview.js

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

export default function CatPreview({color, category, itemHeight}) {
  return (
      <View style={[styles.containerr, {backgroundColor: color, height: itemHeight}]}>
        <View style={{flex:1, alignItems:"center"}}><Text>{category}</Text></View>
        <View style={{flex:2}}></View>
      </View>
  );
}

const styles = StyleSheet.create({
  containerr: {
      // 移除原有的height:"25%"配置
  },
});

额外说明 #

• 如果需要给ScrollView的内容添加内边距，可以在contentContainerStyle里设置paddingVertical或paddingHorizontal，比如contentContainerStyle={{ paddingVertical: 10 }}。
• 确保所有用到的React Native组件都正确导入，避免运行时错误。

内容的提问来源于stack exchange，提问作者LIOR AVIV