ReactNative

ReactNative 中安卓端 TextInput 键盘弹出防

2021-04-01  本文已影响0人  survivorsfyh

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 属性是用来设置软键盘的模式,其中有几种模式可供选择;

  1. stateUnspecified
    软键盘的状态并未做专门指定(即:默认属性),系统将默认选择当前合适的模式进行显示;

  2. stateUnchanged
    该模式下键盘状态将采用以之前页面状态,若上一级页面状态为弹出状态,则 push 到该页面后则会继续保持该状态;

  3. stateHidden
    键盘始终处于隐藏状态;

  4. stateAlwaysHidden
    该模式与 stateHidden 类似,相对级别会更高一等;

  5. stateVisible
    该模式下键盘则会始终处在激活状态一直显示着;

  6. stateAlwaysVisible
    该模式下与 stateVisible 类似,若设置为该模式则 push 到该页面无论页面中是否存在有类似 input 的录入框,键盘均会弹出显示,与 stateHidden 和 stateAlwaysHidden 类似;

  7. adjustUnspecified
    该模式下键盘状态则由系统自行判断控制隐藏还是显示,页面空间中弹出遮罩层可能遮罩的哪些控件;

  8. adjustResize(视图中含有滚动属性组件情况下使用该模式更佳)
    该模式下键盘弹出后则会自动调整屏幕上一些组件的布局,为键盘预留出弹出空间,图层中图片部分的位置会被顶起,但部分组件则会保持现有位置不变,如 input 录入框可能也会被遮挡住;

  9. adjustPan(视图中没有滚动属性组件情况下使用该模式更佳)
    该模式下键盘弹出后则系统将会对布局进行位移,从而保证录入框在用户的可视范围内,若界面中没有滚动组件,则效果类似于 adjustUnspecified,若存在有滚动组件,则键盘显示的情况下可能会有一部分内容被遮挡住。


以上便是此次分享的全部内容,希望能对大家有所帮助!

上一篇下一篇

猜你喜欢

热点阅读