前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决react-native软键盘弹出挡住输入框的问题

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

作者头像
砸漏
发布2020-10-18 22:49:54
2.7K0
发布2020-10-18 22:49:54
举报
文章被收录于专栏:恩蓝脚本

这是效果:

代码:

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档