React-native鍵盤遮擋輸入框問題的解決

　　2016年10月25日更新：

　　現在有一個更准確一點的做法是用一個View包裹住TextInput，然后通過該View的onLayout方法獲取該輸入框的y軸位置，再減去一個適當的高度去處理scrollview的滾動，如下所示：

<View onLayout={this._downloadLayout.bind(this)}
      style={{marginLeft:15,flexDirection: 'column',alignItems:'flex-start'}}>
    <TextInput
        style={styles.inputStyle}
        defaultValue={this.state.downloadUrl}
        placeholder = '輸入下載地址'
        ref = 'downloadInput'
        onFocus = {this._downLoadFocus.bind(this)}
        onChangeText={(text) => this.setState({downloadUrl:text})}
    />
</View>
然后實現_downloadLayout方法：

_downloadLayout(e){

    this.setState({
        downloadY:e.nativeEvent.layout.y,
    });
}
之后再實現TextInput的onFocus方法，對包裹的整個scrollview頁面進行滾動：

_downLoadFocus(){
    let scroller = this.refs.scroller;
    iOS&& setTimeout(()=>{
        let y = this.state.downloadY - 1/3*Dev_height;//Dev_height為屏幕的高度
        scroller&&scroller.scrollTo({x:0, y:y, animated:true});
    },50);
}

這樣的處理適合大多數的情況。
評論里有小伙伴說React.findNodeHandle已經不可以使用了，應該是使用了rn更新的版本，所以我們在使用的時也需要根據版本的不同去選擇合適的方法，
感謝他的提醒，新版本可以使用下面這個方法
import ReactNative from 'react-native';
...
ReactNative.findNodeHandle(...)

     

 

RN中要解決鍵盤遮擋輸入框的問題其實有挺多方式，在這里只是記錄其中的一些個人實際開發中使用到的。

     方式一、使用scrollTo方法，這也是最簡單最粗暴的，只是需要計算scrollview滾動的距離，並且處理一些體驗的bug問題。大致思路是：組件render方法中使用scrollview，並且設置scrollview的keyboardShouldPersistTaps={true}（此步一定不能少，如果缺少該屬性，接下來的一步將會不起作用），然后在scrollview中用一個view作為container包裹所有剩余的子視圖，比如Text，TouchableHighlight之類的，並且用onStartShouldSetResponderCapture截取該view的事件，用以解決當點擊頁面上的按鈕時，第一次點擊只會收起鍵盤，第二次點擊才會響應按鈕方法的bug。然后在TextInput的onFocus方法中滾動scrollview，在onEndEditing中恢復scrollview的滾動。以下是在具體實現中的代碼。

render方法的實現：

render:function() {

　　return(
　　　　<View style={styles.container}>
　　　　<NavigationBar title={'綁定手機號'} onBackPress={this.onBackPress}/>
　　　　<ScrollView ref='scroll' keyboardShouldPersistTaps={true} >
　　　　　　<View style={styles.content} onStartShouldSetResponderCapture={(e) => {
　　　　　　　　const target = e.nativeEvent.target;
　　　　　　　　if (target !== React.findNodeHandle(this.refs.phoneInput) && target !== React.findNodeHandle(this.refs.codeInput)) {
　　　　　　　　　　this.refs.phoneInput.blur();
　　　　　　　　　　this.refs.codeInput.blur();
　　　　　　　　}}}>

　　　　　　　　<TextInput
　　　　　　　　　　style = {styles.cardNumText}
　　　　　　　　　　ref = 'phoneInput'
　　　　　　　　　　onFocus={this.scrollViewTo.bind(this)}
　　　　　　　　　　onEndEditing={()=>{this.refs.scroll.scrollTo(0)}}
　　　　　　　　　　onChange = {this.cardNumberTextChanged.bind(this)}
　　　　　　　　　　placeholder = '請輸入預留手機號'
　　　　　　　　　　placeholderTextColor = '#481A5C'
　　　　　　　　　　keyboardType = 'numeric'
　　　　　　　　/>

　　　　　　　　<View style = {styles.lineView}></View>

　　　　　　　　　　<TouchableHighlight style = {styles.topButton} underlayColor='#9B9B9B' onPress = {this.jumpToNextPage.bind(this)}>
　　　　　　　　　　　　<Text style = {styles.buttonText}>發送驗證碼</Text>
　　　　　　　　　　</TouchableHighlight>
　　　　　　　　<TextInput
　　　　　　　　　　style = {styles.cardNumText}
　　　　　　　　　　ref = 'codeInput'
　　　　　　　　　　onFocus={this.scrollViewTo.bind(this)}
　　　　　　　　　　onEndEditing={()=>{this.refs.scroll.scrollTo(0)}}
　　　　　　　　　　placeholder = '輸入驗證碼'
　　　　　　　　　　placeholderTextColor = '#999'
　　　　　　　　　　onChange = {this.cardNumberTextChanged}
　　　　　　　　　　keyboardType = 'number-pad'
　　　　　　　　/>
　　　　　　　　<View style = {styles.lineView}></View>

　　　　　　　　<Text style = {styles.protectText}>
　　　　　　　　　　　XXXXXXXXXXXXXXXXXXX
　　　　　　　　</Text>

　　　　　　　　<TouchableHighlight style = {styles.downButton} underlayColor='#481A5C' onPress = {this.jumpToNextPage.bind(this)}>
　　　　　　　　　　<Text style = {styles.buttonText}>下一步</Text>
　　　　　　　　</TouchableHighlight>
　　　　　　</View>
　　　　</ScrollView>
　　</View>);
}

