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

所有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。最终效果如下：