解決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, //去除安卓手機(jī)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位,須包含數(shù)字、字母2中元素</Text> <TextInput style={styles.textinput} placeholder="請(qǐng)輸入初始密碼" 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="請(qǐng)輸入新密碼" placeholderTextColor = "#cccccc" maxLength = {16} secureTextEntry = {true} onChangeText={this.onChangeText} /> <Text style={styles.Line}></Text> { this.state.isTrue == true ? <Text style={styles.errorconfirm} onPress={() => { alert('你點(diǎn)擊了確認(rèn),該跳轉(zhuǎn)了!~') // this.props.navigation.navigate('ChangePassword') }}>確認(rèn)</Text> : <Text style={styles.confirm}>確認(rèn)</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);
有無用的代碼,可自行刪除,我不會(huì)弄gif的圖 ,要不就配一個(gè)圖了。
總結(jié)
以上所述是小編給大家介紹的解決react-native軟鍵盤彈出擋住輸入框的問題,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
詳解Android跨進(jìn)程IPC通信AIDL機(jī)制原理
本篇文章主要介紹了詳解Android跨進(jìn)程IPC通信AIDL機(jī)制原理,詳細(xì)的介紹了AIDL的概念和使用,具有一定的參考價(jià)值,有興趣的可以了解一下2018-01-01解決Android Studio 3.0 butterknife:7.0.1配置的問題
下面小編就為大家分享一篇解決Android Studio 3.0 butterknife:7.0.1配置的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12Android 封裝Okhttp+Retrofit+RxJava,外加攔截器實(shí)例
下面小編就為大家分享一篇Android封裝Okhttp+Retrofit+RxJava,外加攔截器實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01Android 老生常談LayoutInflater的新認(rèn)知
今天不想去聊一些Android的新功能,新特性之類的東西,特別想聊一聊這個(gè)老生常談的話題:LayoutInflater,感興趣的朋友來看看吧2022-03-03