react-native-keyboard-aware-scroll-view
适用于 scrollView、ListView、FlatList、SectionList 上有输入框的问题
- 解决键盘挡住输入框问题
- 点击按钮让scrollView滚动到指定位置
Installation
npm i react-native-keyboard-aware-scroll-view --save
Usage
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={{alignItems: 'center', width: width, height: 30, backgroundColor:'yellow', marginTop: 20}}
onPress={()=>{
this.refs.scroll.scrollToPosition(0, 0, true) // 滚动到具体的位置
//this.refs.scroll.scrollToEnd(animated: true); 滚动到底部
}}
>
<Text style={{textAlign: 'center', lineHeight: 30}}>
点击按钮，KeyboardAwareScrollView 滚动到顶部
</Text>
</TouchableOpacity>
<KeyboardAwareScrollView style={{ width: width, height: height}}
ref='scroll'
onKeyboardWillShow={(frames: Object) => {
console.log('键盘弹出时，键盘高度改变时：', frames)
}}
>
<View>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 1'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 2'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 3'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 4'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 5'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 6'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 7'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 8'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 9'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 10'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 11'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 12'/>
<TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
onFocus={(event: Event) => {
}} placeholder='textInput 13'/>
</View>
</KeyboardAwareScrollView>
</View>
);
697E01BB-A40E-4B2E-AA66-BFFDEA70A92A.png
QQ20170918-182124.gif
官网demo效果.gif
