多说不如多撸:



/**
 * 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'


大致代码如下:




  1 /**
  2  * Sample React Native App
  3  * https://github.com/facebook/react-native
  4  * @flow
  5  */
  6 
  7 import React, { Component } from 'react';
  8 import {
  9     AppRegistry,
 10     StyleSheet,
 11     Text,
 12     View,
 13     ScrollView,
 14     TextInput,
 15     KeyboardAvoidingView
 16 } from 'react-native';
 17 
 18 export default class Root extends Component {
 19     render() {
 20         return (
 21             <KeyboardAvoidingView behavior='position' >
 22                 <ScrollView>
 23                     <View style={styles.container}>
 24                         <Text style={styles.welcome}>
 25                             Welcome to React Native!
 26                         </Text>
 27                         <Text style={styles.instructions}>
 28                             To get started, edit index.ios.js
 29                         </Text>
 30                         <Text style={styles.instructions}>
 31                             Press Cmd+R to reload,{'\n'}
 32                             Cmd+D or shake for dev menu
 33                         </Text>
 34                         <Text style={styles.welcome}>
 35                             Welcome to React Native!
 36                         </Text>
 37                         <Text style={styles.instructions}>
 38                             To get started, edit index.ios.js
 39                         </Text>
 40                         <Text style={styles.instructions}>
 41                             Press Cmd+R to reload,{'\n'}
 42                             Cmd+D or shake for dev menu
 43                         </Text>
 44                         <Text style={styles.welcome}>
 45                             Welcome to React Native!
 46                         </Text>
 47                         <Text style={styles.instructions}>
 48                             To get started, edit index.ios.js
 49                         </Text>
 50                         <Text style={styles.instructions}>
 51                             Press Cmd+R to reload,{'\n'}
 52                             Cmd+D or shake for dev menu
 53                         </Text>
 54                         <Text style={styles.welcome}>
 55                             Welcome to React Native!
 56                         </Text>
 57                         <Text style={styles.instructions}>
 58                             To get started, edit index.ios.js
 59                         </Text>
 60                         <Text style={styles.instructions}>
 61                             Press Cmd+R to reload,{'\n'}
 62                             Cmd+D or shake for dev menu
 63                         </Text>
 64                         <Text style={styles.welcome}>
 65                             Welcome to React Native!
 66                         </Text>
 67                         <Text style={styles.instructions}>
 68                             To get started, edit index.ios.js
 69                         </Text>
 70                         <Text style={styles.instructions}>
 71                             KeyboardAvoidingView的主要属性behavior  PropTypes.oneOf(['height', 'position', 'padding'])
 72                         </Text>
 73                         <TextInput
 74                             placeholder="输入框"
 75                             style={{width:300,height:100,borderWidth:1}}
 76                         />
 77                     </View>
 78                 </ScrollView>
 79             </KeyboardAvoidingView>
 80         );
 81     }
 82 }
 83 
 84 const styles = StyleSheet.create({
 85     container: {
 86         flex: 1,
 87         justifyContent: 'center',
 88         alignItems: 'center',
 89         backgroundColor: '#F5FCFF',
 90     },
 91     welcome: {
 92         fontSize: 20,
 93         textAlign: 'center',
 94         margin: 10,
 95     },
 96     instructions: {
 97         textAlign: 'center',
 98         color: '#333333',
 99         marginBottom: 5,
100     },
101 });




 效果: