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 ...
随机推荐
- 数据表记录包含表索引和数值，请对表索引相同的记录进行合并，即将相同索引的数值进行求和运算，输出按照key值升序进行输出。
题目描述 数据表记录包含表索引和数值,请对表索引相同的记录进行合并,即将相同索引的数值进行求和运算,输出按照key值升序进行输出. 输入描述: 先输入键值对的个数然后输入成对的index和value值 ...
- FPGA中的时序分析（二）
使用Timequest 笔者对Altera较熟悉,这里以quartus ii中的timequest作为讲解. Timequest分析时序的核心,也就是在于延迟因数的计算.那么建立约束文件,去告诉tim ...
- MAC配置Xcode的Cocos2d-x环境
Version:0.9 StartHTML:-1 EndHTML:-1 StartFragment:00000099 EndFragment:00003988 1.Mac配置环境变量,即编辑命令: o ...
- Unity------Unity 脚本基类 MonoBehaviour 与 GameObject 的关系
Unity 脚本基类 MonoBehaviour 与 GameObject 的关系 标签: unity脚本 2017-03-27 12:55 395人阅读 评论(0) 收藏 举报 分类: Unity ...
- 成都传智播客java就业班（14.04.01班）就业快报（Java程序猿薪资一目了然）
这是成都传智播客Java就业班的就业情况,很多其它详情请见成都传智播客官网:http://cd.itcast.cn?140812ls 姓名 入职公司 入职薪资(￥) 方同学 安**软件成都有限公司(J ...
- IE9出现异常SCRIPT5011:不能执行已释放Script的代码
今天同事测试系统,突然出现一个异常SCRIPT5011:不能执行已释放Script的代码 应用场景:用模态方式打开个窗口,对于返回对象使用"=="与字符串比较时出现错误 我也用我的 ...
- linux stat命令参数及用法详解
功能说明:显示inode内容.语 法:stat [文件或目录]补充说明:stat以文字的格式来显示inode的内容. ls 命令及其许多参数提供了一些非常有用的文件信息.另一个不太为人所熟知的命令 s ...
- Easyradius对接WayOs维盟小区版XQ教程
维盟极众多人的意见,然后又推出来一个新版本,唉~~~以前也是只有PC,有人给大量建议后,就再出个ISP,直接价格翻倍,再后来大家要桥接的功能又推出一个S9,这日子啥时候是个头啊. 小区版最主要的亮点就 ...
- linux 系统安装mysql (rpm)
其实按照本文安装成功,但是启动依然有问题:最好参考链接配置． http://blog.csdn.net/xiaoxiaoxuewen/article/details/7550107 我用的是ubunt ...
- 源码分析三(Vector与ArrayList的区别)
前面讨论过ArrayList与LinkedList的区别,ArrayList的底层数据结构是数组Object[],而LinkedList底层维护 的是一个链表Entry,所以对于查询,肯定是Array ...