React Native ScrollView无法向下滚动问题求助

核心问题分析 #

你的代码里导致ScrollView无法滚动的几个关键原因：

• 外层用固定屏幕高度的View包裹ScrollView，直接限制了ScrollView的可滚动空间
• 内部多层View设置height: '100%'，强制内容高度等于父容器高度，无法随内容自然扩展
• BottomTabs被放在ScrollView内部，既不符合导航栏布局逻辑，也会占用滚动容器空间

具体修复步骤 #

1. 移除外层固定高度的View
   删除包裹ScrollView的<View style={{height: screenHeight, backgroundColor: '#fff'}}>，让ScrollView直接作为SafeAreaView的子元素，或仅保留背景色样式，不要固定高度。

2. 删除内部多余的height: '100%'设置
   去掉ScrollView内部最外层的<View style={{height: '100%'}}>及后续嵌套View里的height: '100%'，让内容根据自身高度自然扩展，触发ScrollView滚动机制。

3. 将BottomTabs移到ScrollView外部
   BottomTabs作为底部导航，应放在ScrollView外面，用flex布局让ScrollView占满剩余空间，BottomTabs固定在底部。

4. 优化ScrollView的contentContainerStyle
   保留flexGrow: 1确保内容撑满容器，同时去掉loading状态下ScrollView的固定height设置，避免限制滚动。

修改后的完整代码示例 #

import React, { useEffect, useState } from 'react'
import { 
  View, 
  ScrollView,
  Image,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  Dimensions,
  SafeAreaView
} from 'react-native'

let {width} = Dimensions.get('window');
let {height} = Dimensions.get('window');

const PriceComparison = ( { route, navigation: { goBack } } ) => {
  const {onAdd} = useStateContext();
  const {itemId, itemName, itemStore, itemCategory} = route.params;
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);

  // 补充原代码缺失的变量定义
  const dataLength = data?.length || 0;
  const saving = 0; // 根据实际业务逻辑替换
  const percentageSaving = 0; // 根据实际业务逻辑替换
  const qty = 1; // 根据实际业务逻辑替换

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
      {isLoading ? (
        <ScrollView contentContainerStyle={{ flexGrow: 1, width: width, justifyContent: 'center', alignItems: 'center' }} keyboardShouldPersistTaps='handled'>
          <Text>Loading....</Text>
        </ScrollView>
      ) : (
        <View style={{ flex: 1 }}>
          <ScrollView contentContainerStyle={{ flexGrow: 1, paddingBottom: 80 }}>
            <View style={styles.Header}>
              <TouchableOpacity
                onPress={() => goBack()}
              >
                <Icon icon='arrow-back-outline' color='#000'/>
              </TouchableOpacity>
              <Text style={{fontWeight: '800', fontSize: 20}}>Price Comparison</Text>
            </View>
            { dataLength !== 0 ? (
              <View>
                {data?.sort((a,b) => a.price-b.price).slice(0, 1).map((product, index) => (
                  <View key={index} style={{marginBottom: 20}}>
                    {dummyData.storesData.filter(img => img.store === product.store).map((img, imgIndex) => (
                      <View key={imgIndex} style={styles.Cheapest}>
                        <View style={styles.CheapestLogo}>
                          <Image 
                            style={styles.CheapestLogoImage} 
                            source={{ uri: `${img.shopbyimg}` }}
                          />
                        </View>
                        <View style={styles.CheapestDetails}>
                          <Image 
                            style={styles.ProductImage} 
                            source={{ uri: `${product.image}` }}
                          />
                          <View style={styles.CheapestTitle}>
                            <View style={{width: '70%'}}>
                              <Text style={styles.CheapestName}> {product.name} <Text style={styles.CheapestMeasurement}> {product.measurement} </Text></Text>
                            </View>
                            <Text style={styles.CheapestPrice}> ${product.price}</Text>
                          </View>
                          <View style={styles.CheapestSavings}>
                            <Text style={styles.SavePrice}> Save: ${saving} </Text>
                            <Text style={styles.SavePercentage}> Save up to {percentageSaving}% </Text>
                          </View>   
                          <TouchableOpacity 
                            style={{backgroundColor: '#007AFF', padding: 15, borderRadius: 4, width: '92%', marginTop: 10, marginLeft: 'auto', marginRight: 'auto'}}
                            onPress={() => onAdd(product, qty)}
                          >
                            <Text 
                              style={{color: '#fff', fontWeight: '600', textAlign: 'center'}}>
                              ADD TO CART
                            </Text>
                          </TouchableOpacity>                             
                        </View>
                      </View>
                    ))} 
                  </View>
                ))}    
                {data?.sort((a,b) => a.price-b.price).slice(1, data.length).map((product, index) => (
                  <View key={index} style={{
                    backgroundColor: 'transparent', 
                    width: '92%', 
                    marginLeft: 'auto', 
                    marginRight: 'auto', 
                    borderRadius: 8,
                    marginBottom: 20
                  }}>
                    {dummyData.storesData.filter(img => img.store === product.store).map((img, imgIndex) => (
                      <View key={imgIndex} style={styles.otherProducts}>
                        <View style={styles.otherProductsImage}>
                          <Image 
                            style={styles.otherImages} 
                            source={{ uri: `${product.image}` }}
                          />                                    
                        </View>
                        <View style={styles.otherProductsDetails}>
                          <Image 
                            style={styles.otherImagesLogo} 
                            source={{ uri: `${img.image}` }}
                          />
                          <View>
                            <Text style={styles.CheapestName}> {product.name}</Text>
                            <Text style={styles.CheapestMeasurement}> {product.measurement} </Text>
                          </View>
                          <Text style={styles.CheapestPrice}> ${product.price}</Text>   
                          <TouchableOpacity 
                            style={{backgroundColor: '#007AFF', padding: 10, borderRadius: 4, width: '92%', marginTop: 10,}}
                            onPress={() => onAdd(product, qty)}
                          >
                            <Text 
                              style={{color: '#fff', fontWeight: '600', textAlign: 'center'}}>
                              ADD TO CART
                            </Text>
                          </TouchableOpacity>                             
                        </View>
                      </View>
                    ))}
                  </View>
                ))}             
              </View>
            ) : (
              <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Text> No other product available for price comparison </Text>
                <Text onPress={() => goBack()} style={{color: 'blue', marginTop: 10}}> Return to the previous page </Text>
              </View>
            )}
          </ScrollView>
          <BottomTabs />
        </View>
      )}
    </SafeAreaView>
  )
}

