我见过这个本机应用程序自动滚动窗口的技巧,但想知道在React native中做这件事的最好方法……当<TextInput>
字段获得焦点并位于视图中的较低位置时,键盘将覆盖文本字段。
您可以在example UIExplorer的TextInputExample.js
视图中看到此问题。
有谁有好的解决方案吗?
发布于 2016-07-10 06:17:21
Facebook的open sourced KeyboardAvoidingView
在react原生0.29中解决了这个问题。文档和用法示例可以在here中找到。
发布于 2015-11-08 01:17:30
我们将一些代码形式的react-native-keyboard-spacer和@Sherlock的代码组合在一起,创建了一个KeyboardHandler组件,该组件可以用TextInput元素包装在任何视图中。真是神来之笔!:-)
/**
* Handle resizing enclosed View and scrolling to input
* Usage:
* <KeyboardHandler ref='kh' offset={50}>
* <View>
* ...
* <TextInput ref='username'
* onFocus={()=>this.refs.kh.inputFocused(this,'username')}/>
* ...
* </View>
* </KeyboardHandler>
*
* offset is optional and defaults to 34
* Any other specified props will be passed on to ScrollView
*/
'use strict';
var React=require('react-native');
var {
ScrollView,
View,
DeviceEventEmitter,
}=React;
var myprops={
offset:34,
}
var KeyboardHandler=React.createClass({
propTypes:{
offset: React.PropTypes.number,
},
getDefaultProps(){
return myprops;
},
getInitialState(){
DeviceEventEmitter.addListener('keyboardDidShow',(frames)=>{
if (!frames.endCoordinates) return;
this.setState({keyboardSpace: frames.endCoordinates.height});
});
DeviceEventEmitter.addListener('keyboardWillHide',(frames)=>{
this.setState({keyboardSpace:0});
});
this.scrollviewProps={
automaticallyAdjustContentInsets:true,
scrollEventThrottle:200,
};
// pass on any props we don't own to ScrollView
Object.keys(this.props).filter((n)=>{return n!='children'})
.forEach((e)=>{if(!myprops[e])this.scrollviewProps[e]=this.props[e]});
return {
keyboardSpace:0,
};
},
render(){
return (
<ScrollView ref='scrollView' {...this.scrollviewProps}>
{this.props.children}
<View style={{height:this.state.keyboardSpace}}></View>
</ScrollView>
);
},
inputFocused(_this,refName){
setTimeout(()=>{
let scrollResponder=this.refs.scrollView.getScrollResponder();
scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
React.findNodeHandle(_this.refs[refName]),
this.props.offset, //additionalOffset
true
);
}, 50);
}
}) // KeyboardHandler
module.exports=KeyboardHandler;
发布于 2016-05-21 23:25:51
react-native-keyboard-aware scroll-view为我解决了这个问题。react-native-keyboard-aware-scroll-view on GitHub
https://stackoverflow.com/questions/29313244
复制相似问题