React Native中设置高度100%后ScrollView在Android无法滚动

问题原因 #

你给ScrollView的contentContainerStyle设置了height: "100%"，这会强制内容容器高度与ScrollView本身高度一致。当内容实际高度超过屏幕时，Android的ScrollView会因为容器高度限制，判定没有可滚动空间；而iOS的滚动逻辑允许轻微滑动，所以表现正常。同时底部按钮被遮挡，也说明内容实际高度已超出屏幕，但容器高度限制导致滚动失效。

解决方案 #

1. 替换contentContainerStyle的高度设置：用flexGrow: 1替代height: "100%"，让内容容器自适应内容高度，同时保证ScrollView占满可用空间。
2. 优化底部内容边距：给底部的View添加底部内边距，避免按钮被屏幕底部截断。
3. 可选优化：添加showsVerticalScrollIndicator={false}隐藏滚动指示器，提升视觉体验。

修改后的完整代码 #

import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { Image, ScrollView, Text, TouchableOpacity, View } from "react-native";

import icons from "@/constants/icons";
import images from "@/constants/images";

const Auth = () => {
  const handleLogin = async () => {};

  return (
    <SafeAreaView className="bg-white h-full">
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
        }}
        showsVerticalScrollIndicator={false}
      >
        <Image
          source={images.onboarding}
          className="w-full h-4/6"
          resizeMode="contain"
        />
        <View className="px-10 pb-8">
          <Text className="text-base text-center uppercase font-rubik text-black-200">
            Welcome To Real Scout
          </Text>

          <Text className="text-3xl font-rubik-bold text-black-300 text-center mt-2">
            Let's Get You Closer To {"\n"}
            <Text className="text-primary-300">Your Ideal Home</Text>
          </Text>

          <Text className="text-lg font-rubik text-black-200 text-center mt-12">
            Login to Real Scout with Google
          </Text>

          <TouchableOpacity
            onPress={handleLogin}
            className="bg-white shadow-md shadow-zinc-300 rounded-full w-full py-4 mt-5"
          >
            <View className="flex flex-row items-center justify-center">
              <Image
                source={icons.google}
                className="w-5 h-5"
                resizeMode="contain"
              />
              <Text className="text-lg font-rubik-medium text-black-300 ml-2">
                Continue with Google
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default Auth;

改动说明 #

• flexGrow: 1：让内容容器在内容不足屏幕高度时自动填充剩余空间，内容超出时自动扩展高度，触发Android的滚动逻辑。
• pb-8：给底部内容添加足够的内边距，确保按钮不会被屏幕底部遮挡，滚动时能完全显示。
• 移除固定height：避免限制内容容器的高度，让ScrollView正确识别可滚动空间。

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