【React-native】React-native键盘遮挡TextInput，使用 KeyboardAvoidingView 解决

缺乏、安全感 2023-07-07 11:15 6阅读 0赞

所有APP都有表单提交，键盘是千万不能遮挡的，而且在最后一项输入的时候，底部的 【提交/登录】按钮需要弹上来显示

安装插件：

npm i react-native-keyboard-aware-scroll-view --save

yarn add react-native-keyboard-aware-scroll-view

然后，用如下包裹你的 input 输入组件

<KeyboardAwareScrollView
            style={styles.keyBoardStyle}
            extraHeight={120}
            enableOnAndroid={true}
            enableResetScrollToCoords={true}>
            <View style={styles.formContainer}>
              <View style={styles.loginForm}>
                <View style={styles.formItem}>
                    <View style={styles.formItemL}>
                      <Image style={[styles.frmIcoStyle,styles.accountImg]} source={require('./../image/account.png')} />
                    </View>
                    <View style={styles.formItemR}>
                      <TextInput
                        ref="account"
                        autoFocus={true}
                        underlineColorAndroid="transparent"
                        onChangeText={(account) => this.setState({account})}
                        value={this.state.account}
                        placeholder={'用户名/账号/手机号'}
                        placeholderTextColor="#C5C5C5"
                        style={styles.textInputStyle}
                        clearButtonMode="always"
                        returnKeyType="done"
                      />
                    </View>
                </View>
                <View style={styles.formItem}>
                    <View style={styles.formItemL}>
                      <Image style={[styles.frmIcoStyle,styles.pwdImg]} source={require('./../image/pwd.png')} />
                    </View>
                    <View style={styles.formItemR}>
                      <TextInput
                        ref="pwd"
                        underlineColorAndroid="transparent"
                        onChangeText={(pwd) => this.setState({pwd})}
                        value={this.state.pwd}
                        placeholder={'请输入您的密码'}
                        placeholderTextColor="#C5C5C5"
                        secureTextEntry={true}
                        style={styles.textInputStyle}
                        returnKeyType="done"
                      />
                    </View>
                </View>
                <TouchableOpacity onPress={this.handleLogin}>
                  <View style={styles.frmSubmit}>
                    <Text style={styles.frmSubmitText}>登录</Text>
                  </View>
                </TouchableOpacity>
                <View style={styles.frmGroup}>
                  <Text style={styles.frmGroupText}>注册账号</Text>
                  <Text style={styles.frmGroupText}>忘记密码</Text>
                </View>
              </View>
            </View>
          </KeyboardAwareScrollView>

开启 **enableOnAndroid** 后 **extraHeight** 才生效。

**extraHeight** 也就是键盘弹出后，距离包裹组件的 margin height。最终效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200222211245650.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2,size_16,color_FFFFFF,t_70