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

解决react-native软键盘弹出挡住输入框的问题_第1张图片解决react-native软键盘弹出挡住输入框的问题_第2张图片

这是效果:

代码:

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 (
      
      
          修改密码
          密码为8-16位,须包含数字、字母2中元素
             this.setState({text})}
            />
            
            
          
          {
            this.state.isTrue == true ?  {
              alert('你点击了确认,该跳转了!~')
              // this.props.navigation.navigate('ChangePassword')
            }}>确认 : 确认
          }
        
      
    );
  }
}
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的图 ,要不就配一个图了。

你可能感兴趣的:(reactNative采坑之路,软键盘弹出,挡住输入框,react-native)