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

这是效果：

代码：

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的图 ，要不就配一个图了。

总结

以上所述是小编给大家介绍的解决react-native软键盘弹出挡住输入框的问题,希望对大家有所帮助