如何修复React Native中TouchableOpacity的功能异常问题？

我一眼就看出问题出在你给Citrus对应的TouchableOpacity绑定onPress的方式上！

问题根源 #

当你在pressHandler(2)里渲染<TouchableOpacity onPress={citrusAlert()} ...>时，这里的citrusAlert()是立即执行的——也就是说，当你点击「Immunity boosting」触发pressHandler(2)、渲染Pressedinfo的瞬间，这个弹窗就被调用了，而不是等你点击Citrus选项的时候。

同时，因为citrusAlert()执行后返回的是undefined，所以这个TouchableOpacity的onPress实际上绑定的是undefined，自然点击它的时候没有任何反应。

修复方法 #

只需要把onPress={citrusAlert()}改成下面两种方式之一：

• 直接传递函数引用：onPress={citrusAlert}
• 用箭头函数包裹：onPress={() => citrusAlert()}（适合需要给函数传参的场景）

修复后的完整代码片段 #

export default function LinksScreen() { 
const citrusAlert = () => Alert.alert("Citrus "); 
const [Pressedinfo, setPressedInfo] = useState(null) 
const pressHandler = (id) => { 
if (id == 1) { 
setPressedInfo( 
<View> 
<View style={Styles.component}> 
<Image source={home} style={Styles.home} /> 
<Text style={Styles.Text2}>#Stay home, Save lives</Text> 
</View> 
<View style={Styles.component}> 
<Image source={distanceimg} style={Styles.distance} /> 
<Text style={Styles.Text2}>Keep a safe distance</Text> 
</View> 
<View style={Styles.component}> 
<Image source={washinghands} style={Styles.distance} /> 
<Text style={Styles.Text2}>Wash hands often</Text> 
</View> 
<View style={Styles.component}> 
<Image source={coverimg} style={Styles.distance} /> 
<Text style={Styles.Text2}>Cover your cough</Text> 
</View> 
<View style={Styles.component}> 
<Image source={sickimg} style={Styles.distance} /> 
<Text style={Styles.Text2}>Sick? Call for help</Text> 
</View> 
</View> 
) 
} else if (id == 2) { 
setPressedInfo(<View> 
// 这里是修复的核心：移除括号，传递函数本身
<TouchableOpacity onPress={citrusAlert} style={Styles.component}> 
<Image source={citrus} style={Styles.distance} /> 
<Text style={Styles.Text2}>Citrus (Vitamin C)</Text> 
</TouchableOpacity> 
<View style={Styles.component}> 
<Image source={bellp} style={Styles.distance} /> 
<Text style={Styles.Text2}>Red Bell Peppers</Text> 
</View> 
<View style={Styles.component}> 
<Image source={broc} style={Styles.distance} /> 
<Text style={Styles.Text2}>Broccoli</Text> 
</View> 
<View style={Styles.component}> 
<Image source={garlic} style={Styles.distance} /> 
<Text style={Styles.Text2}>Garlic</Text> 
</View> 
<View style={Styles.component}> 
<Image source={ginger} style={Styles.distance} /> 
<Text style={Styles.Text2}>Ginger</Text> 
</View> 
<View style={Styles.component}> 
<Image source={spinach} style={Styles.distance} /> 
<Text style={Styles.Text2}>Spinach</Text> 
</View> 
</View>) 
} else if (id == 3) { 
setPressedInfo(<View> 
<View style={Styles.component}> 
<Text style={Styles.Text3}>Stay Home and Call a Health Care Provider</Text> 
</View> 
</View>) 
} 
} 
return ( 
<ScrollView style={Styles.scrv} > 
<View style={Styles.container} > 
<TouchableOpacity onPress={() => pressHandler(1)}> 
<View style={Styles.container2}> 
<Image source={img5} style={Styles.Hand} /> 
<Text style={Styles.Text1}> 5 rules of prevention</Text> 
</View> 
</TouchableOpacity> 
<TouchableOpacity onPress={() => pressHandler(2)}> 
<View style={Styles.container2}> 
<Image source={food} style={Styles.Hand} /> 
<Text style={Styles.Text1}>Immunity boosting</Text> 
</View> 
</TouchableOpacity> 
<TouchableOpacity onPress={() => pressHandler(3)}> 
<View style={Styles.container2}> 
<Image source={sickimg} style={Styles.Hand} /> 
<Text style={Styles.Text1}>Feeling Sick?</Text> 
</View> 
</TouchableOpacity> 
</View> 
{Pressedinfo} 
</ScrollView> 
) 
}

额外提示 #

在React/React Native中，给事件处理器绑定函数时一定要注意：

• 如果你写onPress={func()}，函数会在组件渲染时立即执行，这几乎不是你想要的效果
• 正确的做法是传递函数本身（onPress={func}），或者用箭头函数包裹（onPress={() => func()}）——后者适合需要传递参数的场景

内容的提问来源于stack exchange，提问作者Xayyna