如何在NativeBase Input组件聚焦时显示InputRightElement（无需单独状态）

问题场景 #

需要实现NativeBase Input组件在获得焦点时，右侧显示字符计数。尝试通过_focus属性配置InputRightElement，但_focus仅支持部分样式类props，该方式不生效。当前通过布尔状态结合onFocus事件可以实现，但不想为每个Input单独定义状态变量，寻求更简洁的实现方式。

尝试过的无效代码 #

<Input
  flex="1"
  size="lg"
  placeholder="Choice 2"
  _focus={{
    bg: '',
    borderColor: theme.colors.surfaceBlue,
    InputRightElement: <Text mr="2">x25</Text>,
  }}
/>

当前可行但繁琐的方案 #

<Input
  flex="1"
  size="lg"
  placeholder="Choice 2"
  _focus={{
    bg: '',
    borderColor: theme.colors.surfaceBlue,
  }}
  InputRightElement={
    showRightElement ? <Text mr="2">x25</Text> : <></>
  }
  onFocus={() => setShowRightElement(true)}
/>

解决方案：封装可复用的自定义Input组件 #

将聚焦状态逻辑封装到自定义组件中，外部使用时无需单独维护状态，直接传入所需参数即可：

import { useState } from 'react';
import { Input, Text, useTheme } from 'native-base';

// 自定义带聚焦计数的Input组件
const FocusAwareCountInput = ({ placeholder, maxLength, ...restProps }) => {
  const [isFocused, setIsFocused] = useState(false);
  const theme = useTheme();

  return (
    <Input
      flex="1"
      size="lg"
      placeholder={placeholder}
      _focus={{
        bg: '',
        borderColor: theme.colors.surfaceBlue,
      }}
      InputRightElement={
        isFocused ? <Text mr="2">{`x${maxLength}`}</Text> : <></>
      }
      onFocus={() => setIsFocused(true)}
      onBlur={() => setIsFocused(false)} // 可选：失去焦点时隐藏计数
      {...restProps} // 透传其他Input属性
    />
  );
};

// 使用示例
<FocusAwareCountInput 
  placeholder="Choice 2" 
  maxLength={25} 
  // 可添加其他Input属性，比如value、onChangeText等
/>

方案说明 #

1. 状态内聚：每个自定义Input实例自己维护内部的聚焦状态，无需在父组件中为每个Input单独定义showRightElement这类状态变量。
2. 复用性强：只需一次封装，后续所有需要该功能的Input都可以直接使用这个自定义组件。
3. 灵活扩展：可以根据需求添加onBlur事件，实现失去焦点时隐藏计数；也可以扩展实时字符统计（比如结合value计算已输入长度）。

补充说明 #

NativeBase的_focus伪属性主要用于配置Input组件本身的样式属性（如背景色、边框色），并不支持传入InputRightElement这类子元素配置，因此直接在_focus中设置该属性不会生效。

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