React-native键盘遮挡输入框问题的解决
2016年10月25日更新：
現(xiàn)在有一個(gè)更準(zhǔn)確一點(diǎn)的做法是用一個(gè)View包裹住TextInput，然后通過該View的onLayout方法獲取該輸入框的y軸位置，再減去一個(gè)適當(dāng)?shù)母叨热ヌ幚韘crollview的滾動(dòng)，如下所示：
<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>
然后實(shí)現(xiàn)_downloadLayout方法：
_downloadLayout(e){ this.setState({
downloadY:e.nativeEvent.layout.y,
});
}
之后再實(shí)現(xiàn)TextInput的onFocus方法，對包裹的整個(gè)scrollview頁面進(jìn)行滾動(dòng)：
_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ù)的情況。
評(píng)論里有小伙伴說React.findNodeHandle已經(jīng)不可以使用了，應(yīng)該是使用了rn更新的版本，所以我們在使用的時(shí)也需要根據(jù)版本的不同去選擇合適的方法，
感謝他的提醒，新版本可以使用下面這個(gè)方法
import ReactNative from 'react-native';
...
ReactNative.findNodeHandle(...)
? ? ?
?
RN中要解決鍵盤遮擋輸入框的問題其實(shí)有挺多方式，在這里只是記錄其中的一些個(gè)人實(shí)際開發(fā)中使用到的。
? ? ?方式一、使用scrollTo方法，這也是最簡單最粗暴的，只是需要計(jì)算scrollview滾動(dòng)的距離，并且處理一些體驗(yàn)的bug問題。大致思路是：組件render方法中使用scrollview，并且設(shè)置scrollview的keyboardShouldPersistTaps={true}（此步一定不能少，如果缺少該屬性，接下來的一步將會(huì)不起作用），然后在scrollview中用一個(gè)view作為container包裹所有剩余的子視圖，比如Text，TouchableHighlight之類的，并且用onStartShouldSetResponderCapture截取該view的事件，用以解決當(dāng)點(diǎn)擊頁面上的按鈕時(shí)，第一次點(diǎn)擊只會(huì)收起鍵盤，第二次點(diǎn)擊才會(huì)響應(yīng)按鈕方法的bug。然后在TextInput的onFocus方法中滾動(dòng)scrollview，在onEndEditing中恢復(fù)scrollview的滾動(dòng)。以下是在具體實(shí)現(xiàn)中的代碼。
render方法的實(shí)現(xiàn)：
render:function() {
return(
<View style={styles.container}>
<NavigationBar title={'綁定手機(jī)號(hào)'} 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ī)號(hào)'
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ā)送驗(yàn)證碼</Text>
</TouchableHighlight>
<TextInput
style = {styles.cardNumText}
ref = 'codeInput'
onFocus={this.scrollViewTo.bind(this)}
onEndEditing={()=>{this.refs.scroll.scrollTo(0)}}
placeholder = '輸入驗(yàn)證碼'
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時(shí)調(diào)用的scrollViewTo方法的實(shí)現(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í)，通過設(shè)置View的marginTop屬性并且結(jié)合動(dòng)畫來實(shí)現(xiàn)：初始化一個(gè)state對象的值viewMarginTop用于設(shè)置Animated.View的marginTop，在textInput的onfocus時(shí)改變viewMarginTop的值，在onEndediting時(shí)恢復(fù)或者設(shè)置新的marginTop。具體為首先引入Animated，并且初始化state方法。（state內(nèi)值的變化會(huì)觸發(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)然不建議將樣式寫在這里，這樣會(huì)導(dǎo)致每次熏染都創(chuàng)建一次樣式，你應(yīng)該將樣式定義到StyleSheet中
//your Views and component
? </Animated.View>
然后在onFucos的方法中用動(dòng)畫改變viewMarginTop的值，如下
Animated.timing(
this.state.viewMarginTop,
{
toValue: 160,
duration: 250,
}
).start();
要恢復(fù)只需要在onEndediting中用同樣的原理恢復(fù)viewMarginTop的值即可.
?
方式三、通過監(jiān)聽scrollview上鍵盤的出現(xiàn)和消失，在出現(xiàn)和消失方法中設(shè)置某個(gè)state值的變化，來設(shè)置scrollview的contentInset，該方法只是在github上看過，具體本人并沒有用過即：
?
1.在頁面熏染完時(shí)添加監(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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： redis文档翻译_key设置过期时间
- 下一篇： Effective C++ 条款44