React Nativeキーボードマスク入力ボックスの問題の処理

モバイル端末では、入力ボックスがソフトキーボードで隠されるのはよくある問題です.そのため、RNは、この問題を処理するためのコンポーネントKeyboardAvoidingViewを提供しています.KeyboardAvoidingViewの主な属性behaviorには、3つの「height」、「position」、「padding」が含まれています.最も多く使われているのはpaddingです.具体的には公式サイトで確認できます.しかし、実際のプロジェクトでは、ログインページでこのコンポーネントを使用するのは問題ないことがわかりましたが、他の入力ページでこのコンポーネントを使用すると、失効し、具体的な原因は現在も調査されています.しかし、時間が間に合わないので、別の方法を探すしかありません.
1つの直接的な方法は、入力ボックスがフォーカスするたびに、ソフトウェアディスクの高さを取得し、入力ボックスを上に移動させることです.もちろん、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,{'
'}
                            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,{'
'}
                            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,{'
'}
                            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,{'
'}
                            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 (
            
                
                    Welcome to React Native!
                
                
                    To get started, edit index.android.js
                
                
                    Double tap R on your keyboard to reload,{'
'}
                    Shake or press menu button for dev menu
                
                
                    To get started, edit index.android.js
                
                
                    Double tap R on your keyboard to reload,{'
'}
                    Shake or press menu button for dev menu
                
                
                    To get started, edit index.android.js
                
                
                    Double tap R on your keyboard to reload,{'
'}
                    Shake or press menu button for dev menu
                
                
                    To get started, edit index.android.js
                
                
                    Double tap R on your keyboard to reload,{'
'}
                    Shake or press menu button for dev menu
                
                100,borderWidth:2,marginBottom:this.state.keyboardHeight}}
                />
            
        );
    }

    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,
    },
});