react-native-awesome-gallery仅显示单张图片且手势功能失效求助

AI 小北

2026-8-18

解决react-native-awesome-gallery无法滑动/缩放手势问题

以下是针对性的排查和修复步骤：

1. 调整GestureHandlerRootView层级

react-native-gesture-handler要求整个应用的根组件被GestureHandlerRootView包裹，而非仅在Gallery局部嵌套。先修改App入口文件（比如App.js）：

// App.js 示例
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* 你的路由/根组件 */}
    </GestureHandlerRootView>
  );
}

完成后，ModalInfos组件内无需再嵌套GestureHandlerRootView，避免层级冲突。

2. 检查Reanimated完整配置

确保react-native-reanimated配置无遗漏：

Android：在android/app/build.gradle中开启Hermes：
```
project.ext.react = [
  enableHermes: true
]
```
iOS：执行pod install，确保Podfile启用Hermes

Babel：在babel.config.js中添加插件（必须放在最后）：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

3. 修复Gallery容器样式冲突

给Gallery组件添加flex:1，确保它占满父容器空间：

{showMenu && (
  <View style={style.gallery}>
    <Gallery
      style={{ flex: 1 }}
      data={[
        `http://10.0.2.2:8080/images/menu/${props.infos.barInfos.photomenu1}`,
        `http://10.0.2.2:8080/images/menu/${props.infos.barInfos.photomenu2}`
      ]}
      onIndexChange={(newIndex) => console.log(newIndex)}
    />
  </View>
)}