react native TextInput输入限制字数长度在安卓和iOS设备上部分系统键盘输入问题

前奏

对于正在学习RN和已经在RN这条路上摸爬滚打很久的看官应该都知道，虽然RN的跨平台做的很不赖，但是也有一些小细节是无法兼顾的，今天兄弟就遇到了一个小问题。（小问题有时候却很致命）。

问题描述

安卓和iOS很多机型上在输入汉字的过程中会出现将字母（拼音）先输入到输入框中参与计算，一般情况下不会有问题，但如果要做字数限制时问题就出现了。例如，限制只能输入10个字符。大部分人的做法是给TextInput加MaxLength={10}来限制字数，这看起来也十分合情合理，没有任何怀疑，毕竟这是官方提供的属性方法。但恰恰是这个属性导致在输入时出现超界问题。比如下图中，当先输入6个汉字，再输入2个字“测试”的时候，拼音字母 "cesh" 参与计算，已经达到了限制的10个字符，因此导致无法输入10个汉字就不能在继续输入了。

这看似是个小问题，但对于使用app的用户来说，体验就特别差了，顾客就是上帝，上帝不满意那问题是不是很大呢！

解决方法

当然，问题描述清楚了，就得解决。经过仔细端详，终于找到了解决方法。毫不吝啬的分享给各位看官，如果觉得不肖，可以忽略。下面则是解决方法

最后

虽然是个小问题，但是搜遍全网都没找到对症的猛药,在此做个好人好事，希望能帮到各位有需求的看官。

<View style={styles.inpContainer}>
            <View style={styles.inpWrap}>
              <TextInput
                style={styles.input}
                ref='inputText'
                multiline
                onChangeText={(text) => {
                  this.setState({
                    wordValue: text
                  }, () => {
                    this.setState({ surplusLen: defaultLen - text.length });
                  });
                }}
                keyboardType='default'
                value={wordValue}
                placeholder='请输入'
                placeholderTextColor={fontColorSecDeepGray}
              />
              <Text style={styles.wordLen}>{surplusLen}</Text>
            </View>
            {
              surplusLen < 0 &&
              <View style={{ backgroundColor: '#FFF272', padding: px2dp(16) }}>
                <Text style={{ color: 'red', fontSize: px2dp(26) }}>
                  输入内容字数不能超过
                  {defaultLen}
                  个
                </Text>
              </View>
            }

          </View>

解决后如下图：