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 ...
随机推荐
- Java如何比较两个数组是否相等？
在Java中,如何检查两个数组是否相等? 示例 以下示例显示如何使用数组的equals()方法来检查两个数组是否相等. package com.yiibai; import java.util.*; ...
- Spring JDBC更新数据
以下示例将展示如何使用Spring jdbc执行更新数据库表的记录,这里演示如何更新student表中指定条件的记录. 语法: String updateQuery = "update St ...
- Linux语言设置修改乱码
1.system-config-language 命令语言改成英文.(安装yum install system-config-language) 如何系统安装后,使用的语言不是自己想要的.但是在图形 ...
- 如何解析oracle执行计划
要执行任何SQL语句,Oracle 必须推导出一个“执行计划”.查询的执行计划是 Oracle 将如何实现数据的检索,以满足给定 SQL 语句的描述.它只不过是其中包含的步骤及它们之间关系的顺序树.执 ...
- react-router实现tab页面切换，并解决选中样式首页始终选中问题
import React, {Component} from 'react'; import { BrowserRouter as Router, Route, NavLink } from &quo ...
- Java虚拟机（JVM）你只要看这一篇就够了！
1. Java 内存区域与内存溢出异常 1.1 运行时数据区域 根据<Java 虚拟机规范(Java SE 7 版)>规定,Java 虚拟机所管理的内存如下图所示. 1.1.1 程序计数器 ...
- gcc 高版本兼容低版本 技巧 ：指定 -specs={自定义specs文件} 参数。可以搞定oracle安装问题
如: #!/bin/sh /usr/bin/gcc-7 -specs=/usr/lib/gcc/x86_64-linux-gnu/jin.spec $* 该技巧很实用.这么久才发现,唉,不是专业搞某个 ...
- Global.asax的Application_BeginRequest实现url重写无后缀的代码
本文为大家详细介绍下利用Global.asax的Application_BeginRequest 实现url重写其无后缀,具体核心代码如下,有需求的朋友可以参考下,希望对大家有所帮助 利用Global ...
- Android: 背景图片平铺要这么干
<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="htt ...
- Spring3+mybatis3在多数据源情况下找不到数据库驱动的问题
解决问题的过程如下: 1.遇到问题和一般的解决方法和下面这个帖子的一样: http://www.oschina.net/question/188964_32305 2.我在按照1的做法配置了以后,依然 ...