首先，根据业务和交互UI设计，本文实现的自定义的输入框组件InputItem需要用到React-native的View、Text、TextInput、TouchableOpacity四个原生组件和自定义的一个Icon组件。
组件基本结构如下，简略版，样式就不详细举出了
<View style={styles.container}>
/*label 文字*/
<View>
<Text>{labelText}</Text>
<View>
{isTips && (<TouchableOpacity>
<Text><Icon name=‘tips’></Text>
</TouchableOpacity>
)}
/*输入框*/
<TextInput
style={styles.textInput}
onBlur={this.onBlurTest}
onChangeText={this.onInputChange}
autoCorrect={false}
/>
</View>
/*文字错误提示*/
{(this.state.isError && (
<View style={styles.errorMsgContainer}>
<Text style={styles.errorMsg}>{this.props.errorMsg}</Text>
</View>
)}
接下来就是本人在结合需求开发的这个输入框组件时，遇到的几个比较关键点（坑）
1、输入的值的保存
2、校验的结果显示方式（边输入边校验还是输入框失去焦点以后再校验）
3、校验的触发时机
4、父组件如何记录、计算所有InputItem的校验结果
5、键盘弹出，输入框会被遮罩的问题
第一点：输入值的保存
（1）一开始使用的react-native 版本是0.56，在ios上是输入不了中文的（巨坑这个点）。目前项目升级到0.57版本可以解决。之前不升级项目版本，用了一套暴力的解决方案，访问链接：https://github.com/facebook/react-native/issues/18403 （ withHandleHandWritingTextInput）。问题基本可以解决，但是没有满足项目的需求，所以被迫升级版本。
（2）假如输入的内容需要限定位数，且要输入中文，位数要注意长度：用户每打一个拼音字母，其实就占了输入框的一位数。举个例子：假设设定输入框位数为4，那用户想打个 ‘想’，拼音是xiang，拼音位数是5，这时候用户只能打出前四位 ‘xian’，无法打出第五位 ‘g’，因为位数不够了。
（3）由于TextInput是受控组件，并不提倡在TextInput中使用value绑定state的写法来保存输入的值，事实也是，在react-native中使用这种写法也会出现bug。所以，此项目中使用的是，父组件props传递一个saveValue函数给InputItem，然后在InputItem中的onChangeText中调用this.props.saveValue(value)，将value传递给父组件，让父组件保存对应的输入值。
第二点：校验的结果显示方式
（1）一开始项目的需求是用户一点输入一边实时校验。这种方式其实比较简单，只需要在onChangeText的监听函数中，加上自己的校验函数regTest并且在regTest中设置自身的校验结果state，控制errorMsg显示与否就可以了。
（2）顺便提一句，校验所使用的正则表达式其实也是从父组件props传递过来的，感觉这样可以尽量让InputItem组件pure一点点。
（3）现在项目的需求想改成，输入内容不实时检验，当输入框失焦的时候才去校验。这时候，就可以把之前的onChangeText函数中的regTest函数抽离出来，放到onBlur函数中去。
第三点：校验的触发时机
这个点一看其实好像不是一个问题，因为触发的时机看第二点问题，就已经很明显了，要不就是边输入边触发，要不就失焦的时候触发，很好理解。
（1）需要考虑到一个需求情况是，输入框的值，理应是可以设置默认的值。例如，进入用户的信息编辑页，要把InputItem的value设置成默认用户信息。我们从开始的添加信息的时候，就已经校验了输入内容的合法性，因此，在理想的情况下，获取到的用户信息和设定的默认值，应该是不需要再校验。但是为了程序更加健壮，还是得假设获取的数据是不可靠，所以在获取到数据并且设置默认值的时候，依然需要加上校验的处理。
（2）接下来就是如何触发设置完默认值以后进行校验的问题了。首先，能想到的是设置默认值，其实就是数据从无到有，因此可以在InputItem 中的componentWillReceiveProps函数设置
/* 设置默认值时，初始数据为null*/
if (nextProps.value && !this.props.value) {
this.regTest(nextProps.value);
}
这样基本能满足页面加载后同时设置了默认值，然后对默认值进行校验的需求。
（3）然后，项目有个特别的需求，就是输入内容可以通过扫描照片来自动填入。假若，用户一开始没有自己输入过信息，直接通过扫描来填入信息，其实情况与上面所说的情况是一致的，数据都是从无到有，可以触发校验。需要考虑的情况其实是，用户扫描之前填入过内容，再去扫描结果覆盖之前填入的信息，这时候要触发对覆盖的扫描结果信息的校验。
（4）这种情况还得结合第2大点--校验的结果显示方式来讨论。
假如显示方式是边输入边校验，则可以在InputItem 中的componentWillReceiveProps函数设置
/*新输入的（扫描结果设置）value和之前的value不同，就校验新的value，符合边输入边校验的规则*/
else if (nextProps.value !== this.props.value) {
this.regTest(nextProps.value ? nextProps.value : '');
}
假如显示方式是失焦以后再校验，则会相对比较复杂一点。我们需要考虑，什么时候去触发校验。（新需求，目前还在研究解决方案）
第四点：父组件如何记录、计算所有InputItem的校验结果
之前的实现背景是：父组件有多个输入框，输入框值保存在父组件的state中，同时，输入框的校验结果也需要同步到父组件，在父组件记录下来，并且计算所有输入框的状态，以便决定用户是否可以成功点击完成按钮。
目前的解决方案是，在父组件中设置一个变量，对象allStatus。在用户输入信息，InputItem调用父组件的saveValue函数将信息set进父组件state进行保存的后，将输入信息的校验后的状态也设置到变量对象allStatus中，相当于每一个输入框，在allStatus对象中会有一个对应的输入框检验属性，类型是Boolean值，记录输入框当前的信息的状态是否合法。然后再用户点击完成按钮的时候，遍历allStatus对象的属性，遇到一个属性为true（就是有输入框内容是错误的）就阻止完成按钮的后台请求操作。
这个方案可能不是最优解，目前在考虑使用二进制数记录计算，还在研究中。
第五点：键盘弹出，输入框会被遮罩的问题
使用的是react-native-keyboard-aware-scroll-view依赖的KeyboardAwareScrollView解决项目的问题，iso和Android平台使用方法不一样，不一定适用你们的项目，谷歌很多解决方案，多尝试。以下是代码：
if (Platform.OS === 'ios') {
return (
<KeyboardAwareScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
{this.props.children}
</KeyboardAwareScrollView>
);
}
return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
<ScrollView showsVerticalScrollIndicator={false}>
{this.props.children}
</ScrollView>
</KeyboardAvoidingView>
);
}
