React Native在Android上的滑动手势无法工作？

Question

我正在跟着Mosh (https://codewithmosh.com/) 学习 React Native，使用的是 Expo。 我对 React Native 还很陌生，不知道该怎么做，但我知道我的代码应该可以工作。 我已经仔细检查了我的代码，并甚至将我的项目复制到朋友的 Mac 上，看看代码是否在 iOS 上正常运行（因为 Mosh 在 iOS 模拟器上运行他的代码）。在 iOS 模拟器上，我的代码能够完美运行，但在 Android 上却没有任何反应。

以下是我实现可滑动操作的代码：

import React from 'react';
import { StyleSheet, View, 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, 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>
    );
}

我然后将这个导出到另一个屏幕：

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={ListItemDeleteAction}
            />
        )} 
            ItemSeparatorComponent={ListItemSeparator} 
        />

        </Screen>
    );
}

我传递到renderRightActions属性中的listItemDelete操作可以在这里看到：

function ListItemDeleteAction(props) {
    return (
        <View style={styles.container} ></View>
    );
}

- Kris_Stoltz

---

我也在完全相同的位置！哈哈 - Lorenzo Covarrubias

Answer 1

好的，我通过将可滑动模块包装在gestureHandlerRootView中找到了解决方案。

import { GestureHandlerRootView, Swipeable } from "react-native-gesture-handler";

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

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

- Kris_Stoltz

---

你救了我的一天 :) - Majid Shahmohammadi

Answer 2

我通过将可滑动的元素包裹在gestureHandlerRootView中找到了解决方案。

import { GestureHandlerRootView } from "react-native-gesture-handler";

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

function ListItem({ title, subtitle, image, renderRightActions }) {
  return (
    <GestureHandlerRootView>
      <Swipeable renderRightActions={renderRightActions}>
          <View style={styles.main}>
            <Image style={styles.img} source={image} />
          </View>
      </Swipeable>
    </GestureHandlerRootView>
  );
}

- VEDANT KARLE

Answer 3

尝试这个选项...

 import {
  GestureHandlerRootView,
  Swipeable,
} from "react-native-gesture-handler";

然后将其包装在<Swipeable>..</Swipeable>中，参见下面的示例

<GestureHandlerRootView>
      <Swipeable renderRightActions={renderRightActions}>
        <TouchableHighlight underlayColor={Colors.ccc} onPress={onPress}>
          <View style={styles.view}>
            <Image style={styles.image} source={image} />
            <View style={styles.details}>
              <Txt style={styles.title}>{title}</Txt>
              <Txt style={styles.subtitle}>{subtitle}</Txt>
            </View>
          </View>
        </TouchableHighlight> 
      </Swipeable>
    </GestureHandlerRootView>

- Alikick