遇到的坑
本周工作中开发一个小任务,将TextInput放到屏幕最下面,然后在输入内容的时候键盘必须在TextInput的下方,此时就遇到了标题中所谈到的问题:键盘遮挡住了输入框。如下图:
KeyboardTextInput_1.gif当时我开发完后我用的是Android机做的测试,发现在没有这种现象,但是在ios平台上却有。这对于产品来说是肯定不行的。刚开始问了一下其他同事有没有遇到这种问题,但他们也没有遇到过。只好求助Google了。搜了一下,别人也遇到了这种问题,现在把它记录一下。
解决方法
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="请输入内容"
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
网友评论
https://github.com/baijunjie/react-native-input-scroll-view