React-native键盘遮挡输入框问题的解决
2016年10月25日更新:
现在有一个更准确一点的做法是用一个View包裹住TextInput,然后通过该View的onLayout方法获取该输入框的y轴位置,再减去一个适当的高度去处理scrollview的滚动,如下所示:
<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>然后实现_downloadLayout方法: _downloadLayout(e){
this.setState({ downloadY:e.nativeEvent.layout.y, });}之后再实现TextInput的onFocus方法,对包裹的整个scrollview页面进行滚动:
_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);}
这样的处理适合大多数的情况。评论里有小伙伴说React.findNodeHandle已经不可以使用了,应该是使用了rn更新的版本,所以我们在使用的时也需要根据版本的不同去选择合适的方法,感谢他的提醒,新版本可以使用下面这个方法import ReactNative from 'react-native';...ReactNative.findNodeHandle(...)
RN中要解决键盘遮挡输入框的问题其实有挺多方式,在这里只是记录其中的一些个人实际开发中使用到的。
方式一、使用scrollTo方法,这也是最简单最粗暴的,只是需要计算scrollview滚动的距离,并且处理一些体验的bug问题。大致思路是:组件render方法中使用scrollview,并且设置scrollview的keyboardShouldPersistTaps={true}(此步一定不能少,如果缺少该属性,接下来的一步将会不起作用),然后在scrollview中用一个view作为container包裹所有剩余的子视图,比如Text,TouchableHighlight之类的,并且用onStartShouldSetResponderCapture截取该view的事件,用以解决当点击页面上的按钮时,第一次点击只会收起键盘,第二次点击才会响应按钮方法的bug。然后在TextInput的onFocus方法中滚动scrollview,在onEndEditing中恢复scrollview的滚动。以下是在具体实现中的代码。
render方法的实现:
render:function() {
return(
<View style={styles.container}>
<NavigationBar title={'绑定手机号'} 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 = '请输入预留手机号'
placeholderTextColor = '#481A5C'
keyboardType = 'numeric'
/>
<View style = {styles.lineView}></View>
<TouchableHighlight style = {styles.topButton} underlayColor='#9B9B9B' onPress = {this.jumpToNextPage.bind(this)}>
<Text style = {styles.buttonText}>发送验证码</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时调用的scrollViewTo方法的实现:
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包裹时,通过设置View的marginTop属性并且结合动画来实现:初始化一个state对象的值viewMarginTop用于设置Animated.View的marginTop,在textInput的onfocus时改变viewMarginTop的值,在onEndediting时恢复或者设置新的marginTop。具体为首先引入Animated,并且初始化state方法。(state内值的变化会触发界面上相关元素的再次熏染,具有reactivecocoa的相同的作用)
getInitialState: function () {
return {
viewMarginTop: new Animated.Value(0),
};
},
在需要上升的视图中使用Animated.View,设置其mairginTop为viewMarginTop
<Animated.View style={{marginTop:this.state.viewMarginTop}}>
//当然不建议将样式写在这里,这样会导致每次熏染都创建一次样式,你应该将样式定义到StyleSheet中
//your Views and component
</Animated.View>
然后在onFucos的方法中用动画改变viewMarginTop的值,如下
Animated.timing(
this.state.viewMarginTop,
{
toValue: 160,
duration: 250,
}
).start();
要恢复只需要在onEndediting中用同样的原理恢复viewMarginTop的值即可.
方式三、通过监听scrollview上键盘的出现和消失,在出现和消失方法中设置某个state值的变化,来设置scrollview的contentInset,该方法只是在github上看过,具体本人并没有用过即:
1.在页面熏染完时添加监听
componentDidMount: function () {
// Keyboard events监听
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,
})
},
//设置scrollview的contentInset
<ScrollView
ref='keyboardView'
keyboardDismissMode='interactive'
contentInset={{bottom: this.state.keyboardSpace}}
showsVerticalScrollIndicator={true}
</ScrollView>
转载于:https://www.cnblogs.com/pofabs/p/5109021.html
React-native键盘遮挡输入框问题的解决相关推荐
- 安卓webview中键盘遮挡输入框如何解决
关键词:安卓原生.unity.webview.键盘遮挡输入框.沉浸式状态栏. 首先是最简单的情况,当我们app有一个比较靠下的输入框时,唤出键盘会遮挡住输入框. 这种情况的对应方式很简单,只需要找到安 ...
- iOS 解决键盘遮挡输入框问题,输入框随键盘弹起上移,切换输入法时动态调整 (Swift)
最近在项目中需要解决苹果系统输入法遮挡输入框的问题,预期结果为: 若键盘弹出后会遮挡输入框,则输入框随键盘弹起上移,输入法切换时输入框始终保持在距键盘上方 4pt 处; 若键盘弹出后不会遮挡输入框,但 ...
- iOS键盘遮挡输入框,输入区域自动上移
在iOS开发过程当中,遇到关于键盘遮挡输入框的问题,经过网络参考与实践,总结如下: 登录窗口,上下放置两个UITextField,一个用户名,一个密码,放置的在屏幕下方1/3处,当点击用户名时,自动弹 ...
- 移动端手机软键盘遮挡输入框问题
页面: <section class="links"><h3 class="title">联系方式</h3><div ...
- [RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法
[RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 参考文章: (1)[RN] React Native 键盘管理 在Android TextI ...
- iOS 键盘遮挡输入框万能解决方案(多个输入框)
效果图如下: 思路分析: 代码: 知识点: 问题: 效果图如下: 思路分析: 当我们有很多输入框时,有时候键盘弹出来会遮挡着输入框.我们需要获取输入框和键盘相对于最外层视图的位置来判断是否遮挡,如果遮 ...
- android 软键盘遮住按钮,Android应用中出现软键盘遮挡住按钮如何解决
Android应用中出现软键盘遮挡住按钮如何解决 发布时间:2020-11-20 16:25:47 来源:亿速云 阅读:110 作者:Leah Android应用中出现软键盘遮挡住按钮如何解决?相信很 ...
- Activity在全屏属性情况下,WebView会出现输入法软键盘遮挡输入框(界面无法自动上调)问题
转自:http://www.rcdio.com/js/mg/xy/47922.html 正常情况下 ,设置了该属性之后,软键盘在弹出时,输入框便不会被遮挡. 但是该属性在有些情况下是不生效的,目前我所 ...
- flutter - 使用 SingleChildScrollView() 解决键盘遮挡输入框的问题
写好了,感觉可好 点击输入框,输入内容时发现如下,键盘遮挡了输入框 使用 SingleChildScrollView 解决遮挡问题, 就是让它滚动起来 直接使用 SingleChildScrollVi ...
最新文章
- 【Qt】QtCreator中关于Style Plugin Example没有效果的修改方法
- 2021全国大学生智能汽车竞赛中小学组国赛获奖名单
- 前端性能优化之--页面渲染优化全面解析
- php+curl+restapi,php – cURL适用于我的REST API,但不是Guzzle
- python散点图拟合曲线-python中的多元(多项式)最佳拟合曲线?
- JVM_03 运行时数据区[ 堆 ]
- java中的年轻态,14、Java垃圾回收机制(示例代码)
- 居家洁士扫地机器人_掌握核心技术扫地机器人品牌推荐,由利和石头扫地机器人哪个牌子好?...
- airpods删除别人的配对_怎么不让别人连我的airpods
- java websocket client,java基础面试笔试题
- phoneGap可行性分析
- 计算机网络应用基础_2020年天津市成人高考 高起专 计算机基础题型总结
- FastGitHub for Mac(GitHub下载扩展工具)
- 用Java实现向Cassandra数据库中插入和查询数据
- 16本版式设计书籍推荐(附PDF链接)设计从业人员必备
- kernel logo的制作
- 小学计算机课基础知识教案,小学信息技术公开课教案
- 阿里云python中文社区_python 写中文
- ubuntu--制作图标
- 关于迭代速度很快的解决方案
热门文章
- python boxplot pvalue_1.1.1数据质量分析Python boxplot,111,箱,线图
- 进程间通信——消息队列
- 21.3.3 原子性与易变性 21.3.4 原子类
- Reactor设计模式
- atom 代码都是白色 怎么显示颜色_IBC1.0完成,ATOM为什么没涨?
- 和我一起学 Selenium WebDriver
- Logger.getLogger和 LogFactory.getLog
- oracle 数组定义
- Linux wildcard
- 牛客练习赛42 A	字符串