美文网首页ReactNative
ReactNative 中安卓端 TextInput 键盘弹出防

ReactNative 中安卓端 TextInput 键盘弹出防

作者: survivorsfyh | 来源:发表于2021-04-01 10:57 被阅读0次

    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,若存在有滚动组件,则键盘显示的情况下可能会有一部分内容被遮挡住。


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

    相关文章

      网友评论

        本文标题:ReactNative 中安卓端 TextInput 键盘弹出防

        本文链接:https://www.haomeiwen.com/subject/iozzhltx.html