優(yōu)化結(jié)果:
1,滾動則收回鍵盤(若鍵盤彈出)
2,點擊其它位置收回鍵盤(若鍵盤彈出)
3,當焦點位于TextInput(鍵盤彈出),一次點擊其它組件即可成為響應者,而不是TextInput相應blur事件收回鍵盤。
4,鍵盤彈起遮蓋輸入框則自動滾動頁面以顯示
代碼結(jié)構(gòu)
<ScrollView
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps
>
<TouchableWithoutFeedback onPress={() => dismissKeyboard()}>
<KeyboardAvoidingView behavior="position" keyboardVerticalOffset={64}>
<TextInput />
{/*其它要相應點擊事件的組件,在響應時調(diào)用dismissKeyboard()*/}
<TextInput />
<TextInput />
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
</ScrollView>
注釋
dismissKeyboard是react native自帶的庫,需引入
import dismissKeyboard from 'dismissKeyboard';