RN 键盘顶起及ScrollView显示底部
一、模拟器启动软键盘
快捷键：点击模拟器===》 command+k
二、键盘顶起
componentDidMount() {
//获取键盘事件，使键盘顶起
Keyboard.addListener('keyboardDidShow', (event) => {
this.setState({
top: event.endCoordinates.height
})
})
Keyboard.addListener('keyboardDidHide', (event) => {
this.setState({
top: 0
})
})
}
三、获得ScrollView的总的高度
layout = (e) => {
console.log('999999', e)
this.setState({
totalHeight: e.layout.height
})
}
四、根据键盘的起落和是否发表过评论ScrollView进行滚动条件判断
<ScrollView
ref={scrollView => {
if (scrollView !== null) {
setTimeout(() => {
//父组件传入的参数的option（用于计算偏移，根据自己实际情况）
scrollView.scrollTo({
x: 0, y: this.state.clicked === true && this.state.top === 0 ?
this.state.totalHeight - Metrics.CH + 110 : this.state.clicked === false && this.state.top !== 0 ?
this.state.totalHeight - (this.state.top + 110)
: this.state.clicked === true && this.state.top !== 0 ? this.state.totalHeight - (this.state.top + 110) : 0,
animated: true
}, 1)
})
}
}}
>
<View onLayout={({ nativeEvent: e }) => this.layout(e)}>
//ScrollView 的内容及评论，评论按钮中甚至clicked为true
</View><ScrollVIew>