如何在 React Native 中使应用程序组件可滑动？

Question

我正在学习如何使用 React Native 构建移动应用程序，并且我正在学习 Programming with Mosh 的 React native 课程。但是，我运行遇到了一个问题，我无法让我的程序允许我向左滑动以删除列表项。向左滑动应该会打开一个红色方块。

我已经尝试阅读文档、谷歌搜索答案和观看 youtube 视频，但我取得了 0 个进展:(。

这是我的 ListItem 组件代码：

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

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


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

下面是我实际使用时的代码：

import React from 'react';
import {StyleSheet, FlatList} from 'react-native';

import ListItem from '../components/ListItem';
import Screen from '../components/Screen';
import ListItemSeperator from '../components/ListItemSeperator';
import ListItemDeleteAction from '../components/ListItemDeleteAction';

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={ListItemSeperator}
            />
        </Screen>

其中 renderRightActions={ListItemDeleteAction} 只是另一个包含具有某种样式的视图的组件：

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

非常感谢任何帮助，提前致谢！

Answer 1

答案是我需要使用 GestureHandlerRootView 来包装所有内容！

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

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


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

现在该组件在 android 上运行。

如何在 React Native 中使应用程序组件可滑动？

How can I make application components swipeable in React Native?

android

ios

react-native

react-native-gesture-handler