Question

我正在使用this，并且正在尝试使用“关闭”方法。按下取消警报后，如何调用该close方法，如下所示？我相信这是我对React钩子/类如何与公共方法一起工作的普遍误解。任何帮助将不胜感激！

        <Swipeable
        renderRightActions={renderRightActions}
        onSwipeableRightOpen={() => {
            Alert.alert(
                "Delete " + title + "?",
                "",
                [
                    {
                        text: "Cancel",
                        onPress: () => {this.close()},
                        style: "cancel",
                    },
                    { text: "Delete", onPress: () => removeItem(id) },
                ],
                { cancelable: true }
            );
        }}
        leftThreshold={0}
        rightThreshold={150}>Random stuff in here</Swipeable>

编辑我将其重写为一个类：

import React from "react";
import { StyleSheet, Alert, Text, View, TouchableWithoutFeedback, Animated } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import Swipeable from "react-native-gesture-handler/Swipeable";
import * as Haptics from "expo-haptics";

class ListItem extends React.Component {
    constructor(props) {
        super(props);
        const { id, title, onClick, drag, isActive, removeItem } = this.props;
        this.id = id;
        this.title = title;
        this.onClick = onClick;
        this.drag = drag;
        this.isActive = isActive;
        this.removeItem = removeItem;
    }

    componentDidUpdate = () => {
        if (this.isActive) {
            // haptic feedback
            Haptics.impactAsync();
        }
    };

    renderRightActions = (progress, dragX) => {
        const trans = dragX.interpolate({
            inputRange: [0, 50, 100, 101],
            outputRange: [-20, 0, 0, 1],
        });

        return (
            <View style={{ width: 45, marginTop: 20, marginLeft: 1000 }}>
                <Animated.Text
                    style={{
                        transform: [{ translateX: trans }],
                    }}></Animated.Text>
            </View>
        );
    };

    onCancel() {
        console.log("WHAT");
        console.log(this);
    }

    render() {
        return (
            <Swipeable
                renderRightActions={this.renderRightActions}
                onSwipeableRightOpen={function () {
                    Alert.alert(
                        "Delete " + this.title + "?",
                        "",
                        [
                            {
                                text: "Cancel",
                                onPress: this.onCancel(),
                                style: "cancel",
                            },
                            { text: "Delete", onPress: () => removeItem(id) },
                        ],
                        { cancelable: true }
                    );
                }}
                leftThreshold={0}
                rightThreshold={150}>
                <TouchableWithoutFeedback
                    onPress={function () {
                        this.onClick();
                    }}
                    onLongPress={this.drag}
                    delayLongPress={200}>
                    <View style={listItemStyles.item}>
                        <View
                            style={{
                                marginTop: 7,
                                marginLeft: 18,
                            }}>
                            <Text style={listItemStyles.itemTitle}>{this.title}</Text>
                        </View>
                        <View style={listItemStyles.itemIcon}>
                            <Ionicons
                                name={"ios-arrow-forward"}
                                size={30}
                                style={{ marginBottom: -3 }}
                                color={"#E3E3E3"}
                            />
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </Swipeable>
        );
    }
}

export default ListItem;

// Styles
const listItemStyles = StyleSheet.create({
    // list item
    item: {
        padding: 3,
        marginVertical: 2,
        marginLeft: "2%",
        marginRight: "2%",
        width: "96%",

        // internals
        flexDirection: "row",
        justifyContent: "space-between",
    },
    itemTitle: {
        flexDirection: "row",
        justifyContent: "flex-start",
        color: "#333333",
        fontSize: 18,
    },
    itemSubtitle: {
        fontSize: 12,
        marginLeft: 5,
    },
    itemIcon: {
        marginTop: 2,
        marginRight: 10,
        flex: 1,
        flexDirection: "row",
        justifyContent: "flex-end",
    },
});

但是，当我打印出此内容时，“关闭”不会显示为方法。

Answer 1

您不能使用this，因为由于您的粗箭头功能，它引用了外部组件。

文档说Using reference to Swipeable it's possible to trigger some actions on it. close: method that closes component.

这里的问题是关于胖箭头功能的妙处（它没有自己的引用，因此使用了外部）。

在这种情况下，这意味着您的外部组件函数将呈现可滑动滑动的组件。

因此，对于该用例，您需要为onSwipeableRightOpen道具使用一个类组件。

我如何在react-native中使用钩子访问组件的内部方法

1 个答案: