需求:進入ReactNative頁面中,頁面上含有TextInput控件,則TextInput 獲取焦點,將鍵盤彈出需求。
問題:發現鍵盤有時候從右邊滑出,好奇怪,鍵盤一般是從底邊滑出呀!
我是利用頁面剛渲染出來出現TextInput,在組件里根據autoFocus屬性進行聚焦。
目前想到的原因是:頁面是多次刷新的,可能頁面還沒渲染出來,鍵盤就跟着彈出來了,給人的感覺是鍵盤是從右邊彈出的。
初始解決方法:
定義一個state,賦值給TextInput 的屬性autoFocus,再componentDidMount里加個定時器,比如300ms 後改變狀態,刷新頁面。
結果:textInput沒有聚焦。
後來查資料發現:autoFocus該屬性如果爲true,在componentDidMount後會獲得焦點。默認值爲false。設一個定時器去改變狀態壓根是不管用的,因爲componentDidMount只走一遍呀。
接着查資料發現有個方法 focus(),可以認爲設置textInput聚焦的。結合ref ,加定時器:
//this.amountTextInput textInput 引用
if (this.amountTextInput) {
if (!this.showPriceDirectly) {
this.timer = setTimeout(() => {
this.amountTextInput.focus();
// this.setState({amountTextInputAutoFocus:!this.showPriceDirectly ? true : false})
}, 80);
}
}
textInput 組件裏就不要antoFocus屬性了。
上面的方法算是解決了鍵盤從右邊滑出的問題,但真正的原因,暫時還不知道,望大佬指點。