解決react-native軟鍵盤彈出擋住輸入框的問題

更新時間：2019年08月09日 16:30:00 作者：曲小強

這篇文章主要介紹了解決react-native軟鍵盤彈出擋住輸入框的問題，本文通過實例圖文相結(jié)合給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

這是效果：

代碼：

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位，須包含數(shù)字、字母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('你點擊了確認，該跳轉(zhuǎn)了！~')
       // 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的圖，要不就配一個圖了。

總結(jié)

以上所述是小編給大家介紹的解決react-native軟鍵盤彈出擋住輸入框的問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: