react native输入框定位在底部(虚拟键盘弹起)
1.通过Keyboard获取键盘高度,改变定位的bottom
缺点:虚拟键盘完全弹起时,才会获取到键盘高度,定位稍有延迟,而且键盘收起时,定位会出现悬空状态,然后再回到底部
import React, { Component } from 'react'
import {
View,
Text,
Button,
Keyboard,
Platform,
TextInput,
StyleSheet,
ScrollView,
} from 'react-native' import rpx from '../util/rpx' export default class Home extends Component {
constructor(props) {
super(props)
this.state = {
keyBoardHeight: 0
}
}
componentWillMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow(e) {
this.setState({
keyBoardHeight: e.endCoordinates.height
});
}
_keyboardDidHide() {
this.setState({
keyBoardHeight: 0
});
}
loseFocus() {
this.refs.input.blur()
}
render() {
let { keyBoardHeight } = this.state
return (
<View style={css.container}>
<ScrollView style={{paddingBottom: rpx(100)}}>
<Text>键盘高度: {keyBoardHeight}</Text>
<View style={{backgroundColor: 'red', height: rpx(500)}}></View>
<Button title="收起键盘" style={css.txt} onPress={() => this.loseFocus()}></Button>
<View style={{backgroundColor: 'blue', height: rpx(500)}}></View>
<View style={{backgroundColor: 'green', height: rpx(500)}}></View>
</ScrollView>
<View style={[css.box, Platform.OS == 'ios' && { bottom: keyBoardHeight }]}>
<TextInput
ref="input"
style={css.input}
placeholderTextColor='#999999'
placeholder={'输入代码、名称或简拼'}
underlineColorAndroid="transparent" />
</View>
</View>
)
}
} const css = StyleSheet.create({
container: {
flex: 1
},
input: {
height: rpx(60),
width: '100%',
fontSize: rpx(26),
color: '#333333',
backgroundColor: '#eee',
borderRadius: rpx(60),
paddingHorizontal: rpx(20),
paddingVertical: 0
},
box: {
width: rpx(750),
height: rpx(100),
backgroundColor: '#fff',
paddingHorizontal: rpx(30),
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
txt: {
color: 'red'
}
})
2.通过KeyboardAvoidingView组件,将页面推送上去,完美解决
import React, { Component } from 'react'
import {
View,
Text,
Button,
Platform,
TextInput,
StyleSheet,
ScrollView,
KeyboardAvoidingView
} from 'react-native' import rpx from '../util/rpx' export default class Home extends Component {
constructor(props) {
super(props)
this.state = {
}
}
loseFocus() {
this.refs.input.blur()
}
render() {
let behavior = Platform.OS == 'ios' ? 'position' : null
return (
<KeyboardAvoidingView style={css.container} behavior={behavior}>
<ScrollView style={{paddingBottom: rpx(100)}}>
<View style={{backgroundColor: 'red', height: rpx(500)}}></View>
<Button title="收起键盘" style={css.txt} onPress={() => this.loseFocus()}></Button>
<View style={{backgroundColor: 'blue', height: rpx(500)}}></View>
<View style={{backgroundColor: 'green', height: rpx(500)}}></View></ScrollView>
<View style={[css.box]}>
<TextInput
ref="input"
style={css.input}
placeholderTextColor='#999999'
placeholder={'输入代码、名称或简拼'}
underlineColorAndroid="transparent" />
</View>
</KeyboardAvoidingView>
)
}
} const css = StyleSheet.create({
container: {
flex: 1
},
input: {
height: rpx(60),
width: '100%',
fontSize: rpx(26),
color: '#333333',
backgroundColor: '#eee',
borderRadius: rpx(60),
paddingHorizontal: rpx(20),
paddingVertical: 0
},
box: {
width: rpx(750),
height: rpx(100),
backgroundColor: '#fff',
paddingHorizontal: rpx(30),
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
txt: {
color: 'red'
}
})
react native输入框定位在底部(虚拟键盘弹起)的更多相关文章
- React Native(四)——顶部以及底部导航栏实现方式
效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...
- Swift - 点击输入框外部屏幕关闭虚拟键盘
我们如果把文本框的Return Key设置成Done,然后在storyboard中将文本框的Did End On Exit事件在代码里进行关联.同时关联代码里调用文本框的resignFirstResp ...
- React Native 的组件之底部导航栏 TabBarIOS(一)
import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, TabBarIOS, } fro ...
- apicloud iphoneX底部虚拟键盘遮挡
1.首先,底部的高不能写死. 2. var footer = $api.byId('footer'); $api.fixTabBar(footer);这句应该写在 footerHeight = $ap ...
- 移动端fixed定位在底部,出现键盘后消失
jq var h=$(window).height(); $(window).resize(function() { if($(window).height()<h){ $('.nav').hi ...
- Android适配底部返回键等虚拟键盘的完美解决方案
这个问题来来回回困扰了我很久,一直没能妥善解决. 场景1:华为手机遮挡了屏幕底部. 场景2:进入应用时,虚拟键自动缩回,留下空白区域. 需求: 需要安卓能自适应底部虚拟按键,用户隐藏虚拟按键时应用要占 ...
- Android 适配底部返回键等虚拟键盘的完美解决方案
这个问题来来回回困扰了我很久,一直没能妥善解决. 场景1:华为手机遮挡了屏幕底部. 场景2:进入应用时,虚拟键自动缩回,留下空白区域. 需求: 需要安卓能自适应底部虚拟按键,用户隐藏虚拟按键时应用要占 ...
- 虚拟键盘,移动web开发的痛
原生APP的弹出虚拟键盘和收回虚拟键盘,输入框始终贴在虚拟键盘的上方.如下图: 如果移动端web也想做类似的功能,可以实现吗? 你可能会说着:“不就是放一个position: fixed;的输入框在 ...
- React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...
随机推荐
- Android SDK 开发——发布使用踩坑之路
前言 在 Android 开发过程中,有些功能是通用的,或者是多个业务方都需要使用的. 为了统一功能逻辑及避免重复开发,因此将该功能开发成一个 SDK 是相当有必要的. 背景 刚好最近自己遇到了类似需 ...
- Android 8.0 的部分坑及对应解决方法
虽然 Android 9.0 都已经面世了,本篇文章写的有点迟了. 但是迟到好过不到,因此基于此这边还是记录一下项目中遇到的 Android 8.0 的坑及对应解决方法. 每次系统升级,虽然系统功能更 ...
- AI产品的商业模式
AI产品的商业模式 ------------------------------------------------------------------------------------------ ...
- Java web的一些面试题
1.Tomcat 的优化经验 答:去掉对 web.xml 的监视,把 jsp 提前编辑成 Servlet. 有富余物理内存的情况,加大 tomcat 使用的 jvm 的内存 2.HTTP 请求的 GE ...
- mapfile中关于栅格数据的processing项说明
mapfile是MapServer中地图的配置文件,规定了地图的源数据.投影.样式等一系列信息.用MapServer发布影像地图,需要用以下processing项设置地图的风格样式. BANDS=re ...
- <自动化测试方案_9>第九章、持续集成平台搭建
第九章.持续集成平台搭建 (一)什么是持续集成 参考文章地址:https://blog.csdn.net/qq_32261399/article/details/76651376 敏捷软件开发(英语: ...
- Python第十五天 datetime模块 time模块 thread模块 threading模块 Queue队列模块 multiprocessing模块 paramiko模块 fabric模块
Python第十五天 datetime模块 time模块 thread模块 threading模块 Queue队列模块 multiprocessing模块 paramiko模块 fab ...
- Powershell-创建Module
1.找到默认module路径,ISE启动时自动加载默认领下的Module代码. $env:PSModulePath 2.在其中一个默认路径下创建个文件夹,在文件夹下创建一个.psm1后缀文件,注意文件 ...
- 基于GPS数据建立隐式马尔可夫模型预测目的地
<Trip destination prediction based on multi-day GPS data>是一篇在2019年,由吉林交通大学团队发表在elsevier期刊上的一篇论 ...
- RabbitMQ框架构建系列(一)——AMPQ协议
一.MQ 在介绍RabbitMq之前,先来说一下MQ.什么是MQ?MQ全称为Message Queue即消息队列,就是一个消息的容器, MQ是消费-生产者模型的一个典型的代表,一端往消息队列中不断写入 ...