一、Keyboard API

當我們點選輸入框時，手機的軟鍵盤會自動彈出，以便使用者進行輸入。React Native 框架提供的Keyboard API可以實現對鍵盤事件進行監聽，能夠檢測到鍵盤的彈出與收回，從而對佈局做出相應的調整，並可以通過程式碼關閉虛擬鍵盤。

1. addListener(eventName, callback)

這個函式用來載入一個指定事件的事件監聽器，該函式返回一個物件。開發者可以儲存該物件。在需要釋放事件監聽器時，呼叫該物件的remove方法。其中addListener函式中的 eventName 可以為： 1） keyboardWillShow：軟鍵盤將要顯示 2） keyboardDidShow：軟鍵盤顯示完畢 3） keyboardWillHide：軟鍵盤將要收起 4） keyboardDidHide：軟鍵盤收起完畢 5） keyboardWillChangeFrame：軟體盤的 frame 將要改變

1.1 監控鍵盤事件的例程

componentWillMount(){
    /*監聽鍵盤彈出事件，並儲存返回的物件用於解綁*/
    this.keybordDidShowListener=Keyboard.addListener('keyboardDidShow',
      this.keybordDidShowHandler.bind(this));
    /*監聽鍵盤收回事件，並儲存返回的物件用於解綁*/
    this.keybordDidHideListener=Keyboard.addListener('keyboardDidHide',
      this.keybordDidHideHandler.bind(this));
  }
  //鍵盤彈出事件響應
  keybordDidShowHandler(event) {
    this.setState({ KeyboardShown: true });
  }
  //鍵盤隱藏事件響應
  keybordDidHideHandler(event) {
    this.setState({ KeyboardShown: false });
  }
  componentWillUnmount(){
    if(this.keybordDidShowListener!==null){
      this.keybordDidShowListener.remove()
    }
    if(this.keybordDidHideListener!==null){
      this.keybordDidHideListener.remove()
    }
  }
   render(){
    return(
      <View style={[styles.container,this.state.KeyboardShown && styles.bumpedContainer]}>
        按照鍵盤是否彈出控制視窗樣式
      </View>
    )
  }
 

1.2 event 引數值

在Android、ios平臺，所有的鍵盤事件處理函式都能收到一個 event 引數，不過在不同平臺下 event 引數可以取到的值不太一樣。

1.2.1 Android 平臺可以取到的值:

1）event.endCoordinates.screenX 2）event.endCoordinates.screenY 3）event.endCoordinates.width 4）event.endCoordinates.height

1.2.2 iOS 平臺可以取到的值

1）event.easing：這個值始終是 keyboard 2）evnet.duration：記錄軟鍵盤彈出動畫的持續事件，單位是毫秒 3）event.startCoordinates.screenX 4）event.startCoordinates.screenY 5）event.startCoordinates.width 6）event.startCoordinates.height 7）event.endCoordinates.screenX 8）event.endCoordinates.screenY 9）event.endCoordinates.width 10）event.endCoordinates.height

2. removeListener(eventName, callback)與removeAllListener(eventName)

用來釋放鍵盤事件監聽器，在開發中還是使用前面提到的remove方法較多

3. 收起軟體盤dismiss()

onDismissKeyboard(){
      Keyboard.dismiss();
}
....
<View style={[styles.flex, styles.topStatus]}>
       <TouchableOpacity activeOpacity={1.0} onPress={this.dissmissKeyboard.bind(this)}>
                    ...
        </TouchableOpacity>
</View>

如果點選事件控制元件使用的是TouchableOpacity,如果不想看到點選效果的話，記得設定啟用的透明度為1