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

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

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

这篇文章主要介绍了Android Native 内存泄漏系统化解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要介绍了React Navigation 导航栏样式调整+底部角标消息提示的相关知识,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
这篇文章主要介绍了Android使用google breakpad捕获分析native cash 的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
AndroidFlutter实现原理浅析 目录 前言 一.安卓原生界面绘制的流程 原生绘制流程 SurfaceView绘制流程 二.Flutter上界面绘制的流程 FlutterActivity中的流程 FlutterView中的实现 native流程 三.总结 Flutter的简单实现原理 Flutter的几个高频问题 前言 flutter可以说是
Jetpack Compose对比React Hooks API相似度 目录 React Component vs Composable JSX vs DSL loop If statement key component Children Prop vs Children Composable Context vs Ambient(CompositionLocal) createContext : ambientOf Provider : Provider useContext : Ambient.cu