无法在可触摸不透明度内单击ionicon反应本机

Question

我在react native中使用IonIcon作为按钮，将其包裹在可触摸的不透明度上，但是当我试图点击图标时，它不会执行onpress函数如果我点击图标的外部在可触摸的不透明度内它会触发onpress函数(例如点击文本)

这是我的代码

import { View, StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
import React from 'react'
import { Colors, Text } from "react-native-paper";
import Ionicons from "@expo/vector-icons/Ionicons";
import { navigate } from "../../utils/RootNavigation";
const windowHeight = Dimensions.get('window').height
export default function HomeNavigation() {
<View style={styles.container}>
<TouchableOpacity 
style={styles.button}
activeOpacity={1}
onPress={() => {
navigate("MenuNavigator",{
screen:"History",
})
}}>
<Ionicons 
name="calendar-outline" 
color={Colors.blue800} 
size={32}
/>
<Text style={styles.label}>History</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
activeOpacity={1}
onPress={() => {
navigate("MenuNavigator",{
screen:"File",
})
}}>
<Ionicons 
name="briefcase-outline" 
color={Colors.blue800} 
size={32}
/>
<Text style={styles.label}>Files</Text>
</TouchableOpacity>
</View>
)}
const styles = StyleSheet.create ({
container: {
backgroundColor: Colors.white,
paddingVertical: 16,
paddingHorizontal: 8,
marginHorizontal: 24,
height: 'auto',
flex: 0,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start',
borderRadius: 8,
shadowColor: Colors.black,
shadowOffset: {
width: 0,
height: -4,
},
shadowOpacity: 0.07,
shadowRadius: 8,
elevation: 2,
marginTop: -windowHeight*0.05      
},
button: {
flex: 1,
height: 'auto',
justifyContent: 'flex-start',
alignItems: 'center',
},
label: {
marginTop: 8,
fontSize: 12,
textAlign: 'center',
}
})

Home Navigation是一个显示在我的主页上的组件

主页代码

*Other import
import HomeNavigation from "../components/HomeNavigation";
export default function Homepage({ navigation }) {
return (
<View style={{ flex: 1 }}>
<ScrollView 
style={styles.container}
contentContainerStyle={{ paddingBottom: 32 }}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<View>*User info*</View>
<HomeNavigation />
</ScrollView>
</View>
)
}

Answer 1

用<View></View>或<></>包裹孩子。TouchableOpacity不能将touch事件传播给所有子事件。

<TouchableOpacity 
style={styles.button}
activeOpacity={1}
onPress={() => {
navigate("MenuNavigator",{
screen:"History",
})
}}>
<>
<Ionicons 
name="calendar-outline" 
color={Colors.blue800} 
size={32}
/>
<Text style={styles.label}>History</Text>
</>
</TouchableOpacity>