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