首页 > 系统 > Android > 正文

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

2019-12-12 00:07:36
字体:
来源:转载
供稿:网友

这是效果:

代码:

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软键盘弹出挡住输入框的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表