React Native OTP 输入 - 光标不在文本输入框中居中

Question

我正在 React Native 中构建一个带有四个

TextInput

框的 OTP 输入组件，但我遇到了光标不在框内居中的问题。相反，它与框的右侧对齐。

这是我正在使用的相关代码：

<View style={styles.otpContainer}>
  {[...new Array(4)].map((_, index) => (
    <TextInput
      ref={ref => { inputs.current[index] = ref; }}
      style={[styles.otpInput, focusedIndex === index && { borderColor: tertiary }, emptyOtp && { borderColor: '#D00000' }, invalidOtp && { borderColor: '#D00000' }]}
      key={index}
      keyboardType="number-pad"
      maxLength={1}
      selectTextOnFocus
      contextMenuHidden
      testID={`OTPInput-${index}`}
      onChangeText={text => handleChangeText(text, index)}
      onKeyPress={e => handleKeyPress(e, index)}
      placeholder={focusedIndex !== index ? '•' : ''}
      onFocus={() => setFocusedIndex(index)} 
      onBlur={() => setFocusedIndex(-1)} 
    />
  ))}
</View>

otpContainer: {
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  gap: 8,
  marginTop: 40,
  textAlign: 'center',
},
otpInput: {
  borderWidth: 1,
  borderColor: '#ccc',
  borderRadius: 8,
  paddingHorizontal: 16,
  textAlign: 'center',
  fontSize: 24,
  color: '#000',
  lineHeight: 55,
  width: 55,
  height: 55,
}

TextInput

光标似乎稍微偏离中心，偏向右侧。我已经确保

textAlign: 'center'

已设置，但它仍然无法按预期工作。

我尝试过的事情：

• 移除衬垫并调整

  lineHeight

  。
• 确保

  width

  和

  height

  与

  fontSize

  一致。
• 调整

  textAlign

  属性。

有人以前遇到过这个问题或者对修复光标对齐有任何建议吗？

Answer 1

otpInput 样式中的 paddingHorizontal 属性可能会导致光标移动。 React Native TextInput 光标对齐方式也会受到 fontSize、lineHeight 和任何其他填充或边距的影响。 试试这个：

otpInput: {
  borderWidth: 1,
  borderColor: '#ccc',
  borderRadius: 8,
  textAlign: 'center',
  textAlignVertical: 'center', // Ensure vertical centering
  fontSize: 24,
  color: '#000',
  width: 55,
  height: 55,
  lineHeight: 55, // Match height
  padding: 0, // Avoid conflicting padding
},