Expo React Native：ScrollView移动端正常但Web端无法滚动

问题场景 #

使用React Native + React Native Web构建跨端项目，移动端ScrollView可正常滚动，但Web端无法触发滚动，调整flex属性后问题仍未解决。复现代码如下：

App.js #

import { SafeAreaView, StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import TestScreen from './screens/TestScreen';

const Stack = createStackNavigator();

export default function App() {
return (
 <SafeAreaView style={{flex: 1}}>
   <NavigationContainer>
     <StatusBar style="auto"/>
     <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name="Test" component={TestScreen} />
    </Stack.Navigator>
  </NavigationContainer>
</SafeAreaView>);}

TestScreen.js #

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

export default function HomeScreen() {
  return (
    <ScrollView>
      <View style={styles.box}>
        <Text>Box 1</Text>
      </View>
      <View style={styles.box}>
        <Text>Box 2</Text>
      </View>
      <View style={styles.box}>
        <Text>Box 3</Text>
      </View>
      <View style={styles.box}>
        <Text>Box 4</Text>
      </View>
      <View style={styles.box}>
        <Text>Box 5</Text>
      </View>
      <View style={styles.box}>
        <Text>Box 6</Text>
      </View>
    </ScrollView>);}

  const styles = StyleSheet.create({
    box: {
      height: 200,
      margin: 20,
      backgroundColor: 'skyblue',
      justifyContent: 'center',
      alignItems: 'center',
    },
});

解决方案 #

1. 给ScrollView添加明确的尺寸约束 #

Web端ScrollView需要明确的高度限制才能触发滚动，修改TestScreen代码，给ScrollView外层套一个带flex:1的View，并给ScrollView本身也设置flex:1：

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

export default function HomeScreen() {
  return (
    <View style={{flex:1}}>
      <ScrollView style={{flex:1}}>
        <View style={styles.box}>
          <Text>Box 1</Text>
        </View>
        <View style={styles.box}>
          <Text>Box 2</Text>
        </View>
        <View style={styles.box}>
          <Text>Box 3</Text>
        </View>
        <View style={styles.box}>
          <Text>Box 4</Text>
        </View>
        <View style={styles.box}>
          <Text>Box 5</Text>
        </View>
        <View style={styles.box}>
          <Text>Box 6</Text>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    height: 200,
    margin: 20,
    backgroundColor: 'skyblue',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

2. 重置Web端全局样式 #

Web端默认的html/body样式可能干扰滚动，在项目全局样式文件（如index.css）中添加：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#root {
  height: 100vh;
}

3. 校验版本兼容性 #

确保react-native-web与react-navigation版本匹配，避免因版本冲突导致的滚动异常。可通过npm list react-native-web查看当前版本，必要时升级至稳定版。

原因说明 #

Web端的ScrollView依赖明确的尺寸约束，不像移动端会自动填充父容器剩余空间。当ScrollView无明确高度时，会被内容完全撑开，超出视口的部分无法触发滚动。通过给外层View和ScrollView设置flex:1，让它们继承SafeAreaView的高度，形成可滚动的固定区域，从而解决Web端滚动失效问题。

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