React Native中TextInput右侧图标Android无法点击，iOS正常

以下是几个经过验证的解决方案，按优先级尝试：

1. 使用函数式状态更新避免闭包问题 #

在设置showPassword时，采用useState的函数式更新，确保每次取到最新状态值，避免闭包导致的状态不更新：

onPress={() => {
  setShowPassword(prevState => !prevState);
}}

2. 扩大点击区域（Android专属） #

Android端默认图标点击区域可能过小，给图标组件添加hitSlop属性扩大可点击范围：

<RNPTextInput.Icon
  icon={showPassword ? EyeOff : EyeOn}
  onPress={() => setShowPassword(prev => !prev)}
  hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
/>

3. 手动处理输入框焦点 #

Android上TextInput获取焦点时可能拦截点击事件，点击图标前先让输入框失焦：

import { useRef } from 'react';
import { TextInput as RNTextInput } from 'react-native';

// 组件内定义ref
const passwordInputRef = useRef<RNTextInput>(null);

// 图标点击事件
onPress={() => {
  passwordInputRef.current?.blur();
  setShowPassword(prev => !prev);
}}

// 给TextInput添加ref属性
<TextInput
  ref={passwordInputRef}
  // 其余属性保持不变
/>

4. 替换为Pressable组件替代RNPTextInput.Icon #

如果上述方法无效，直接用React Native原生Pressable包裹图标，确保Android端点击事件正常触发：

import { Pressable } from 'react-native';
import { Icon } from 'react-native-paper';

// 修改right属性
right={
  <Pressable
    onPress={() => setShowPassword(prev => !prev)}
    hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
    style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
  >
    <Icon source={showPassword ? EyeOff : EyeOn} size={20} color="#888" />
  </Pressable>
}

5. 检查react-native-paper版本 #

若使用的是react-native-paper旧版本，可能存在Android端图标点击的已知bug，升级到最新稳定版：

npm install react-native-paper@latest
# 或
yarn add react-native-paper@latest

内容的提问来源于stack exchange，提问作者Izabela K. Ośka