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开发系列】—— 自定义注解
之前在开发中,就总纳闷,为什么继承接口时,会出现@Override注解,有时候还会提示写注解@SuppressWarnings? 原来这是java特有的特性,注解! 那么什么是注解呢? 注解就是某种注 ...
ubuntu 挂载硬盘
https://cndaqiang.github.io/2017/10/11/ubuntu-disk/ 查看硬盘查看方法一查看/dev下面的设备文件 ll -h /dev/sd* 通过sudo f ...
Java如何暂停线程一段时间？
在Java编程中,如何暂停线程一段时间? 以下示例显示如何通过创建sleepThread()方法来暂停线程一段时间. package com.yiibai; public class Suspendi ...
Java如何显示一年的周数？
在Java中,如何查找一年中或一个月中的第几个星期? 以下示例显示年份和月份的第几周. package com.yiibai; import java.util.*; public class Dis ...
http.sys的简单应用
//public void Run() //{ // //httpListener提供一个简单,可通过编程方式控制的Http协议侦听器.此类不能被继承. // if (!HttpListener.Is ...
又看了半天的pdf格式的js方面的书，感觉受益匪浅啊，只会一点操作的我，要学好理论
又看了半天的pdf格式的js方面的书,感觉受益匪浅啊,只会一点操作的我,要学好理论
vue form表单绑定事件与方法
使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click ...
ubuntu16.04卸载tensorflow0.11版本，安装tensorflow1.1.0版本
卸载旧版本: pip uninstall tensorflow 安装新版本: sudo pip install --upgrade https://storage.googleapis.com/ten ...
OpenGL ES学习资料总结
从今年春节后开始学习OpenGL ES,发现网上资料很有限,而且良莠不齐,所以整理了一下我学习时用到的资料和一些心得. 1. OpenGL ES1.x参考资料把NEHE的教程移植到了Android上 ...
react-router实现tab页面切换，并解决选中样式首页始终选中问题
import React, {Component} from 'react'; import { BrowserRouter as Router, Route, NavLink } from &quo ...

React Native(十三)——ios键盘挡住textInput

渐入佳境

React Native(十三)——ios键盘挡住textInput的更多相关文章

随机推荐

热门专题