2016年10月25日更新：

　　現(xiàn)在有一個更準(zhǔn)確一點的做法是用一個View包裹住TextInput，然后通過該View的onLayout方法獲取該輸入框的y軸位置，再減去一個適當(dāng)?shù)母叨热ヌ幚韘crollview的滾動，如下所示：

<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>
然后實現(xiàn)_downloadLayout方法：

_downloadLayout(e){ this.setState({
downloadY:e.nativeEvent.layout.y,
});
}
之后再實現(xiàn)TextInput的onFocus方法，對包裹的整個scrollview頁面進(jìn)行滾動：
_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);
} 這樣的處理適合大多數(shù)的情況。
評論里有小伙伴說React.findNodeHandle已經(jīng)不可以使用了，應(yīng)該是使用了rn更新的版本，所以我們在使用的時也需要根據(jù)版本的不同去選擇合適的方法，
感謝他的提醒，新版本可以使用下面這個方法
import ReactNative from 'react-native';
...
ReactNative.findNodeHandle(...)

? ? ?

?

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

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

render方法的實現(xiàn)：

render:function() {

　　return(
　　　　<View style={styles.container}>
　　　　<NavigationBar title={'綁定手機(jī)號'} 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 = '請輸入預(yù)留手機(jī)號'
　　　　　　　　　　placeholderTextColor = '#481A5C'
　　　　　　　　　　keyboardType = 'numeric'
　　　　　　　　/>

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

　　　　　　　　　　<TouchableHighlight style = {styles.topButton} underlayColor='#9B9B9B' onPress = {this.jumpToNextPage.bind(this)}>
　　　　　　　　　　　　<Text style = {styles.buttonText}>發(fā)送驗證碼</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時調(diào)用的scrollViewTo方法的實現(xiàn)：

　　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包裹時，通過設(shè)置View的marginTop屬性并且結(jié)合動畫來實現(xiàn)：初始化一個state對象的值viewMarginTop用于設(shè)置Animated.View的marginTop，在textInput的onfocus時改變viewMarginTop的值，在onEndediting時恢復(fù)或者設(shè)置新的marginTop。具體為首先引入Animated，并且初始化state方法。（state內(nèi)值的變化會觸發(fā)界面上相關(guān)元素的再次熏染，具有reactivecocoa的相同的作用）

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

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

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

　　　　//當(dāng)然不建議將樣式寫在這里，這樣會導(dǎo)致每次熏染都創(chuàng)建一次樣式，你應(yīng)該將樣式定義到StyleSheet中

　　　　//your Views and component

? </Animated.View>

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

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

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

?

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

?

1.在頁面熏染完時添加監(jiān)聽

componentDidMount: function () {
　　// Keyboard events監(jiān)聽
　　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,
　　})
},

//設(shè)置scrollview的contentInset

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/pofabs/p/5109021.html

總結(jié)

以上是生活随笔為你收集整理的React-native键盘遮挡输入框问题的解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。