这是效果:

代码:

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

解决react-native软键盘弹出挡住输入框的问题的更多相关文章

  1. ios – React native链接到另一个应用程序

    如果是错误的,有人知道如何调用正确的吗?

  2. ios – React Native – 在异步操作后导航

    我正在使用ReactNative和Redux开发移动应用程序,我正面临着软件设计问题.我想调用RESTAPI进行登录,如果该操作成功,则导航到主视图.我正在使用redux和thunk所以我已经实现了异步操作,所以我的主要疑问是:我应该把逻辑导航到主视图?我可以直接从动作访问导航器对象并在那里执行导航吗?.我对组件中的逻辑没有信心.似乎不是一个好习惯.有没有其他方法可以做到这一点?

  3. 在ios中使用带有React Native(0.43.4)的cocoapods的正确方法是什么?

    我已经挖掘了很多帖子试图使用cocoapods为本地ios库设置一个反应原生项目,但我不可避免地在#import中找到了丢失文件的错误.我的AppDelegate.m文件中的语句.什么是使用反应原生的可可豆荚的正确方法?在这篇文章发表时,我目前的RN版本是0.43.4,而我正在使用Xcode8.2.1.这是我的过程,好奇我可能会出错:1)

  4. ios – React Native WebView滚动行为无法按预期工作

    如何确保滚动事件的行为与ReactNative应用程序中的浏览器相同?

  5. ios – React Native – BVLinearGradient – 找不到’React/RCTViewManager.h’文件

    谢谢.解决方法几天前我遇到了完全相同的问题.问题是在构建应用程序时React尚未链接.试试这个:转到Product=>Scheme=>管理方案…=>点击你的应用程序Scheme,然后点击Edit=>转到Build选项卡=>取消选中ParallelizeBuild然后点击标志添加目标=>搜索React,选择第一个名为React的目标,然后单击Add然后在目标列表中选择React并将其向上拖动到该列表中的第一个.然后转到Product=>再次清理并构建项目.这应该有所帮助.

  6. ios – React Native – NSNumber无法转换为NSString

    解决方法在你的fontWeight()函数中也许变成:

  7. ios – React native error – react-native-xcode.sh:line 45:react-native:command not found命令/ bin/sh失败,退出代码127

    尝试构建任何(新的或旧的)项目时出现此错误.我的节点是版本4.2.1,react-native是版本0.1.7.我看过其他有相同问题的人,所以我已经更新了本机的最新版本,但是我仍然无法通过xcode构建任何项目.解决方法要解决此问题,请使用以下步骤:>使用节点版本v4.2.1>cd进入[你的应用]/node_modules/react-native/packager>$sh./packager.s

  8. 反应原生 – 如何通过Xcode构建React Native iOS应用程序到设备?

    我试图将AwesomeProject应用程序构建到设备上.构建成功并启动屏幕显示,但后来我看到一个红色的“无法连接到开发服务器”屏幕.它表示“确保节点服务器正在运行–从Reactroot运行”npmstart“.看起来节点服务器已经运行,因为当我做npm启动时,我收到一个EADDRINUSE消息,表示该端口已经在使用.解决方法从设备访问开发服务器您可以使用开发服务器快速迭代设备.要做到这一点,你的

  9. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  10. 如何为iOS的React Native设置分析

    所以我已经完成了一个针对iOS的ReactNative项目,但是我想在其中分析.我尝试了react-native-google-analytics软件包,但是问题阻止了它的正常工作.此外,react-native-cordova-plugin软件包只适用于Android,因此插入Cordova插件进行分析的能力现在已成为问题.我也没有Swift/ObjectiveC的经验,所以将完全失去GA的插入.有没有人有任何建议如何连接GoogleAnalytics的ReactNativeforiOS?

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作,实现图片的放大、缩小和旋转等处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部