Expo开发React Native应用时Swipeable组件报错求助

问题描述 #

使用Expo开发React Native应用时，集成react-native-gesture-handler的Swipeable组件触发以下报错：

Expo: Unsupported top level event type "onGestureHandlerStateChange" dispatched

网上针对原生RN及该库旧版本的解决方案均无效，需适配Expo环境的解决办法。

相关代码 #

ListItem组件实现 #

function ListItem({ title, subTitle, image, onPress, renderRightActions }) {
  return (
    <Swipeable renderRightActions={renderRightActions}>
      <TouchableHighlight underlayColor={colors.light} onPress={onPress}>
        <View style={styles.container}>
          <Image style={styles.image} source={image} />
          <View>
            <AppText style={styles.title}>{title}</AppText>
            <AppText style={styles.subTitle}>{subTitle}</AppText>
          </View>
        </View>
      </TouchableHighlight>
    </Swipeable>
  );
}

MessagesScreen使用代码 #

function MessagesScreen(props) {
    return (
        <Screen>
            <FlatList 
                data={messages}
                keyExtractor={message => message.id.toString()}
                renderItem={({ item }) => (
                    <ListItem 
                        title={item.title}
                        subTitle={item.description}
                        image={item.image}
                        onPress={() => console.log('Message selected', item)}
                        renderRightActions={() => (
                            <View 
                                style={{
                                    backgroundColor: 'red',
                                    width: 70,
                                }}
                            ></View>
                        )}
                    />
                )}
                ItemSeparatorComponent={ListItemSeparator}
            />
        </Screen>
    );
}

已尝试无效方案 #

• 在应用入口提前导入react-native-gesture-handler
• 仅用GestureHandlerRootView包裹单个Swipeable组件

适配Expo的解决方案 #

• 安装兼容版本依赖
  不要手动指定版本，让Expo自动匹配适配的依赖：

  npx expo install expo-dev-client react-native-gesture-handler
  

• 全局包裹GestureHandlerRootView
  必须将整个应用的根组件包裹在GestureHandlerRootView中，而非单个组件。修改入口文件（如App.js）：

  import 'react-native-gesture-handler';
  import { GestureHandlerRootView } from 'react-native-gesture-handler';
  import MessagesScreen from './path/to/MessagesScreen';
  
  export default function App() {
    return (
      <GestureHandlerRootView style={{ flex: 1 }}>
        <MessagesScreen />
      </GestureHandlerRootView>
    );
  }
  

• 强制清除缓存重启
  清理Expo缓存并重启服务，避免缓存残留导致的异常：

  npx expo start --clear
  

  同时重启手机上的Expo Go客户端。

• 统一Touchable组件来源
  确保Swipeable内部使用的Touchable组件来自react-native-gesture-handler，而非原生RN：

  // 正确导入
  import { TouchableHighlight } from 'react-native-gesture-handler';
  // 避免 import { TouchableHighlight } from 'react-native';
  

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