export default PriceComparison

const Icon = (props) => (
 <View>
    <Ionicons 
        name={props.icon} 
        size={25} 
        style={{marginBottom: 3, alignSelf: 'center'}} 
        color={props.color}
    />
</View>
)

const styles = StyleSheet.create({  
Header: {
    marginTop: 40,
    flexDirection: 'row',  
    justifyContent: 'space-between',
    marginHorizontal: 20,
    marginBottom: 20
},

Cheapest: {
  paddingHorizontal: 10,
},

CheapestLogoImage: {
    width: '50%',
    height: 60,
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 10
},

CheapestDetails: {
    marginTop: 5,
},

ProductImage: {
    width: '80%',
    height: 150,
    marginLeft: 'auto',
    marginRight: 'auto',
    resizeMode: "contain"
},

CheapestTitle: {
    flexDirection: 'row', 
    justifyContent: 'space-between',
    marginTop: 20,
    marginHorizontal: 10
},

CheapestName: {
    fontSize: 14,
    fontWeight: '600',
    lineHeight: 19
},

CheapestMeasurement: {
    fontSize: 14,
    fontWeight: '500',
    lineHeight: 19,
    color: '#666'
},

CheapestPrice: {
    fontSize: 14,
    fontWeight: '600',
    lineHeight: 19        
},

CheapestSavings: {
    flexDirection: 'row', 
    marginHorizontal: 10,
    marginVertical: 5      
},

SavePrice: {
    fontSize: 14,
    fontWeight: '600',
    lineHeight: 19,
    color: '#007AFF'
},

SavePercentage: {
    fontSize: 14,
    fontWeight: '600',
    lineHeight: 19,
    color: '#FF6347'
},

otherProducts: {
    flexDirection: 'row',
    padding: 10,
    backgroundColor: '#f5f5f5',
    borderRadius: 8   
},

otherImages: {
    width: 120,
    height: 120,
    resizeMode: "contain",
},

otherProductsDetails: {
    marginTop: 20,
    width: '65%',
    paddingLeft: 10
},

otherImagesLogo: {
    height: 40,
    width: 120,
    marginBottom: 10,
    borderRadius: 6    
}
});

额外注意事项 #

• 确保所有用到的变量（如COLORS、dummyData、useStateContext）已正确定义或导入，避免运行时错误
• 列表渲染时务必添加key属性，提升性能并避免React警告
• 图片使用固定高度可避免布局抖动，百分比高度在嵌套布局中易导致计算错误

内容的提问来源于stack exchange，提问作者Ons Jannet