React Native TextInput 鍵盤彈起方向問題

需求:進入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屬性了。

上面的方法算是解決了鍵盤從右邊滑出的問題,但真正的原因,暫時還不知道,望大佬指點。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章