这是效果：

代码：

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