Swipable 在 Android 中不起作用（Expo Cli）

Question

從 'react-native-gesture-handler' 導入 {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
    }

});

Answer 1

您必須將 swipeable 包裝在 gestureHandlerRootView 中

 import { GestureHandlerRootView, Swipeable } from "react-native-gesture-handler"; <GestureHandlerRootView> <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> </Swipeable>