　　onFocus時調用的scrollViewTo方法的實現：

　　scrollViewTo:function(e){
　　　　let target = e.nativeEvent.target;
　　　　let scrollLength = 100;
　　　　if (target=== React.findNodeHandle(this.refs.codeInput)) {
　　　　　　scrollLength = 160;
　　　　}
　　　　this.refs.scroll.scrollTo(scrollLength);
　　},

 

　　方式二、使用View包裹時，通過設置View的marginTop屬性並且結合動畫來實現：初始化一個state對象的值viewMarginTop用於設置Animated.View的marginTop，在textInput的onfocus時改變viewMarginTop的值，在onEndediting時恢復或者設置新的marginTop。具體為首先引入Animated，並且初始化state方法。（state內值的變化會觸發界面上相關元素的再次熏染，具有reactivecocoa的相同的作用）

　　getInitialState: function () {
　　　　return {
　　　　　　viewMarginTop: new Animated.Value(0),
　　　　};
　　},

在需要上升的視圖中使用Animated.View，設置其mairginTop為viewMarginTop

  <Animated.View style={{marginTop:this.state.viewMarginTop}}>

　　　　//當然不建議將樣式寫在這里，這樣會導致每次熏染都創建一次樣式，你應該將樣式定義到StyleSheet中

　　　　//your Views and component

  </Animated.View>

然后在onFucos的方法中用動畫改變viewMarginTop的值，如下

　　Animated.timing(
　　　　this.state.viewMarginTop,
　　　　{
　　　　　　toValue: 160,
　　　　　　duration: 250,
　　　　}
　　).start();

要恢復只需要在onEndediting中用同樣的原理恢復viewMarginTop的值即可.

 

方式三、通過監聽scrollview上鍵盤的出現和消失，在出現和消失方法中設置某個state值的變化，來設置scrollview的contentInset，該方法只是在github上看過，具體本人並沒有用過即：

 

1.在頁面熏染完時添加監聽

componentDidMount: function () {
　　// Keyboard events監聽
　　DeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace)
　　DeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace)
},

componentWillUnmount: function () {
　　// TODO: figure out if removeAllListeners is the right thing to do
　　DeviceEventEmitter.removeAllListeners('keyboardWillShow')
　　DeviceEventEmitter.removeAllListeners('keyboardWillHide')
},

 

getInitialState: function (props) {//初始化變量
　　this.viewIsInsideTabBar = false
　　return {
　　　　keyboardSpace: 0,
　　}
},

// Keyboard actions
updateKeyboardSpace: function (frames) {
　　const keyboardSpace =  frames.endCoordinates.height//獲取鍵盤高度
　　this.setState({
　　　　keyboardSpace: keyboardSpace,
　　})
},

resetKeyboardSpace: function () {
　　this.setState({
　　　　keyboardSpace: 0,
　　})
},

//設置scrollview的contentInset

<ScrollView
　　ref='keyboardView'
　　keyboardDismissMode='interactive'
　　contentInset={{bottom: this.state.keyboardSpace}}
　　showsVerticalScrollIndicator={true}
</ScrollView>