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

 更新时间:2019年08月09日 16:30:00   作者:曲小强  
这篇文章主要介绍了解决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滚动公告栏

    简单实现Android滚动公告栏

    这篇文章主要为大家详细介绍了如何简单实现Android滚动公告栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Android初学者必须知道的10个技术

    Android初学者必须知道的10个技术

    本篇内容给大家整理10个作为Android初学者必须要了解和会用的技术以及详细代码分析,需要的朋友收藏下慢慢学习吧。
    2017-12-12
  • Android实现带页面切换的锁屏功能

    Android实现带页面切换的锁屏功能

    这篇文章主要为大家详细介绍了Android实现带页面切换的锁屏功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • 用Android studio实现简易计算器功能

    用Android studio实现简易计算器功能

    这篇文章主要为大家详细介绍了用Android studio实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Android如何在Gradle中更改APK文件名详解

    Android如何在Gradle中更改APK文件名详解

    这篇文章主要介绍了Android如何在Gradle中更改APK文件名的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-10-10
  • Android4.4+ 实现半透明状态栏(Translucent Bars)

    Android4.4+ 实现半透明状态栏(Translucent Bars)

    这篇文章主要为大家详细介绍了Android4.4+ 实现半透明状态栏,对状态栏(Status Bar)和下方导航栏(Navigation Bar)进行半透明处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • Android实现网络多线程断点续传下载功能

    Android实现网络多线程断点续传下载功能

    这篇文章主要为大家详细介绍了Android实现网络多线程断点续传下载功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Android开发之PopupWindow创建弹窗、对话框的方法详解

    Android开发之PopupWindow创建弹窗、对话框的方法详解

    这篇文章主要介绍了Android开发之PopupWindow创建弹窗、对话框的方法,结合实例形式详细分析了Android使用PopupWindow创建对话框相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 解析Android开发优化之:对界面UI的优化详解(二)

    解析Android开发优化之:对界面UI的优化详解(二)

    在一个应用程序中,一般都会存在多个Activity,每个Activity对应着一个UI布局文件。一般来说,为了保持不同窗口之间的风格统一,在这些UI布局文件中,几乎肯定会用到很多相同的布局
    2013-05-05
  • Android开发升级AGP7.0后的一些适配方法技巧

    Android开发升级AGP7.0后的一些适配方法技巧

    这篇文章主要为大家介绍了升级AGP7.0后的一些适配方法技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06

最新评论