كيف استخدم keyboardavoidingview بطريقة صحيحة فى هذا التصميم

Ahmed Sawy · 28 مارس 2021

done.png.66b11b260c1f5d1dcc5765c308252124.png wrong.png.5ff37cd5cd822ee438da246069c3bf0a.png

كما موضح فى الصورتين عندما اضغط على خانة تاريخ الميلاد DOB فان حقل الادخاال يختفى خلف لوحة المفاتيح .. انا استخدمت keyboardavoidingview ولكن لم تجدى نفعا .. ما الحل ؟!!

هذا هو الكود الخاص ب Signup Screen

import React, {useState} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  KeyboardAvoidingView,
} from 'react-native';

import Balls from '../components/Balls';
import MyButton from '../components/MyButton';
import MyInput from '../components/MyInput';
import Footer from '../components/Footer';

const phoneHeight = Dimensions.get('screen').height;

function SignUpScreen({navigation}) {
  const [hidePass, setHidePass] = useState(true);

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.con}>
      <Balls />
      <Text style={styles.title}>Create New Account</Text>
      <Text style={styles.subTitle}>Few more step to step your account</Text>
      <View style={styles.inputsCon}>
        <MyInput iconName="account" placeholder="First Name" />
        <MyInput iconName="account" placeholder="Last Name" />
        <MyInput iconName="email" placeholder="Email" />
        <MyInput
          secureTextEntry={hidePass}
          iconName="lock"
          placeholder="Password"
          IsPassword
          hideIconName={hidePass ? 'eye' : 'eye-off'}
          onPress={() => setHidePass(!hidePass)}
        />

        <MyInput iconName="calendar" placeholder="DOB" />
      </View>
      <MyButton title="SIGN UP" />
      <Footer
        mainText="If you already have account ?"
        pressableWord="Login"
        onPress={() => navigation.navigate('LoginScreen')}
      />
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  con: {
    marginTop: phoneHeight * 0.04,
    flex: 1,
  },
  inputsCon: {
    alignSelf: 'center',
    marginVertical: 26,
  },
  title: {
    color: 'dodgerblue',
    fontSize: 18,
    marginLeft: 17,
    marginTop: phoneHeight * 0.1,
  },
  subTitle: {
    fontSize: 16,
    marginLeft: 17,
  },
});
export default SignUpScreen;

وهذا هو الكود الخاص ب MyInput

// Note >> "con" is the shortcut for "container"

import React, {useState} from 'react';
import {Dimensions, StyleSheet, View, TextInput} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const phoneHeight = Dimensions.get('screen').height;
const phoneWidth = Dimensions.get('screen').width;

function MyInput({
  hideIconName,
  onPress,
  iconName,
  placeholder,
  IsPassword,
  ...props
}) {
  return (
    <View style={styles.con}>
      <View style={styles.iconAndNameCon}>
        <MaterialCommunityIcons name={iconName} size={22} color="dodgerblue" />
        <TextInput
          {...props}
          style={styles.textInput}
          placeholder={placeholder}
          placeholderTextColor="black"
        />
        {IsPassword && (
          <View>
            <MaterialCommunityIcons
              onPress={onPress}
              name={hideIconName}
              size={22}
              color="dodgerblue"
            />
          </View>
        )}
      </View>
      <View style={styles.underLine} />
    </View>
  );
}

const styles = StyleSheet.create({
  con: {
    height: phoneHeight * 0.05,
    width: phoneWidth * 0.8,
    marginVertical: 7,
  },
  underLine: {
    width: '100%',
    height: 1,
    backgroundColor: 'gray',
    bottom: 0,
    position: 'absolute',
  },
  iconAndNameCon: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  textInput: {
    marginLeft: 5,
    flex: 1,
  },
});
export default MyInput;

Wael Aljamal · 28 مارس 2021

يمكنك تجريب الشيفرة التالية:

يحوي على مثال يعمل بشكل سليم يمكنك أخذ الأجزاء التي تريدها و تطبيقها في مشروعك

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';

