目录
2.react-native-keyboard-aware-scroll-view
4.1实现类似QQ聊天效果,点击输入框以后可以继续停留在未弹出键盘的位置;
键盘遮挡
在开发中难免会用于(TextInput)输入框,可能会遇到键盘遮挡TextInput的情况,效果图:
示例代码:
render(){
return (<View style={styles.container}>
<Text style={
{height:150,textAlignVertical:'center'}}>键盘遮挡</Text>
<TextInput ref="username1"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号1'}//提示语
style={styles.textInputStyle}
/>
<TextInput ref="username2"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号2'}//提示语
style={styles.textInputStyle}
/>
<TextInput ref="username3"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号3'}//提示语
style={styles.textInputStyle}
/>
<TextInput ref="username4"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号4'}//提示语
style={styles.textInputStyle}
/>
<TextInput ref="username5"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号5'}//提示语
style={styles.textInputStyle}
/>
<TextInput ref="username6"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号6'}//提示语
style={styles.textInputStyle}
/>
</View>);
}
}
let styles = StyleSheet.create({
container:{
flex: 1,
justifyContent: 'center',
alignItems:'center',
backgroundColor:'#0ff'
},
textInputStyle:{height:50, width:'90%',backgroundColor:'#fff',marginTop:10, borderRadius:10}
});
介绍几种解决键盘遮挡问题的方法
1.KeyboardAvoidingView
本组件用于解决一个常见的尴尬问题:手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的位置,调整自身的 height 或底部的 padding,以避免被遮挡。
用法:
import { KeyboardAvoidingView } from 'react-native';
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
... 在这里放置需要根据键盘调整位置的组件 ...
</KeyboardAvoidingView>
关键参数说明:
behavior:参数表示怎样显示键盘;
注意:Android 和 iOS 在此属性上表现并不一致。 Android 可能不指定此属性更好,而 iOS 可能相反。
通过测试behavior设置为padding基本满足需求的;
我们可以看到通过KeyboardAvoidingView包裹输入框以后基本可以满足需要了;
render(){
return (<KeyboardAvoidingView style={styles.container}
behavior= 'padding'>
<Text style={
{height:150,textAlignVertical:'center'}}>键盘遮挡</Text>
<TextInput ref="username1"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号1'}//提示语
style={styles.textInputStyle}
/>
<TextInput ref="username2"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号2'}//提示语
style={styles.textInputStyle}
/>
<TextInput ref="username3"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号3'}//提示语
style={styles.textInputStyle}
/>
<TextInput ref="username4"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号4'}//提示语
style={styles.textInputStyle}
/>
<TextInput ref="username5"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号5'}//提示语
style={styles.textInputStyle}
/>
<TextInput ref="username6"
autoCapitalize='none' //设置首字母不自动大写
placeholder={'请输入账号6'}//提示语
style={[styles.textInputStyle, {marginBottom:50}]}
/>
<Text style={[styles.textInputStyle, {textAlign:'center', textAlignVertical:'center'}]}>登录</Text>
</KeyboardAvoidingView>);
}
通过效果图我们会发现一个问题,视图是被直接顶上去了,显示在视图之外,界面无法滚动;
针对 Android 开发者:我发现这种方法是处理这个问题最好,也是唯一的办法。在 AndroidManifest.xml
中添加 android:windowSoftInputMode="adjustResize"。操作系统将为你解决大部分的问题,
KeyboardAvoidingView 会为你解决剩下的问题。参见https://gist.github.com/spencercarli/e1b9575c1c8845c2c20b86415dfba3db#file-
androidmanifest-xml-L23这个。
2.react-native-keyboard-aware-scroll-view
一个ScrollView组件,用于处理键盘外观并自动滚动到焦点文本输入。
您可以