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'
  }
})