簡易ReactNative高階組件實現自動隱藏鍵盤功能

最近在開發RN時遇到這樣一種狀況，頁面上方有個數字類型的輸入框(keyboardType="numeric")，點開以後把頁面底部的提交按鈕給遮蔽了，可是IOS的數字鍵盤沒有收縮功能，致使一點開就沒法進行操做了，如圖：

     

所以須要在用戶點擊空白處時把鍵盤隱藏，能夠使用以下的方法：

const dismissKeyboard = require('dismissKeyboard')
export default class Demo extends Component {
    render() {
        return (
            <TouchableWithoutFeedback onPress={dismissKeyboard}>
                <View style={{flex:1}}>
                   //some components like TextInput
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

但每次都須要麻煩地引入dismissKeyboard和TouchableWithoutFeedback組件，所以想到了用高階組件的實現方式：

const dismissKeyboard = require('dismissKeyboard')
export default (WrappedComponent) => class AutoHideKeyboard extends Component {
    render() {
        return (
            <TouchableWithoutFeedback style={{flex:1}} onPress={dismissKeyboard}>
                <View style={{flex:1}}>
                    <WrappedComponent {...this.props}/>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

注意：即便你的WrappedComponent是一個用View包裹的組件，也得在TouchableWithoutFeedBack中再包一層View，纔不會致使找不到setNativeProps的錯誤，詳見：http://reactnative.cn/docs/0.40/direct-manipulation.html#content

這樣子就完成一個簡單的高階組件了。

使用方式有兩種：

1.函數式

class FindPw extends Component {
   //......
}
export default AutoHideKeyboard(FindPw)

2.decorator（裝飾器）

@AutoHideKeyboard
class FindPw extends Component {
   //......
}
export default FindPw

 建議使用第二種，能夠保證在之後疊加多個高階組件時，不會出現 export defalut A(B(C(...)))這種難以解讀的形式