混合開發的大趨勢之一React Native TextInput (文本輸入)

TextInput

TextInput是允許用戶輸入文本的基礎組件。
他有一些屬性可以來幫助我們處理業務邏輯諸如onChangeText onSubmitEditing 等等

類似於Android 的EditText,而那些提供的處理方法類似於ontextchanged等回調的行為。

我們來看下官方的例子

import React, { Component } from 'react';
import { AppRegistry,Text,View,TextInput } from 'react-native';
class RNLearnPro extends Component {
constructor(props){
  super(props);
  this.state={text:'' };
}

  render() {
    return(
    
       this.setState({text})}/>
      
        {this.state.text.split('').map((word)=>word&&'哈').join(' ')}
      
    
    );
  }
}

AppRegistry.registerComponent('RNLearnPro', () => RNLearnPro);

我們有一個試圖組，垂直排列，上面是TextInput 下面是 Text 業務邏輯是 TextInput 輸入一個 字 在 Text 就會顯示一個 “哈”然後會填充進去一個空格

實現還是通過 state來操作的 通過監聽 state的變化來決定自己的呈現內容, 通過onChangeText 來改變state 的值<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxjb2RlPjxjb2RlPjxjb2RlPjxjb2RlPjxjb2RlPjxjb2RlPteio7o8YnIgLz4NCsjnufvSqrbUVGV4dElucHV0vfjQ0FVJ5NbIvqOs1u7I58/Cu67P37Cho6zN4rK/v/LM5bChyrLDtLXEo6y/ydLU0aHU8dTZzeLD5tTZzNe49lZpZXcsyLu687bUxMe49lZpZXe9+NDQVUnQ0M6qo6zI58/Czbw8L2NvZGU+PC9jb2RlPjwvY29kZT48L2NvZGU+PC9jb2RlPjwvY29kZT48L3A+DQo8cD48Y29kZT48Y29kZT48Y29kZT48Y29kZT48Y29kZT48Y29kZT48aW1nIGFsdD0="這裡寫圖片描述" src="/uploadfile/Collfiles/20160820/20160820092437998.png" title="\" />

核心代碼：

  
         this.setState({text})}/>
      

再來介紹些 的API

autoCapitalize

設置TextInput是否要自動將特定字符切換為大寫：

1.characters–> 所有的字符。

2.words–> 每個單詞的第一個字符。

3.sentences:–>每句話的第一個字符（默認）。

4.none:–>不自動切換任何字符為大寫。

看下characters的例子

autoCorrect

拼寫自動修正,默認是true

autoFocus

獲得焦點,默認值為false。

blurOnSubmit

如果為true，文本框會在提交的時候失焦。
單行輸入框默認值為true，多行則為false。

對於多行輸入框來說，如果將blurOnSubmit設為true，則在按下回車鍵時就會失去焦點同時觸發onSubmitEditing事件，而不會換行。

defaultValue

設置初始值，如果擦掉就會顯示placeholder值