react-native 可滑動手勢在 android 上不起作用？

Question

我正在用 Mosh ( https://codewithmosh.com/ ) 做一個反應本機課程。 我正在使用 expo。 我對本機反應非常陌生，並不真正知道我在做什么，但我知道我的代碼應該可以工作。 我用他的代碼仔細檢查了我的代碼，甚至將我的項目復制到朋友的 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>
    );
}

Answer 1

好吧，我找到了一個解決方案，將可滑動的內容包裝在一個gestureHandlerRootView中。

import { GestureHandlerRootView } 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>
  );
}

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> ); }