解决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软键盘弹出挡住输入框的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

以上是 解决react-native软键盘弹出挡住输入框的问题 的全部内容, 来源链接: utcz.com/p/242019.html

回到顶部