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中，那么點擊輸入框外不會自動隱藏軟鍵盤