onPress 事件在本机 expo 中不起作用

Question

我一直在尝试在我的页面中的按钮上添加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事件的原因是因为设计，但我不确定。 如果您需要更多信息来发布以帮助您解决我的问题，请告诉我。

Answer 1

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