اذهب إلى المحتوى
  • 0

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

Ahmed Sawy

السؤال

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;

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

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

/**
 * 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
    }
});

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...