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