ReactNative 使用 TextInput 组件的时候,苹果端适配的效果很友好,安卓端可能会遇到键盘弹出后遮住 input 输入框的情况,那么可能会因为如下配置导致的;
将此配置参数变更即可,暂时经过测试过后无需添加 KeyboardAvoidingView 并特殊处理 keyboardVerticalOffset 属性即可,可供大家参考;
首先,在 Android 项目工程中 app => src => main => AndroidManifest.xml 中 activity 查看 windowSoftInputMode 参数:
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:screenOrientation="landscape"
android:windowSoftInputMode="adjustResize">
其次,将 android:windowSoftInputMode 的属性从 adjustResize 变更为 adjustPan 即可;
android:windowSoftInputMode="adjustPan
UI 处并没有做特殊操作,code 如下:
<View style={styles.accountInputStyle}>
<View style={{ height : 30, width : 40, marginLeft : 10, marginTop : 7 }}>
<Icon name={'ios-phone-portrait'} type={'ionicon'}/>
</View>
<View style={{ borderColor : 'gray', width : 150 }}>
<TextInput
placeholder="请输入用户名"
style={{ width : 130, fontSize : 14, color : 'gray' }}
onChangeText={text => setUsername(text)}
value={username}
autoCapitalize='none'
/>
</View>
<View style={{ marginLeft : 10, marginRight : 10, borderLeftWidth : 0.5, borderLeftColor : 'gray' }}>
<Button title={'清空'} color={'gray'} onPress={() => setUsername('')}/>
</View>
</View>
最后,该 windowSoftInputMode 属性是用来设置软键盘的模式,其中有几种模式可供选择;
-
stateUnspecified
软键盘的状态并未做专门指定(即:默认属性),系统将默认选择当前合适的模式进行显示; -
stateUnchanged
该模式下键盘状态将采用以之前页面状态,若上一级页面状态为弹出状态,则 push 到该页面后则会继续保持该状态; -
stateHidden
键盘始终处于隐藏状态; -
stateAlwaysHidden
该模式与 stateHidden 类似,相对级别会更高一等; -
stateVisible
该模式下键盘则会始终处在激活状态一直显示着; -
stateAlwaysVisible
该模式下与 stateVisible 类似,若设置为该模式则 push 到该页面无论页面中是否存在有类似 input 的录入框,键盘均会弹出显示,与 stateHidden 和 stateAlwaysHidden 类似; -
adjustUnspecified
该模式下键盘状态则由系统自行判断控制隐藏还是显示,页面空间中弹出遮罩层可能遮罩的哪些控件; -
adjustResize(视图中含有滚动属性组件情况下使用该模式更佳)
该模式下键盘弹出后则会自动调整屏幕上一些组件的布局,为键盘预留出弹出空间,图层中图片部分的位置会被顶起,但部分组件则会保持现有位置不变,如 input 录入框可能也会被遮挡住; -
adjustPan(视图中没有滚动属性组件情况下使用该模式更佳)
该模式下键盘弹出后则系统将会对布局进行位移,从而保证录入框在用户的可视范围内,若界面中没有滚动组件,则效果类似于 adjustUnspecified,若存在有滚动组件,则键盘显示的情况下可能会有一部分内容被遮挡住。
以上便是此次分享的全部内容,希望能对大家有所帮助!
网友评论