遇到的坑
本周工作中開發(fā)一個小任務(wù)，將TextInput放到屏幕最下面歉甚，然后在輸入內(nèi)容的時候鍵盤必須在TextInput的下方烟馅，此時就遇到了標(biāo)題中所談到的問題：鍵盤遮擋住了輸入框阻肿。如下圖：
KeyboardTextInput_1.gif
當(dāng)時我開發(fā)完后我用的是Android機做的測試傅是，發(fā)現(xiàn)在沒有這種現(xiàn)象，但是在ios平臺上卻有构订。這對于產(chǎn)品來說是肯定不行的侮叮。剛開始問了一下其他同事有沒有遇到這種問題，但他們也沒有遇到過悼瘾。只好求助Google了囊榜。搜了一下，別人也遇到了這種問題亥宿，現(xiàn)在把它記錄一下卸勺。
解決方法
export default class KeyboardTextInputComponent extends Component {
render() {
return (
<View style={styles.container}>
<ScrollView
ref="scrollView"
style={{flex: 1}}
>
<TextInput
ref="textInput"
style={styles.textInputStyle}
placeholder="請輸入內(nèi)容"
onBlur={this._reset.bind(this)}
onFocus={this._onFocus.bind(this, 'textInput')}
/>
</ScrollView>
</View>
);
}
_reset() {
this.refs.scrollView.scrollTo({y: 0});
}
_onFocus(refName) {
setTimeout(()=> {
let scrollResponder = this.refs.scrollView.getScrollResponder();
scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
ReactNative.findNodeHandle(this.refs[refName]), 0, true);
}, 100);
}
}
通過上面操作，我們再來看一下效果圖：
KeyboardTextInput_2.gif
