react native 之 获取键盘高度

多说不如多撸:

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

效果:

额.后来发现个KeyboardAvoidingView,原来react native已经意识到了.所以上面的代码可以作废.使用新的KeyboardAvoidingView,其中

KeyboardAvoidingView的主要属性behavior  包含三个'height', 'position', 'padding'

大致代码如下:

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

效果: