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>