这是效果:
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
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软键盘弹出挡住输入框的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
原文链接:https://blog.csdn.net/quhongqiang/article/details/86629165