import { StyleSheet, TextInput, View, Text, KeyboardAvoidingView, Keyboard, TouchableOpacity, ScrollView, Platform } from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);
    }

    submit() {
        Keyboard.dismiss();
    }
    render() {
        return (
            <KeyboardAvoidingView enabled behavior={ Platform.OS === 'ios'? 'padding': null}
                style= {styles.FlexGrowOne}>
                
                <ScrollView bounces= {false}
                    style= {styles.FlexOne}>

                    <View style={styles.TextInputWrapper}>
                        <TextInput underlineColorAndroid= "#413E4F"
                            placeholder= "Enter First Name"
                            placeholderTextColor= "#413E4F"
                            ref={ref => { this._nameinput = ref; }}
                            returnKeyType= "next"
                            onSubmitEditing={() =>this._lname.focus()}/>
                    </View>

                    <View style={styles.TextInputWrapper}>
                        <TextInput underlineColorAndroid="#413E4F"
                            placeholder="Enter Last Name"
                            placeholderTextColor="#413E4F"
                            ref={ref => { this._lname = ref; }}
                            returnKeyType="next"
                            onSubmitEditing= {() =>this._emailinput.focus()}/>
                            
                    </View>

                    <View style={styles.TextInputWrapper}>
                        <TextInput underlineColorAndroid="#413E4F"
                            placeholder ="Enter Email Address"
                            placeholderTextColor="#413E4F"
                            keyboardType="email-address"
                            ref={ref => { this._emailinput = ref; }}
                            returnKeyType="next" 
                            onSubmitEditing= {() =>this._phonenumber.focus()}/>
                    </View>

                    <View style={styles.TextInputWrapper}>
                        <TextInput underlineColorAndroid="#413E4F"
                            placeholder ="Enter Phone Number"
                            placeholderTextColor="#413E4F"
                            keyboardType="numeric"
                            ref={ref => { this._phonenumber = ref; }}
                            returnKeyType="next" 
                            onSubmitEditing= {() =>this._addressinput1.focus()}/>
                    </View>

                    <View style={styles.TextInputWrapper}>
                        <TextInput underlineColorAndroid="#413E4F"
                            placeholder="Enter Address Line-1"
                            placeholderTextColor="#413E4F"
                            autoCapitalize="sentences"
                            ref={ref =>  {this._addressinput1 = ref;}}
                            returnKeyType="next" 
                            onSubmitEditing= {() =>this._addressinput2.focus()}/>
                    </View>

                    <View style={styles.TextInputWrapper}>
                        <TextInput underlineColorAndroid="#413E4F"
                            placeholder="Enter Address Line-2"
                            placeholderTextColor="#413E4F"
                            autoCapitalize="sentences"
                            ref={ref =>  {this._addressinput2 = ref;}}
                            returnKeyType="next" 
                            onSubmitEditing= {() =>this._zipcode.focus()}/>
                    </View>

                    <View style={styles.TextInputWrapper}>
                        <TextInput underlineColorAndroid="#413E4F"
                            placeholder="Enter Zipcode"
                            placeholderTextColor="#413E4F"
                            autoCapitalize="sentences"
                            ref={ref =>  {this._zipcode = ref;}}
                            returnKeyType="next" 
                            onSubmitEditing= {() =>this._state.focus()}/>
                    </View>

                    <View style={styles.TextInputWrapper}>
                        <TextInput underlineColorAndroid="#413E4F"
                            placeholder="Enter State"
                            placeholderTextColor="#413E4F"
                            autoCapitalize="sentences"
                            ref={ref =>  {this._state = ref;}}
                            returnKeyType="next" 
                            onSubmitEditing= {() =>this._country.focus()}/>
                    </View>

                    <View style={styles.TextInputWrapper}>
                        <TextInput underlineColorAndroid="#413E4F"
                            placeholder="Enter Country"
                            placeholderTextColor="#413E4F"
                            autoCapitalize="sentences"
                            ref={ref =>  {this._country = ref;}}
                            returnKeyType="done" />
                    </View>
                </ScrollView>

                <View style= {[styles.Shadow, styles.ButtonBackgroundColor]}>
                    <TouchableOpacity style={[styles.ButtonWrapper, styles.Shadow]}
                        activeOpacity={0.5}
                        onPress={()=> this.submit()}>
                        <Text style= {styles.SubmitText}>SUBMIT</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    FlexGrowOne: {
        flexGrow : 1
    },
    FlexOne: {
        flex : 1
    },
    TextInputWrapper: {
        flex: 1,
        height: 40,
        margin: 20
    },
    ButtonWrapper: {
        backgroundColor: '#51D8C7',
        borderWidth: 0,
        color: '#FFFFFF',
        borderColor: '#000',
        height: 40,
        alignItems: 'center',
        borderRadius: 5,
        marginLeft: 35,
        marginRight: 35,
        marginTop: 30,
        marginBottom: 30
    },
    ButtonBackgroundColor: {
        backgroundColor: '#e6fff9'
    },
    Shadow: {
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 5,
        },
        shadowOpacity: 0.34,
        shadowRadius: 6.27,
        elevation: 10,
    },
    SubmitText: {
        color: '#FFFFFF', 
        paddingVertical: 10, 
        fontSize: 16
    }
});

كيف استخدم keyboardavoidingview بطريقة صحيحة فى هذا التصميم

السؤال

Ahmed Sawy

1 جواب على هذا السؤال

Recommended Posts

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية