ReactNative 中TextInput剛進入頁面獲取焦點

需求:進入ReactNative頁面中,頁面上含有TextInput控件,則TextInput 獲取焦點,將鍵盤彈出需求。

TextInput 頁面出現(xiàn)的時期
1、頁面剛渲染出來就出現(xiàn)TextInput。
2、頁面中通過設(shè)置state值后頁面,渲染出TextInput。

針對于第一中情況,查看RN中 TextInput屬性 可以看到 autoFocus該屬性
如果為true,在componentDidMount后會獲得焦點。默認(rèn)值為false。

第二種情況,因為componentDidMount 在頁面生成時只執(zhí)行一次。通過設(shè)置state值后,渲染出TextInput 并不能通過設(shè)置autoFocus來獲取焦點。

通過refs來實現(xiàn) focus();

具體參考代碼如下:

<TextInput autoFocus={true} multiline={true} clearButtonMode={'while-editing'}
             style={{
                              fontSize: 14,
                              marginTop: 0,
                              flex: 1,
                              backgroundColor: '#ffffff'
                          }} 
             onChangeText={(text) => this.updateText(text)} ref='textInputRefer'
             placeholder={'請輸入內(nèi)容'}/>

componentDidUpdate(){
if (this.refs.textInputRefer != undefined) {
        this.refs.textInputRefer.focus();
}
},
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 最近在研究React-Native,把該配置的環(huán)境都配置了一遍,HelloWorld跑起來了之后,現(xiàn)在開始學(xué)習(xí)、熟...
    小朱v閱讀 1,056評論 0 1
  • 對React-Native的學(xué)習(xí),從熟悉基本控件開始。 View 屬性方法 序號名稱屬性O(shè)r方法類型說明 1 ac...
    諾花生閱讀 923評論 0 0
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,942評論 1 18
  • It's a common pattern in React to wrap a component in an ...
    jplyue閱讀 3,398評論 0 2
  • TextInput是一個允許用戶在應(yīng)用中通過鍵盤輸入文本的基本組件。本組件的屬性提供了多種特性的配置,譬如自動完成...
    亭止閱讀 3,378評論 1 0

友情鏈接更多精彩內(nèi)容