iOS端native-base(v2)输入框弹出键盘时内容滚动隐藏、光标消失问题

问题根因 #

你代码中使用native-base的Content组件包裹Input，Content底层基于React Native的ScrollView实现，iOS端ScrollView内部的输入框聚焦时会触发默认滚动偏移逻辑，而你当前场景下Content没有滚动需求，反而导致已输入内容被滚动移出可视区，光标同步消失。Android端ScrollView默认无该自动偏移逻辑，因此运行正常。

解决方案 #

方案1（优先推荐）：替换Content为普通View #

你当前的Input布局为固定单行，完全不需要滚动容器，直接将InputField.js中的Content组件替换为普通View即可修复，修改后的核心代码如下：

// InputField.js 修改部分
<View
  style={{
    flexDirection: "row",
    alignItems: "center",
    flex: 1 // 补加flex:1占满剩余布局空间，避免输入框宽度异常
  }}
>
  <Input
    // 原有属性保持不变
    value={value}
    disabled={disabled}
    autoCompleteType={type.autoCompleteType}
    autoCorrect={type.autoCorrect}
    autoCapitalize={type.autoCapitalize}
    keyboardType={type.keyboardType}
    onChangeText={onChangeText}
    secureTextEntry={type.secureTextEntry}
    maxLength={type.maxLength}
    placeholder={placeholder}
  />
</View>

方案2（如果必须保留Content组件）：禁用Content滚动 #

如果有特殊逻辑必须保留Content组件，直接给Content添加scrollEnabled={false}属性即可禁用默认滚动偏移逻辑：

<Content
  scrollEnabled={false}
  contentContainerStyle={{
    flexDirection: "row",
    alignItems: "center",
  }}
>

可选兜底优化 #

如果修改后仍有偶发光标丢失问题，可给Input添加selection属性手动控制光标位置：

<Input
  // 原有属性不变
  selection={{
    start: value?.length || 0,
    end: value?.length || 0
  }}
/>

以上方案均不会影响Android端原有运行逻辑，修改后可直接验证iOS端效果。

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