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