本文讲解如何使用 Pressable 组件的 onPressIn 和 onPressOut 事件，精准分离视觉反馈（如图标/文字变色）与业务逻辑（如路由跳转），解决“只能执行其中一项”的常见问题。
本文讲解如何使用 `pressable` 组件的 `onpressin` 和 `onpressout` 事件，精准分离视觉反馈（如图标/文字变色）与业务逻辑（如路由跳转），解决“只能执行其中一项”的常见问题。
在 React Native 中，Pressable 是处理触摸交互的推荐基础组件，它提供了细粒度的生命周期回调：onPressIn（手指按下时触发）、onPressOut（手指抬起时触发）、onPress（完整点击完成时触发）等。当你需要先响应视觉变化（如高亮图标），再执行导航跳转，却因混用 onPress 导致状态更新与导航冲突时，关键在于将两个行为解耦到不同阶段。
例如，在底部导航栏中，用户按住图标时应立即变色（提供即时反馈），松开后才跳转页面——这正是 onPressIn + onPressOut 的典型应用场景。
以下是优化后的核心实现（以“设置”页为例）：
import { Pressable } from 'react-native';
import { Link } from 'react-router-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { Text } from 'react-native-paper';
// ✅ 推荐：封装可复用的 TabItem 组件
const TabItem = ({
icon,
label,
isActive,
onPressIn,
onPressOut,
to
}: {
icon: string;
label: string;
isActive: boolean;
onPressIn: () => void;
onPressOut: () => void;
to: string;
}) => (
<Pressable
onPressIn={onPressIn}
onPressOut={onPressOut}
>
<Link to={to} style={{ textDecorationLine: 'none' }}>
<View style={styles.tab}>
<Icon
name={icon}
size={25}
color={isActive ? '#F29C46' : 'white'}
/>
<Text style={[
{ color: isActive ? '#F29C46' : 'white' },
styles.labelText
]}>
{label}
</Text>
</View>
</Link>
</Pressable>
);
// 在 BottomBar 中使用
export default function BottomBar() {
const [focused, setFocused] = useState<number | null>(null);
const handlePressIn = (index: number) => setFocused(index);
const handlePressOut = () => {
// 注意：此处不直接跳转，而是由 Link 的默认行为触发（需确保 Link 正确包裹）
// 若使用 React Navigation，则改用 navigation.navigate()
};
return (
<View style={styles.container}>
{/* 其他 Tab... */}
<TabItem
icon="cog"
label="Ajustes"
isActive={focused === 4}
onPressIn={() => handlePressIn(4)}
onPressOut={handlePressOut}
to="/settings"
/>
</View>
);
}⚠️ 重要注意事项：
- ❌ 避免在 onPressIn 中执行异步导航（如 navigation.navigate()），会导致视觉反馈延迟或中断；
- ✅ onPressIn 仅用于同步状态更新（如 setFocused），onPressOut 或 onPress 才适合触发导航；
- ? 若使用 @react-navigation/native（而非 react-router-native），请用 navigation.navigate('Settings') 替代 <Link>，并在 onPressOut 中调用；
- ? 将 Tab 项抽象为独立组件（如 TabItem），不仅提升可维护性，还能避免闭包中 focused 状态滞后问题；
- ? react-router-native 在较新 RN 版本中兼容性有限，生产项目建议优先采用 @react-navigation/bottom-tabs 官方方案。
通过合理划分交互阶段，你既能保证 UI 响应的即时性，又能确保业务逻辑的可靠性——这是构建专业级 React Native 导航体验的关键实践。
