渐入佳境

用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的更多相关文章

  1. React Native & Android & iOS & APK

    React Native & Android & iOS & APK https://play.google.com/apps/publish/signup/ $ 25 bui ...

  2. React Native & Android & iOS

    React Native & Android & iOS React Native & Android & iOS https://facebook.github.io ...

  3. react native 获取 软键盘高度 和 新增软键盘的组件

    import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Keyboard, Te ...

  4. react native 之 获取键盘高度

    多说不如多撸: /** * Created by shaotingzhou on 2017/2/23. *//** * Sample React Native App * https://github ...

  5. 如何让你的 React Native 应用在键盘弹出时优雅地响应

    原文地址:How to make your React Native app respond gracefully when the keyboard pops up 原文作者:Spencer Car ...

  6. [React Native]高度自增长的TextInput组件

    之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这 ...

  7. 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 ...

  8. [React Native] Basic iOS Routing -- NavigatorIOS

    Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends ...

  9. iOS 键盘挡住UITextField

    iOS经常使用的两个功能:点击屏幕和return隐藏虚拟键盘和解决虚拟键盘挡住UITextField的方法 iOS上面对键盘的处理非常不人性化,所以这些功能都须要自己来实现,  首先是点击return ...

随机推荐

  1. reduce内置高阶函数求和

    >>> def f(x, y): ... return x+y ... >>> reduce(f, a, ) >>> reduce(lambda ...

  2. Flume exec 测试

    环境:ubuntu 1604 软件:①apache-flume-1.7.0-bin.tar.gz,解压后放到 /usr/local/  下面.②sudo apt-get install apache2 ...

  3. Unity导入3D模型的过程与方法

    一.介绍 资源是游戏开发中的原材料,也就是组成游戏的模块. Unity只是一个游戏开发引擎,而并不是一个资源开发软件.这就意味着在游戏中需要的资源通常是由一些设计者使用其他软件开发出来的,然后设计者会 ...

  4. Mybatis系列(二)：优化MyBatis配置文件中的配置和解决字段名与实体类属性名不相同的冲突

    原文链接:http://www.cnblogs.com/xdp-gacl/p/4264301.html     http://www.cnblogs.com/xdp-gacl/p/4264425.ht ...

  5. Eclipse创建一个Maven Web项目

    在这篇文章中,我们将演示如何在Eclipse IDE中使用maven创建一个动态Web项目. 使用的工具和技术 - Eclipse Jee Oxygen Maven 3.3.3 JavaSE 1.8 ...

  6. logbook日志系统

    python中替代logging的日志系统. 不过比之前的logging难理解. 先上打印到屏幕上的代码和存到日志文件中的代码: #!/usr/bin/env python3 # -*- coding ...

  7. MySQL ERROR 1045 (28000): Access denied for user 'root'@'localhost'解决

    MySQL ERROR 1045 (28000): Access denied for user 'root'@'localhost'解决: # /etc/init.d/mysql stop # my ...

  8. Linux free命令使用及解析

    1. 命令格式 free [参数] 2. 命令功能 free 命令显示系统使用和空闲的内存情况,包括物理内存.交互区内存(swap)和内核缓冲区内存.共享内存将被忽略 3. 命令参数 -b 以Byte ...

  9. mysql日期和字符相互转换

    From: http://www.2cto.com/database/201303/195083.html mysql日期和字符相互转换   date_format(date,'%Y-%m-%d') ...

  10. memcached Java Client

    下载: Step1: Step2 Step3: Step4: