如何在Input组件内部添加清除文本按钮且不缩短输入框容器

问题原因 #

你当前的实现把Input和清除按钮放在同一行的弹性布局容器内作为平级元素，两个元素会分割父容器的可用宽度，所以Input的宽度被清除按钮挤占变短。

方案1：绝对定位清除按钮（兼容性最好，无需UI库支持特殊属性） #

修改代码结构和样式如下：

// 结构调整
<Block position="relative" paddingLeft="2x">
  <Input
    flex
    value={search}
    iconLeft="search"
    radius={SIZES.base / 2}
    style={styles.search}
    selectionColor={COLORS.white}
    iconStyle={styles.searchIcon}
    // 新增右侧内边距，避免输入文字被清除按钮遮挡
    containerStyle={[styles.searchContainer, { paddingRight: SIZES.width * 0.12 }]}
    color={Utils.rgba(COLORS.white, 0.3)}
    onFocus={() => onSearch()}
  />
  {/* 清除按钮放在Input同级，用绝对定位悬浮 */}
  {search.length > 0 && (
    <Button 
      position="absolute"
      color="transparent" 
      center 
      middle
      style={styles.clearIconStyle}
      onPress={() => setFilters({...filters, address: '', lat: gps.latitude, lng: gps.longitude })}
    >
      <Icon name="clear" />
    </Button>
  )}
</Block>

// 样式调整
const styles = StyleSheet.create({
  clearIconStyle: {
    right: SIZES.width * 0.02,
    top: '50%',
    // 垂直居中，数值可根据你的图标大小调整
    transform: [{ translateY: -12 }],
    zIndex: 10 // 确保按钮层级高于Input，可正常响应点击
  }
})

方案2：使用Input组件内置的右侧图标插槽 #

如果你用的UI库Input组件支持renderRightIcon/rightIcon这类属性，直接传入清除按钮即可，组件内部会自动处理布局：

<Input
  flex
  value={search}
  iconLeft="search"
  radius={SIZES.base / 2}
  style={styles.search}
  selectionColor={COLORS.white}
  iconStyle={styles.searchIcon}
  containerStyle={styles.searchContainer}
  color={Utils.rgba(COLORS.white, 0.3)}
  onFocus={() => onSearch()}
  // 传入右侧清除按钮
  renderRightIcon={() => search.length > 0 && (
    <Button 
      color="transparent"
      style={styles.clearIconStyle}
      onPress={() => setFilters({...filters, address: '', lat: gps.latitude, lng: gps.longitude })}
    >
      <Icon name="clear" />
    </Button>
  )}
/>

优化提示 #

• 上述代码中加入了search.length > 0的判断，仅当输入框有内容时才显示清除按钮，无输入时自动隐藏，可优化使用体验
• 可根据实际的图标大小、输入框高度调整垂直定位的数值，确保清除按钮和输入框垂直对齐

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