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+java+chrome环境搭建
我只能说因为版本冲突,简直太折腾了,而搜了无数个博友的帖子才找到正确条案,就不能好好的写篇文章吗? 最近真的是太闲太闲了,平时没事总得搞点技术,不然心里感觉好空虚, 最近看上了selenium,所以试 ...
- Android WiFi 扫描流程分析(wpa_supplicant选择网络)
扫描流程 1.如果之前就已经有相关记录,优化扫描,扫描记录部分的频率信道. 2.如果1中的扫描没有结果,清除黑名单中的进行选择. 3.如果2中没有结果,进行所有频率的信道进行扫描 相关log参考: h ...
- Java如何显示所有正在运行的线程？
在Java编程中,如何显示所有正在运行的线程? 以下示例演示如何使用getName()方法显示所有正在运行的线程的名称. package com.yiibai; public class Displa ...
- （诊断）解决GitHub使用双因子身份认证“Two-Factor Athentication”后无法git push 代码的“fatal: Authentication failed for ...”错误
在GitHub上采取双因子身份认证后,在git push 的时候将会要求填写用户的用户名和密码,用户名就是用户在GitHub上申请的用户名,但是密码不是普通登录GitHub的密码. 一旦采取双因子身份 ...
- WAS6.1连接SQL Server2008数据库连接池配置
原文链接:http://www.cnblogs.com/lyr2012/archive/2012/06/13/2547804.html 说明:该步骤只适用与websphere 6.1.0.15之前的版 ...
- html常用对照表
常用对照表:http://tool.oschina.net/commons
- 多个IoC容器适配器设计及性能测试(Castle.Windsor Autofac Spring.Core)
[转]多个IoC容器适配器设计及性能测试和容器选择 1. 采用的IoC容器和版本 Autofac.2.6.3.862 Castle.Windsor.3.1.0 Spring.Core.2.0.0 2. ...
- Druid搭配log4j2输出SQL语句和结果
一.引言 其实Druid的内置了log4jdbc来显示SQL语句,虽然显示效果不如原生的log4jdbc效果好,但是因为内置所以不需要其他更多的配置. 二.使用 1. 创建基于druid的logger ...
- 阿里云Redis开发规范[转]
一.键值设计 1. key名设计 (1)[建议]: 可读性和可管理性 以业务名(或数据库名)为前缀(防止key冲突),用冒号分隔,比如业务名:表名:id ugc:video:1 (2)[建议]:简洁性 ...
- Yii2 中cookie的用法（2）
设置Cookie PHP setcookie("name", "Larry", time()+3600); Yii2 $cookies = Yii::$app- ...