无法让scrollview在android上实际滚动

Question

我正在遵循 yt 教程，但我就是无法让它工作。我不认为我已经尝试过让某些东西发挥作用，老实说，你会期望像 React Native 这样的东西能够开箱即用，它不仅不起作用，而且要让它发挥作用也不是微不足道的，我多年来看到了很多关于此问题的帖子，最近还看到了一些帖子，我相信这仍然是 github 上的一个开放问题，请告诉我这是否绝对无法修复，这样我也许可以使用外部库。 （这个问题在使用expo go应用程序扫描二维码后尤其在Android上出现，我不知道它是否适用于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"
  }

Answer 1

使用 flex 来代替

 <SafeAreaView style={{flex: 1}}>
      <ScrollView style={{flex: 1}}>
        {/* add your content inside ScrollView here */}
      </ScrollView>
</SafeAreaView>