Android平台React Native ScrollView无法滚动问题求助

问题描述 #

跟随YouTube教程开发时，React Native的ScrollView在Expo Go扫码后的Android设备上无法正常滚动。尝试过多种方法，发现多年来相关帖子很多，Github上也有未解决的公开issue，现询问：该问题是否完全无法修复？是否需要使用外部库实现滚动功能？（暂未测试iOS平台）

相关代码 #

index.jsx #

import { View, Text, Image, ScrollView } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { images } from '@/constants'
import CustomButton from '../components/CustomButton'
import { StatusBar } from 'expo-status-bar'
import { router, Redirect } from 'expo-router'

const index = () => {
  return (
    <SafeAreaView
      className='bg-primary h-full border border-red-600'
      style={{ flexGrow: 1 }}
    >
      <ScrollView
        contentContainerStyle={{
          height: '100%',
        }}
      >
        <View className='w-full justify-center items-center min-h-[85vh] px-4'>
          <Image
            source={images.logo}
            className='w-[130px] h-[84px]'
            resizeMode='contain'
          />
          <Image
            source={images.cards}
            className='max-w-[380px] w-full h-[300px]'
            resizeMode='contain'
          />
          <View className='relative mt-5'>
            <Text className='text-3xl text-white font-bold text-center'>
              Discover Endless Possibilities with{' '}
              <Text className='text-secondary-200'>Aora</Text>
            </Text>
            <Image
              source={images.path}
              className='w-[136px] h-[15px] absolute -bottom-2 -right-8'
              resizeMode='contain'
            />
          </View>
          <Text className='text-sm font-pregular text-gray-100 mt-7 text-center'>
            Where creativity meets innovation: embark on a journey of limitless
            exploration with Aora
          </Text>
          <CustomButton
            title='Continue with Email'
            handlePress={() => router.push('/sign-in')}
            containerStyles='w-full mt-7'
          />
        </View>
      </ScrollView>
      <StatusBar backgroundColor='#161622' style='light' />
    </SafeAreaView>
  )
}

export default index

package.json #

"dependencies": {
    "@expo/ngrok": "^2.5.0",
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/native": "^6.0.2",
    "expo": "~51.0.28",
    "expo-constants": "~16.0.2",
    "expo-dev-client": "~4.0.25",
    "expo-font": "~12.0.9",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.23",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@expo/ngrok": "^4.1.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.3",
    "react-test-renderer": "18.2.0",
    "tailwindcss": "^3.3.2",
    "typescript": "~5.3.3"
  }

解决方案 #

不需要依赖外部库，问题出在布局设置上，调整后原生ScrollView即可正常滚动：

1. 移除ScrollView的contentContainerStyle中的height: '100%'
   这个设置会让ScrollView的内容容器高度和ScrollView本身一致，内容没有超出容器的部分，自然无法触发滚动。如果需要内容能撑满容器同时允许滚动，可将height: '100%'替换为flexGrow: 1。

   修改后的ScrollView代码：

   <ScrollView
     contentContainerStyle={{
       flexGrow: 1,
     }}
   >
   

2. 调整内部View的min-h-[85vh]设置
   当前View的最小高度设为85vh，若内容实际高度未超过屏幕高度，也不会触发滚动。可以去掉这个min-height设置，让内容自然撑开，或者根据实际需求调整高度，确保内容高度超过屏幕可视区域。

3. 验证SafeAreaView配置
   你的SafeAreaView已经设置了flexGrow: 1，这个是正确的，确保ScrollView能占据足够的空间。

完成以上调整后，ScrollView应该能在Android设备上正常滚动。

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