React Native Swipeable Gesture 不工作 (expo)答案

【问题标题】：React Native Swipeable Gesture Not Working (expo)React Native Swipeable Gesture 不工作 (expo)
【发布时间】：2021-12-26 13:37:30
【问题描述】：

我的反应本机手势不起作用我的代码我已经用这个命令安装了库

$ expo install react-native-gesture-handler

请帮我解决这个问题：我该如何解决这个问题

代码：

import React from 'react'
import { Image, StyleSheet, TouchableHighlight, View } from 
'react-native'
import Colors from '../config/Colors.js'
import AppText from './AppText/AppText.js'
import Swipeable from 'react-native-gesture-handler/Swipeable';


const HorizontalListitem = ({ image, title, subtitle, onPress, 
style, renderRightActions }) => {
return (

<Swipeable renderRightActions={() => (
  <View style={{ width: 80, height: 100, backgroundColor: 'red' 
}}></View>
)}>
  <TouchableHighlight
    underlayColor={Colors.lightgray}
    onPress={onPress}
    style={style}
  >
    <View style={styles.listContainer}>
      <Image style={styles.image} source={{ uri: image }}> 
</Image>
      <View style={styles.title}>
        <AppText style={{ fontWeight: 'bold' }}>{title} 
</AppText>
        <AppText style={styles.subtitle}>{subtitle}</AppText>
      </View>
    </View>
  </TouchableHighlight>
</Swipeable >
)
}

【问题讨论】：

您需要在您的问题上付出更多努力。具体是什么问题？你期望发生什么与正在发生什么？你有什么试图解决你的问题。转储代码并说它不起作用不会在这个论坛中为您提供太多帮助。

标签： reactjs react-native

【解决方案1】：

用 {GestureHandlerRootView} 包裹滑动也有帮助

enter image description here

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

用{GestureHandlerRootView} 包裹滑动也有帮助

import Swipeable from 'react-native-gesture-handler/Swipeable';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

<GestureHandlerRootView>

<Swipeable renderRightActions=...>

</Swipeable>

</GestureHandlerRootView>

【讨论】：

传奇。这对我有用！

【解决方案3】：

这是解决方案：-

import React from "react";
import { View, StyleSheet, Image, TouchableHighlight } from "react-native";
import Swipeable from 'react-native-gesture-handler/Swipeable';

import AppText from "./AppText";
import colors from "../config/colors";

function ListItem({ title, subTitle, image, renderRightActions, onPress }) {
  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>
  );
}

在 MessageScreen.js 中

    <FlatList
        data={messages}
        keyExtractor={message => message.id}
        renderItem={({ item }) => (
            <ListItem 
                title={item.name}
                subTitle={item.description}
                image={item.image}
                renderRightActions={() => (
                    <View style={{ width: 70, height: 100, backgroundColor: 'red' }}></View>
                )}
            />
        )}
        ItemSeparatorComponent={ListItemSeparator}
    />

快乐编码

【讨论】：

【解决方案4】：

我在使用 expo SDK 39 时遇到了类似的问题。我无法解决。我尝试将其升级到 v43，它运行良好。 here 是我为测试 Swipeable 而创建的工作博览会小吃。

【讨论】：