React Native(十三)——ios键盘挡住textInput
渐入佳境
用React Native重构的项目也快接近尾声，剩下的就是适配ios的功能了。慢慢地也从中琢磨出了一点门道，于是就遇见了键盘遮挡textInput问题斑斑；
正常页面：
android点击下面的“外部链接”，效果：
而同样代码在ios中（键盘遮挡住了需要输入链接地址的地方……）：
区别在这
页面简单介绍(部分代码)：
...
return (
<ScrollView style={{ backgroundColor: skin.tint }}>
<View style={publishStyle.container}>
<View style={publishStyle.contentOuter}>
<TextInput
style={publishStyle.contentText}
clearButtonMode="while-editing"
returnKeyType="done"
ref="input"
onBlur={Keyboard.dismiss}
underlineColorAndroid="transparent"
multiline={true}
onChangeText={this._contentChange}
maxLength={140}
enablesReturnKeyAutomatically={true}
blurOnSubmit={true}
defaultValue={this.state.content}
onSubmitEditing={this._onSubmitEditing}
/>
</View> <View
style={{
marginTop: 10,
height: 240
}}
>
{this.createImageItem()}
</View>
<View style={{ height: 10, backgroundColor: '#F2F2F2' }} />
<View style={publishStyle.urlOuter}>
<Text
style={{
color: skin.subtitle,
flex: 1
}}
>
链接
</Text>
<TextInput
style={publishStyle.urlText}
clearButtonMode="while-editing"
returnKeyType="done"
underlineColorAndroid="transparent"
placeholderTextColor={skin.subtitle}
multiline={true}
placeholder="外部链接"
onChangeText={this._urlChange}
onBlur={Keyboard.dismiss}
defaultValue={this.state.url}
enablesReturnKeyAutomatically={true}
blurOnSubmit={true}
onSubmitEditing={this._onSubmitEditing}
/>
</View>
<TouchableHighlight
onPress={this.clickPublish}
activeOpacity={1}
underlayColor={skin.tint}
style={publishStyle.buttonOuter}
disabled={this.state.canClick}
>
<View style={publishStyle.buttonText}>
<Text style={{ color: skin.tint, fontSize: 12 }}>发布</Text>
</View>
</TouchableHighlight>
</View>
</ScrollView>
);
原以为ScrollView在android以及ios中均可以显示右边的滚动条，亲身实践后意外的才发现只有android正常，ios并没有滚动条显示，最终解决的办法就是在ios的时候在ScrollView外套一层KeyboardAvoidingView，（android ios 分别做处理）
即：
…
render() {
if (Platform.OS === 'ios') {
return (
<KeyboardAvoidingView behavior="padding" style={{ backgroundColor: skin.tint, flex: 1 }}>
<ScrollView
style={{ backgroundColor: skin.tint }}
ref={scrollView => {
_scrollView = scrollView;
}}
>
<View style={publishStyle.container}>
<View style={publishStyle.contentOuter}>
<TextInput
style={publishStyle.contentText}
clearButtonMode="while-editing"
returnKeyType="done"
ref="input"
onBlur={Keyboard.dismiss}
underlineColorAndroid="transparent"
multiline={true}
onChangeText={this._contentChange}
maxLength={140}
enablesReturnKeyAutomatically={true}
blurOnSubmit={true}
defaultValue={this.state.content}
onSubmitEditing={this._onSubmitEditing}
/>
</View>
<View
style={{
marginTop: 10,
height: 250,
marginBottom: 10
}}
>
{this.createImageItem()}
</View>
<View style={{ height: 10, backgroundColor: '#F2F2F2' }} />
<View style={publishStyle.urlOuter}>
<Text
style={{
color: skin.subtitle,
flex: 1
}}
>
链接
</Text>
<TextInput
style={publishStyle.urlText}
clearButtonMode="while-editing"
returnKeyType="done"
underlineColorAndroid="transparent"
placeholderTextColor={skin.subtitle}
multiline={true}
placeholder="外部链接"
onChangeText={this._urlChange}
onBlur={Keyboard.dismiss}
defaultValue={this.state.url}
enablesReturnKeyAutomatically={true}
blurOnSubmit={true}
onSubmitEditing={this._onSubmitEditing}
onFocus={this._urlOnFocus}
/>
</View>
<TouchableHighlight
onPress={this.clickPublish}
activeOpacity={1}
underlayColor={skin.tint}
style={publishStyle.buttonOuter}
disabled={this.state.canClick}
>
<View style={publishStyle.buttonText}>
<Text style={{ color: skin.tint, fontSize: 16 }}>发布</Text>
</View>
</TouchableHighlight>
{this.state.urlHasFocus ? <View style={{ height: 60 }} /> : null}
</View>
</ScrollView>
</KeyboardAvoidingView>
);
} else {
return (
<ScrollView style={{ backgroundColor: skin.tint }}>
<View style={publishStyle.container}>
<View style={publishStyle.contentOuter}>
<TextInput
style={publishStyle.contentText}
clearButtonMode="while-editing"
returnKeyType="done"
ref="input"
onBlur={Keyboard.dismiss}
underlineColorAndroid="transparent"
multiline={true}
onChangeText={this._contentChange}
maxLength={140}
enablesReturnKeyAutomatically={true}
blurOnSubmit={true}
defaultValue={this.state.content}
onSubmitEditing={this._onSubmitEditing}
/>
</View>
<View
style={{
marginTop: 10,
height: 250,
marginBottom: 10
}}
>
{this.createImageItem()}
</View>
<View style={{ height: 10, backgroundColor: '#F2F2F2' }} />
<View style={publishStyle.urlOuter}>
<Text
style={{
color: skin.subtitle,
flex: 1
}}
>
链接
</Text>
<TextInput
style={publishStyle.urlText}
clearButtonMode="while-editing"
returnKeyType="done"
underlineColorAndroid="transparent"
placeholderTextColor={skin.subtitle}
multiline={true}
placeholder="外部链接"
onChangeText={this._urlChange}
onBlur={Keyboard.dismiss}
defaultValue={this.state.url}
enablesReturnKeyAutomatically={true}
blurOnSubmit={true}
onSubmitEditing={this._onSubmitEditing}
/>
</View>
<TouchableHighlight
onPress={this.clickPublish}
activeOpacity={1}
underlayColor={skin.tint}
style={publishStyle.buttonOuter}
disabled={this.state.canClick}
>
<View style={publishStyle.buttonText}>
<Text style={{ color: skin.tint, fontSize: 16 }}>发布</Text>
</View>
</TouchableHighlight>
</View>
</ScrollView>
);
}
}
这样就解决了android 以及ios中键盘被挡住事件的问题。
React Native(十三)——ios键盘挡住textInput的更多相关文章
- React Native & Android & iOS & APK
React Native & Android & iOS & APK https://play.google.com/apps/publish/signup/ $ 25 bui ...
- React Native & Android & iOS
React Native & Android & iOS React Native & Android & iOS https://facebook.github.io ...
- react native 获取 软键盘高度 和 新增软键盘的组件
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Keyboard, Te ...
- react native 之 获取键盘高度
多说不如多撸: /** * Created by shaotingzhou on 2017/2/23. *//** * Sample React Native App * https://github ...
- 如何让你的 React Native 应用在键盘弹出时优雅地响应
原文地址:How to make your React Native app respond gracefully when the keyboard pops up 原文作者:Spencer Car ...
- [React Native]高度自增长的TextInput组件
之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这 ...
- React Native视频播放(iOS)
网站链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/learn-react-native-video/ React Nativ ...
- [React Native] Basic iOS Routing -- NavigatorIOS
Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends ...
- iOS 键盘挡住UITextField
iOS经常使用的两个功能:点击屏幕和return隐藏虚拟键盘和解决虚拟键盘挡住UITextField的方法 iOS上面对键盘的处理非常不人性化,所以这些功能都须要自己来实现, 首先是点击return ...
随机推荐
- Selenium常用操作汇总二——如何把一个元素拖放到另一个元素里面(转)
Q群里有时候会有人问,selenium webdriver怎么实现把一个元素拖放到另一个元素里面.这一节总一下元素的拖放. 下面这个页面是一个演示拖放元素的页面,你可以把左右页面中的条目拖放到右边的 ...
- Obj模型功能完善(物体材质,光照,法线贴图).Cg着色语言+OpenTK+F#实现.
这篇文章给大家讲Obj模型里一些基本功能的完善,包含Cg着色语言,矩阵转换,光照,多重纹理,法线贴图的运用. 在上篇中,我们用GLSL实现了基本的phong光照,这里用Cg着色语言来实现另一钟Blin ...
- android WiFi ASSOC_REJECT 流程跟踪
Android设备在于AP关联时,如果AP返回关联拒绝帧,Android设别会把AP加入黑名单中. 黑名单中的设备将会在扫描时,延时一段时间放在后面处理. 代码以及log基于SDM450, Andro ...
- linux下硬盘的分区：
提到硬盘的分区,以前就是很乱,有什么主分区/扩展分区/逻辑分区等;它们有什么区别呢?现在简单的了解一下: 由于在MBR的主引导记录中的分区表里面最多只能记录4个分区记录,这个不够用啊,为了解决这个问题 ...
- JDBC PrepareStatement对象执行批量处理实例
以下是使用PrepareStatement对象进行批处理的典型步骤顺序 - 使用占位符创建SQL语句. 使用prepareStatement()方法创建PrepareStatement对象. 使用se ...
- (转)ffmpeg资源一览
一. FFmpeg主站1. FFmpeg的源码发布,资料网址: http://www.ffmpeg.org/ 源代码镜像站点网址:https://github.com/FFmpeg/FFmpeg 2 ...
- MVC2 ,MVC3 ,MVC4,MVC5的区别,EF的各个版本的区别;LocalDB是个啥
2010年發行ASP.NET MVC 2.0版,2011年發行ASP.NET MVC 3.0版,2012年發行ASP.NET MVC 4.0版 MVC3 需要.net framework 4.0 版本 ...
- Console程序后台运行
[DllImport("User32.dll", EntryPoint = "FindWindow")] private static extern IntPt ...
- Excel破解密码代码
Option ExplicitPublic Sub AllInternalPasswords()' Breaks worksheet and workbook structure passwords. ...
- 最简单的视音频播放演示样例3：Direct3D播放YUV，RGB（通过Surface）
===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...