React Native 处理键盘遮挡输入框问题

在移动端上，输入框被软键盘遮挡是一个非常常见的问题，为此，RN原生的提供了一个组件 KeyboardAvoidingView 来处理这个问题，KeyboardAvoidingView的主要属性behavior 包含三个’height’, ‘position’, ‘padding’, 使用最多的就是 padding,具体的可以到官网上查看，但在实际项目中发现，登录页面使用这个组件没有问题，但在其他的输入页中使用该组件，却发现失效，具体什么原因目前也一直在排查。但是时间来不及，所以只能另寻他法。

一种直接的方法就是每次输入框聚焦时，获取软件盘的高度，然后让输入框上移，当然，在RN中获取软键盘的相关信息是没有问题的。

具体上代码

一、KeyboardAvoidingView
javascript 代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    TextInput,
    KeyboardAvoidingView
} from 'react-native';

export default class Root extends Component {
    render() {
        return (
            <KeyboardAvoidingView behavior='position' >
                <ScrollView>
                    <View style={styles.container}>
                        <Text style={styles.welcome}>
                            Welcome to React Native!
                        </Text>
                        <Text style={styles.instructions}>
                            To get started, edit index.ios.js
                        </Text>
                        <Text style={styles.instructions}>
                            Press Cmd+R to reload,{'\n'}
                            Cmd+D or shake for dev menu
                        </Text>
                        <Text style={styles.welcome}>
                            Welcome to React Native!
                        </Text>
                        <Text style={styles.instructions}>
                            To get started, edit index.ios.js
                        </Text>
                        <Text style={styles.instructions}>
                            Press Cmd+R to reload,{'\n'}
                            Cmd+D or shake for dev menu
                        </Text>
                        <Text style={styles.welcome}>
                            Welcome to React Native!
                        </Text>
                        <Text style={styles.instructions}>
                            To get started, edit index.ios.js
                        </Text>
                        <Text style={styles.instructions}>
                            Press Cmd+R to reload,{'\n'}
                            Cmd+D or shake for dev menu
                        </Text>
                        <Text style={styles.welcome}>
                            Welcome to React Native!
                        </Text>
                        <Text style={styles.instructions}>
                            To get started, edit index.ios.js
                        </Text>
                        <Text style={styles.instructions}>
                            Press Cmd+R to reload,{'\n'}
                            Cmd+D or shake for dev menu
                        </Text>
                        <Text style={styles.welcome}>
                            Welcome to React Native!
                        </Text>
                        <Text style={styles.instructions}>
                            To get started, edit index.ios.js
                        </Text>
                        <Text style={styles.instructions}>
                            KeyboardAvoidingView的主要属性behavior  PropTypes.oneOf(['height', 'position', 'padding'])
                        </Text>
                        <TextInput
                            placeholder="输入框"
                            style={{width:300,height:100,borderWidth:1}}
                        />
                    </View>
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

二、获取软键盘的高度
javascript 代码

/**
 * Created by shaotingzhou on 2017/2/23.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Keyboard,
    TextInput,
    Dimensions
} from 'react-native';
var ScreenWidth = Dimensions.get('window').width;

export default class Root extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            keyboardHeight:0
        };
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Double tap R on your keyboard to reload,{'\n'}
                    Shake or press menu button for dev menu
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Double tap R on your keyboard to reload,{'\n'}
                    Shake or press menu button for dev menu
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Double tap R on your keyboard to reload,{'\n'}
                    Shake or press menu button for dev menu
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Double tap R on your keyboard to reload,{'\n'}
                    Shake or press menu button for dev menu
                </Text>
                <TextInput
                    style={{width:ScreenWidth,height:100,borderWidth:2,marginBottom:this.state.keyboardHeight}}
                />
            </View>
        );
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    componentWillMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
    }

    _keyboardDidShow(e){
        this.setState({
            keyboardHeight:e.startCoordinates.height
        })

    }

    _keyboardDidHide(e){
        this.setState({
            keyboardHeight:0
        })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});