单击TouchableOpacity-React Native时模块不会打开

Question

我正在尝试在此应用中实现模式组件，由于某些原因，我无法使其正常工作。我已经在另一个应用程序中完成了该操作，即使在此应用程序中看起来一切正常，它仍然无法正常工作，只是无法切换！

这是我的代码（我在这里叫toogleModal()：]

    <TouchableOpacity
                activeOpacity={1}
                style={styles.slideInnerContainer}
                //onPress={() => { alert(`You've clicked '${rest_name}'`); }}
                onPress={() => this.toggleModal(rest_name)}
            >
                <View style={styles.shadow} />
                <View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
                    {this.image}
                    <View style={[styles.radiusMask, even ? styles.radiusMaskEven : {}]} />
                </View>
                <View style={[styles.textContainer, even ? styles.textContainerEven : {}]}>
                    <View style={{ flexDirection: 'row' }}>
                        {uppercaseTitle}
                        {ratings}
                    </View>


                    <Text
                        style={[styles.subtitle, even ? styles.subtitleEven : {}]}
                        numberOfLines={2}
                    >
                        {rest_location}
                    </Text>

                </View>
            </TouchableOpacity>

现在是toggleModal()，它应该设置状态然后调用onPressItem()：

        toggleModal = (item) => {
        this.setState({ isModalVisible: !this.state.isModalVisible });
        this.onPressItem(item);
    };

和onPressItem（）：

    onPressItem = (item) => {
        return (
            <ThemeProvider theme={theme}>
                <Modal animationIn="rubberBand" animationOut={"bounceOut"}

                    isVisible={this.state.isModalVisible}
                    onBackdropPress={() => this.setState({ isModalVisible: false })}
                >
                    <View style={{ flex: 1 }}>
                        {item}
                    </View>
                    <View style={{ flex: 1 }}>
                        <Button title="Hide modal" onPress={this.toggleModal} />
                    </View>
                </Modal>
            </ThemeProvider>
        )
    };

现在，请记住此代码是从模态正常运行的另一个应用程序中获取的！

Answer 1

最有可能您的单击选项问题与来自正确模块的不正确导入TouchableOpacity有关。检查是否从react-native：

导入

import { TouchableOpacity } from 'react-native';

Answer 2

更改此行onPress = {（）=> this.toggleModal（rest_name）}对此：onPress = {（）=> {this.toggleModal（rest_name）}}您只需要将函数调用放在方括号中