在Android（Expo Cli）中无法使用Swipable

从“react native手势处理程序”导入{Swipeable}在android（expo Cli）中不起作用。我尝试了所有方法，弹出expo cli，编辑MainActivity.java文件，但没有任何效果。有几个线程，但都不起作用。请帮助我，因为我已经被这个问题困扰了很长时间。谢谢

这是我的密码

import React from 'react';
import { View, Text, StyleSheet, Keyboard,SafeAreaView, TouchableOpacity, FlatList, KeyboardAvoidingView, TextInput, Animated } from 'react-native';
import { AntDesign, Ionicons } from "@expo/vector-icons";
import { SwipeListView } from 'react-native-swipe-list-view';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import { Colors } from 'react-native/Libraries/NewAppScreen';




export default class TodoModal extends React.Component {


state = {
    newTodo: ""
};

toggleTodoCompleted = index => {
    let list = this.props.list;
    list.todos[index].completed = !list.todos[index].completed;

    this.props.updateList(list);
};

addTodo = () => {
    let list = this.props.list;
    list.todos.push({ title: this.state.newTodo, completed: false });

    this.props.updateList(list);
    this.setState({ newTodo: ""});

    Keyboard.dismiss();
};

renderTodo = (todo, index) => {
    return (
        <Swipeable renderRightActions={(_, dragX) => this.rightActions(dragX, index)}>
        <View style={styles.todoContainer}>
            <TouchableOpacity onPress={() => this.toggleTodoCompleted(index)}>
                <Ionicons
                    name={todo.completed ? "ios-square" : "ios-square-outline"}
                    size={24}
                    color={"#A4A4A4"}
                    style={{ width: 32 }}
                />
            </TouchableOpacity>

            <Text 
               style={[
                   styles.todo, 
                   { 
                       textDecorationLine: todo.completed ? "line-through" : "none",
                       color: todo.completed ? "#A4A4A4" : "#2D3436"
                   }

               ]}
               >
                    {todo.title}
            </Text>
        </View>

    </Swipeable>
    );
};

rightActions = (dragX, index) => {
    return (
        <TouchableOpacity>
            <Animated.View style={styles.deleteButton}>
                <Animated.Text>Delete</Animated.Text>
            </Animated.View>
        </TouchableOpacity>
    );
};

render() {
    const list = this.props.list;

    const taskCount = list.todos.length;
    const completedCount = list.todos.filter(todo => todo.completed).length;

    return (
        <KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === 'ios' ? 'padding' : null}>

        
        <SafeAreaView style={styles.container}>
            <TouchableOpacity
            style={{ position: "absolute", top: 64, right: 32, zIndex: 10}}
            onPress={this.props.closeModal}
            >
                <AntDesign name="close" size={24} color="#2D3436" />
            </TouchableOpacity>

            <View style={[styles.section, styles.header, { borderBottomColor: list.color }]}>
                <View>
                    <Text style={styles.title}>{list.name}</Text>
                    <Text style={styles.taskCount}>
                        {completedCount} of {taskCount} tasks
                    </Text>
                </View>
            </View>

            <View style={[styles.section, { flex: 2 }]}>
                <FlatList
                data={list.todos}
                renderItem={({ item, index }) => this.renderTodo(item, index)}
                keyExtractor={(_, index) => index.toString()}
                contentContainerStyle={{ paddingHorizontal: 32, paddingVertical: 64 }}
                showsVerticalScrollIndicator={false}
                

                />
            </View>


           


            <View style={[styles.section, styles.footer]} >
            
                <TextInput 
                style={[styles.input, {borderColor: list.color}]} 
                    onChangeText={text => this.setState({ newTodo: text })}
                    value={this.state.newTodo}
                />
                <TouchableOpacity style={[styles.addTodo, {backgroundColor: list.color}]} onPress={() => this.addTodo()}>
                    <AntDesign name="plus" size={16} color="#FFFFFF" />
                </TouchableOpacity>
               

            </View>

            
        </SafeAreaView>
        </KeyboardAvoidingView>
        
        
    );
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },
    section: {
        flex: 1,
        alignSelf: "stretch"
    },
    header: {
        justifyContent: 'flex-end',
        marginLeft: 64,
        borderBottomWidth: 3
    },
    title: {
        fontSize: 30,
        fontWeight: "800",
        color: "#2D3436"
    },
    taskCount: {
        marginTop: 4,
        marginBottom: 16,
        color: "#A4A4A4",
        fontWeight: "600"
    },
    footer: {
        paddingHorizontal: 32,
        flexDirection: "row",
        alignItems: "center"
    },
    input: {
        flex: 1,
        height: 48,
        borderWidth: StyleSheet.hairlineWidth,
        borderRadius: 6,
        marginRight: 8,
        paddingHorizontal: 8
    },
    addTodo: {
        borderRadius: 4,
        padding: 16,
        alignItems: "center",
        justifyContent: "center"
    },
    todoContainer: {
        paddingVertical: 16,
        flexDirection: "row",
        alignItems: "center"
    },
    todo: {
        color: "#2D3436",
        fontWeight: "700",
        fontSize: 16
    },
    deleteButton: {
        flex: 1,
        backgroundColor: Colors.red,
        justifyContent: "center",
        alignItems: "center",
        width: 80
    }

});

从“React”导入React；
从“react native”导入{View、Text、StyleSheet、Keyboard、SafeAreaView、TouchableOpacity、FlatList、KeyboardAvoidingView、TextInput、Animated}；
从“@expo/vector icons”导入{AntDesign，Ionicons}”；
从“react native swipe list view”导入{SwipeListView}；
从“反应本机手势处理程序/Swipeable”导入Swipeable；
从'react native/Libraries/NewAppScreen'导入{Colors}；
将默认类导出到模板扩展React.Component{
状态={
纽托多：“
};
toggleTodoCompleted=索引=>{
让list=this.props.list；
list.todos[index]。已完成=！list.todos[index]。已完成；
this.props.updateList（列表）；
};
addTodo=（）=>{
让list=this.props.list；
list.todos.push（{title:this.state.newTodo，completed:false}）；
this.props.updateList（列表）；
this.setState（{newTodo:“}）；
键盘；
};
renderTodo=（待办事项，索引）=>{
返回(
this.rightActions（dragX，index）}>
this.toggleTodoCompleted（index）}>
{todo.title}
);
};
rightActions=（dragX，索引）=>{
返回(
删除
);
};
render（）{
const list=this.props.list；
const taskCount=list.todos.length；
const completedCount=list.todos.filter（todo=>todo.completed）.length；
返回(
{list.name}
{taskCount}个任务的{completedCount}
this.renderTodo（项，索引）}
keyExtractor={（{，index）=>index.toString（）}
contentContainerStyle={{paddingHorizontal:32，paddingVertical:64}}
showsVerticalScrollIndicator={false}
/>
this.setState（{newTodo:text}）
值={this.state.newTodo}
/>
this.addTodo（）}>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”
},
第节：{
弹性：1，
自我调整：“伸展”
},
标题：{
justifyContent:“柔性端”，
marginLeft:64，
边框宽度：3
},
标题：{
尺寸：30，
重量：“800”，
颜色：“2D3436”
},
任务计数：{
玛金托普：4，
marginBottom:16，
颜色：“A4A4A4”，
重量：“600”
},
页脚：{
水平方向：32，
flexDirection:“行”，
对齐项目：“中心”
},
输入：{
弹性：1，
身高：48，
borderWidth:StyleSheet.hairlineWidth，
边界半径：6，
marginRight:8，
水平方向：8
},
地址：{
边界半径：4，
填充：16，
对齐项目：“中心”，
为内容辩护：“中心”
},
todoContainer：{
填充垂直：16，
flexDirection:“行”，
对齐项目：“中心”
},
待办事项：{
颜色：“2D3436”，
重量：“700”，
字体大小：16
},
删除按钮：{
弹性：1，
背景颜色：Colors.red，
辩护内容：“中心”，
对齐项目：“中心”，
宽度：80
}
});