React Native ScrollView中TextInput焦点问题

前言

在项目中有输入信息页面，两个TextInput在同一个页面，并且在ScrollView中，总觉得点击有毛病。

分析区别

• 在ScrollView中的多个TextInput

假设第一个TextInput为A，第二个TextInput为B，则A和B的焦点获取顺序如下：
a.点击A，A获得焦点，并且软键盘弹出，A可进行输入；
b.A输入完成，此时分三种操作：
（1）点击软键盘的“完成”按钮 ，此时软键盘隐藏，A失去焦点
（2）点击软键盘的向下隐藏按钮，此时软键盘隐藏，A保留焦点
（3）不做任何操作，此时软键盘显示，A保留焦点
c.点击B，也分三种情况：
（1）B直接得到焦点
（2）第一次点击使A失去焦点，第二次点击B得到焦点
（3）第一次点击使软键盘隐藏并使A失去焦点，第二次点击B得到焦点

• 在View中的多个TextInput

a.点击A，A获得焦点
b.不管软键盘是否隐藏，点击B总能得到焦点，切换快速且流畅

修改

在ScrollView文档中，提供了一个属性，如图：

 

ScrollView属性.png

所以当ScrollView中有多个TextInput时，使用keyboardShouldPersistTaps={'handled'}就可以解决TextInput焦点切换问题了。

<View style={{flex: 1, alignItems: 'center'}}>
    <ScrollView
        keyboardShouldPersistTaps={'handled'}
    >
        <TextInput
            style={{width: 300, height: 50}}
            value={valueA}
            onChangeText={(val) => this.setState({valueA: val})}
        />
        <TextInput
            style={{width: 300, height: 50}}
            value={valueB}
            onChangeText={(val) => this.setState({valueB: val})}
        />
    </ScrollView>
</View>

注意：⚠️如果TextInput没有包含在ScrolllView中，那么点击输入框外不会自动隐藏软键盘