解决react-native软键盘弹出挡住输入框的问题

清疚 2022-04-23 06:30 368阅读 0赞

![1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70][]

这是效果：

代码：

import React, {Component} from 'react';
    import { View, Text, Button, StyleSheet, TextInput, ScrollView, KeyboardAvoidingView, Dimensions  } from 'react-native';
    import { StackActions, NavigationActions, withNavigation } from 'react-navigation';
    
    const {width, height} = Dimensions.get('window');
    class ChangePassword extends Component {
      static navigationOptions = {
        headerStyle: {
          elevation: 0,  //去除安卓手机header的样式
        },
      };
      constructor(props) {
        super(props);
        this.state = {
          isTrue: false,
          text: '',
          text1: '',
        };
      }
      onChangeText = (text1) => {
        this.setState({
          text1
        },()=> {
          if (this.state.text1.length >= 8) {
            this.setState({
              isTrue: true
            })
          } else if (this.state.text1.length < 8) {
            this.setState({
              isTrue: false
            })
          }
        })
      }
      render() {
        return (
          <ScrollView style={styles.container}>
          <KeyboardAvoidingView behavior="position" keyboardVerticalOffset = {120} >
              <Text style={styles.title}>修改密码</Text>
              <Text style={styles.totst}>密码为8-16位，须包含数字、字母2中元素</Text>
                <TextInput
                  style={styles.textinput}
                  placeholder="请输入初始密码"
                  placeholderTextColor = "#cccccc"
                  maxLength = {16}
                  value={this.state.value}
                  secureTextEntry = {true}
                  onChangeText={(text) => this.setState({text})}
                />
                <Text style={styles.Line}></Text>
                <TextInput
                  style={styles.textinput}
                  placeholder="请输入新密码"
                  placeholderTextColor = "#cccccc"
                  maxLength = {16}
                  secureTextEntry = {true}
                  onChangeText={this.onChangeText}
                />
              <Text style={styles.Line}></Text>
              {
                this.state.isTrue == true ? <Text style={styles.errorconfirm} onPress={() => {
                  alert('你点击了确认，该跳转了！~')
                  // this.props.navigation.navigate('ChangePassword')
                }}>确认</Text> : <Text style={styles.confirm}>确认</Text>
              }
            </KeyboardAvoidingView>
          </ScrollView>
        );
      }
    }
    const styles = StyleSheet.create({
      container: {
        height: height,
        padding: 16,
      },
      title: {
        color: '#4a4a4a',
        fontSize: 23,
        fontFamily: 'PingFangSC-Semibold',
      },
      totst: {
        color: '#999999',
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 13,
        marginTop: 16,
      },
      Line: {
        height: 1,
        backgroundColor: '#d8d8d8',
      },
      textinput: {
        marginTop: 50,
        color: '#4a4a4a',
        fontSize: 18,
      },
      errorconfirm: {
        marginTop: 44,
        height: 44,
        lineHeight: 44,
        textAlign: 'center',
        fontSize: 16,
        color: '#ffffff',
        backgroundColor: '#25A3FF',
        borderRadius: 4,
      },
      confirm: {
        marginTop: 44,
        height: 44,
        lineHeight: 44,
        textAlign: 'center',
        fontSize: 16,
        color: '#ffffff',
        backgroundColor: '#cccccc',
        borderRadius: 4,
      }
    })
    export default withNavigation(ChangePassword);

有无用的代码，可自行删除，我不会弄gif的图 ，要不就配一个图了。

[1]: https://img-blog.csdnimg.cn/20190124162627218.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20220323/927a5b21024c47daacabe4718cfc101d.png