带输入长度提示的库 —— react-native-indica

Github 链接

链接地址

npm 安装命令

npm i react-native-indicatortextinput

描述

带输入框长度指示的 TextInput组件

效果

效果图

踩坑点

• 换行输入时,必须不遮挡右下角的长度指示文本.

  • 在安卓中使用布局的 paddingBottom来实现
  • 在 iOS 中使用布局的 borderBottomWidth 来实现

  参考代码:

  const inputAreaBottomHeight = Platform.select({ios: indicatorHeight, android: 0});
  const inputAreaPaddingHeight = Platform.select({ios: 0, android: indicatorHeight});
  
  // ...中间略去
  {
    borderBottomWidth: inputAreaBottomHeight, borderBottomColor: 'rgba(0,0,0,0)',
    paddingBottom: inputAreaPaddingHeight,
  },
  

  说明的是: 最早我也用过用一个TextInput + IndicatorView 纵向排列的方式来做,但是这样的做法, 会引发另一个键盘遮挡的问题.因为一些键盘控制的第三方库的自动滚动,是只针对 TextInput 的区域的, 也就是说,当键盘滚动后, 下面写的 IndicatorView 会被遮挡.

• 输入到结尾的时候, 针对中文的状况,会有拼音超出长度,但是输入后又会被截取掉(这是正常的), 如果不做控制,在这种情况下指示的长度会超过最大值.

中文超过的情况