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組件。