react native输入框定位在底部(虚拟键盘弹起)

　　1.通过Keyboard获取键盘高度，改变定位的bottom

　　缺点：虚拟键盘完全弹起时，才会获取到键盘高度，定位稍有延迟，而且键盘收起时，定位会出现悬空状态，然后再回到底部

import React, { Component } from 'react'
import {
  View,
  Text,
  Button,
  Keyboard,
  Platform,
  TextInput,
  StyleSheet,
  ScrollView,
} from 'react-native'

import rpx from '../util/rpx'

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      keyBoardHeight: 0
    }
  }
  componentWillMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  }
  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }
  _keyboardDidShow(e) {
    this.setState({
      keyBoardHeight: e.endCoordinates.height
    });
  }
  _keyboardDidHide() {
    this.setState({
      keyBoardHeight: 0
    });
  }
  loseFocus() {
    this.refs.input.blur()
  }
  render() {
    let { keyBoardHeight } = this.state
    return (
      <View style={css.container}>
        <ScrollView style={{paddingBottom: rpx(100)}}>
          <Text>键盘高度: {keyBoardHeight}</Text>
          <View style={{backgroundColor: 'red', height: rpx(500)}}></View>
          <Button title="收起键盘" style={css.txt} onPress={() => this.loseFocus()}></Button>
          <View style={{backgroundColor: 'blue', height: rpx(500)}}></View>
          <View style={{backgroundColor: 'green', height: rpx(500)}}></View>
        </ScrollView>
          <View style={[css.box, Platform.OS == 'ios' && { bottom: keyBoardHeight }]}>
            <TextInput
              ref="input"
              style={css.input}
              placeholderTextColor='#999999'
              placeholder={'输入代码、名称或简拼'}
              underlineColorAndroid="transparent" />
          </View>
      </View>
    )
  }
}

const css = StyleSheet.create({
  container: {
    flex: 1
  },
  input: {
    height: rpx(60),
    width: '100%',
    fontSize: rpx(26),
    color: '#333333',
    backgroundColor: '#eee',
    borderRadius: rpx(60),
    paddingHorizontal: rpx(20),
    paddingVertical: 0
  },
  box: {
    width: rpx(750),
    height: rpx(100),
    backgroundColor: '#fff',
    paddingHorizontal: rpx(30),
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  txt: {
    color: 'red'
  }
})

　　2.通过KeyboardAvoidingView组件，将页面推送上去，完美解决

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

import rpx from '../util/rpx'

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }
  loseFocus() {
    this.refs.input.blur()
  }
  render() {
    let behavior = Platform.OS == 'ios' ? 'position' : null
    return (
      <KeyboardAvoidingView style={css.container} behavior={behavior}>
        <ScrollView style={{paddingBottom: rpx(100)}}>
          <View style={{backgroundColor: 'red', height: rpx(500)}}></View>
          <Button title="收起键盘" style={css.txt} onPress={() => this.loseFocus()}></Button>
          <View style={{backgroundColor: 'blue', height: rpx(500)}}></View>
          <View style={{backgroundColor: 'green', height: rpx(500)}}></View></ScrollView>
          <View style={[css.box]}>
            <TextInput
              ref="input"
              style={css.input}
              placeholderTextColor='#999999'
              placeholder={'输入代码、名称或简拼'}
              underlineColorAndroid="transparent" />
          </View>
      </KeyboardAvoidingView>
    )
  }
}

const css = StyleSheet.create({
  container: {
    flex: 1
  },
  input: {
    height: rpx(60),
    width: '100%',
    fontSize: rpx(26),
    color: '#333333',
    backgroundColor: '#eee',
    borderRadius: rpx(60),
    paddingHorizontal: rpx(20),
    paddingVertical: 0
  },
  box: {
    width: rpx(750),
    height: rpx(100),
    backgroundColor: '#fff',
    paddingHorizontal: rpx(30),
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  txt: {
    color: 'red'
  }
})