onPress 事件在反应原生博览会中不起作用答案

【问题标题】：onPress event is not working in react native expoonPress 事件在反应原生博览会中不起作用
【发布时间】：2021-04-18 21:32:41
【问题描述】：

我一直在尝试在我的页面中的按钮上添加 onPress 事件，但它没有响应，因为我是新手，所以我无法弄清楚。

这是我要放置 onPress 事件的页面代码：

const HomeMenu = () => {
    return (
        <View style={{ flex: 1 }}>
            <View style={styles.container}>

                <Tile
                    imageSrc={require('../../assets/images/homeMenu.jpg')}
                    title="Which property are you looking for?"
                    contentContainerStyle={{ height: '100%', backgroundColor: '#21534A', alignSelf: 'stretch', flex: 0.5 }}
                    titleStyle={styles.title}

                    containerStyle={{ height: '45%' }}

                >

                    <View style={styles.categoryContainer}>
                        <TouchableOpacity style={styles.categoryBtn} onPress={() => console.log('Pressed...')}>
                            <View style={styles.categoryIcon}>
                                <Image source={require('../../assets/icons/house.png')} style={styles.categoryImg}></Image>
                            </View>
                            <Text style={styles.categoryTitle}>Residential</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.categoryBtn} onPress={() => console.log('Pressed...')}>
                            <View style={styles.categoryIcon}>
                                <Image source={require('../../assets/icons/store.png')} style={styles.categoryImg}></Image>
                            </View>
                            <Text style={styles.categoryTitle}>Commercial</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.categoryContainer}>
                        <TouchableOpacity style={styles.categoryBtn} onPress={() => console.log('Pressed...')}>
                            <View style={styles.categoryIcon}>
                                <Image source={require('../../assets/icons/real-estate.png')} style={styles.categoryImg}></Image>
                            </View>
                            <Text style={styles.categoryTitle}>All</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.categoryContainer}>
                        <TouchableOpacity style={styles.categoryBtn} onPress={() => console.log('Pressed...')}>
                            <View style={styles.categoryIcon}>
                                <Image source={require('../../assets/icons/industry.png')} style={styles.categoryImg}></Image>
                            </View>
                            <Text style={styles.categoryTitle}>Industrial</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.categoryBtn} onPress={() => console.log('Pressed...')}>
                            <View style={styles.categoryIcon}>
                                <Image source={require('../../assets/icons/region.png')} style={styles.categoryImg}></Image>
                            </View>
                            <Text style={styles.categoryTitle}>Lands</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.categoryContainer}>
                        <TouchableOpacity onPress={() => console.log('Pressed...')}>
                            <Text style={{ color: "#FFFFFF", alignItems: 'center', textDecorationLine: 'underline' }}> Looking for an agency?</Text>
                        </TouchableOpacity>

                    </View>

                </Tile>
            </View>
        </View>
    );
};

我认为它没有响应 onPress 事件的原因是设计原因，但我不确定。如果您需要更多信息来帮助您解决我的问题，请告诉我。

【问题讨论】：

这似乎是一个普通的代码库。但是，如何检查console 以确认onPress 不起作用？
我尝试先检查 condole 以避免将来出现错误，但控制台无法与我一起工作，这样做是个好主意还是我不应该先检查控制台？
对我来说，有时当我在代码编辑器提示时开始输入后选择自动导入时会发生这种情况，并且它意外地从其他地方导入而不是“react-native”，请检查一下TouchableOpacity 是从“react-native”导入的，而不是从其他地方导入的，在我的例子中，它是从“react-native-gesture-....something”导入的
是的，我检查过它是从“react-native”导入的，我应该将其更改为“react-native-gesture”吗？ @Nikhilbhatia

标签： javascript reactjs react-native expo stylesheet

【解决方案1】：

问题来自 Tiles 组件。卡片（如卡片）是一种显示单个主题相关内容的便捷方式。 Tile 中不能有可压组件。尝试使用来自同一个库的Card 组件。

【讨论】：