React Native组件无响应用户输入：ScrollView与MapView异常求助

你的核心问题是没有用GestureHandlerRootView作为App的根组件包裹所有内容，导致依赖手势交互的组件（包括ScrollView滚动、MapView的平移/缩放）完全失效。

解决步骤 #

1. 修复ScrollView测试代码 #

修改你的App.js，把所有内容用GestureHandlerRootView包裹：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import Banner from './components/Banner';
import MapScreen from './components/Map';
import TestScreen from './components/TestScreen';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: 'center' }}>
        <Text style={{ fontSize: 24, textAlign: 'center' }}>
          Scroll me!
        </Text>
        <View style={{ height: 400, backgroundColor: '#e5e5e5' }}>
          <ScrollView>
            <View style={{ width: 300, height: 300, backgroundColor: 'red' }} />
            <View style={{ width: 300, height: 300, backgroundColor: 'green' }} />
            <View style={{ width: 300, height: 300, backgroundColor: 'blue' }} />
          </ScrollView>
        </View>
      </View>
    </GestureHandlerRootView>
  );
}

2. 修复MapView原始问题 #

同样给原始App.js添加根包裹：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Banner from './components/Banner';
import MapScreen from './components/Map';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <MapScreen />
    </GestureHandlerRootView>
  );
}

原因说明 #

react-native-gesture-handler会替换原生的手势处理逻辑，必须用GestureHandlerRootView作为整个App的最外层容器，才能让所有依赖手势的组件正常响应用户输入。你已经导入了这个组件，但没有实际使用，这就是所有交互失效的直接原因。

额外检查：

• 确认Expo项目中已包含react-native-gesture-handler（Expo模板默认自带，无需额外安装）
• 对于MapView，确保已安装expo-maps并在app.json中配置了位置权限（如果需要获取用户位置）

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