כיצד לגרום לאפליקציית React Native להגיב בחן כאשר המקלדת צצה

כשאתה עובד עם אפליקציות React Native, בעיה נפוצה היא שהמקלדת תצוץ ותסתיר קלטי טקסט כשאתה מתמקד בהם. משהו כזה:

ישנן כמה דרכים בהן ניתן להימנע מכך. חלקן פשוטות, חלקן פחות. חלקם ניתנים להתאמה אישית, אחרים לא. היום אראה לכם 3 דרכים שונות בהן תוכלו להימנע מהמקלדת ב- React Native.

שמתי את כל קוד המקור של הדרכה זו ב- Github.

KeyboardAvoidingView

הפיתרון הפשוט ביותר והקל ביותר להתקנה הוא KeyboardAvoidingView. זה מרכיב ליבה אבל זה גם די פשוט במה שהוא עושה.

אתה יכול לקחת את קוד הבסיס, שבו המקלדת מכסה את הקלטים, ולעדכן אותו כך שהתשומות כבר לא יהיו מכוסות. הדבר הראשון שאתה צריך לעשות הוא להחליף את מיכל Viewעם KeyboardAvoidingViewולאחר מכן להוסיף behaviorאביזר אליו. אם תסתכל בתיעוד תראה שהוא מקבל 3 ערכים שונים - גובה, ריפוד, מיקום . גיליתי שהריפוד עובד בצורה הצפויה ביותר. אז זה מה שאשתמש בו.

import React from 'react'; import { View, TextInput, Image, KeyboardAvoidingView } from 'react-native'; import styles from './styles'; import logo from './logo.png'; const Demo = () => { return (         ); }; export default Demo;

זה נותן לנו את התוצאה הבאה. זה לא מושלם אבל בקושי לעבודה, זה די טוב.

דבר אחד שיש לשים לב אליו הוא כי בקו 30 תראה Viewא 'שגובהה מוגדר ל -60 פיקסלים. גיליתי שהמקלדת המונעת תצוגה לא ממש עובדת עם האלמנט האחרון, והגדרת ריפוד / שוליים לא עבדה. אז הוספתי אלמנט חדש כדי "להקפיץ" את הכל בכמה פיקסלים.

התמונה בחלק העליון נדחקת מחוץ לתצוגה בעת שימוש ביישום פשוט זה. אני אראה לך איך תוכל לתקן את זה בסוף.

משתמשי אנדרואיד: מצאתי שזו האפשרות הטובה / היחידה. על ידי הוספה android:windowSoftInputMode="adjustResize"ל- AndroidManifest.xml שלך, מערכת ההפעלה תדאג למרבית העבודה עבורך ו- KeyboardAvoidingView ידאג לשאר. דוגמה ל- AndroidManifest.xml. יתרת המאמר הזה ככל הנראה לא תחול עליך.

מקלדת מודעת ScrollView

האפשרות הבאה היא תצוגת הגלילה להגיב-מקורי-מקלדת-מודעת-מגילה אשר נותנת לך המון כסף. מאחורי הקלעים הוא משתמש ב- ScrollView או ListView כדי לטפל בכל דבר (תלוי ברכיב שתבחרו), מה שהופך את אינטראקציית הגלילה למדי חלקה. היתרון העיקרי הנוסף לחבילה זו הוא שהיא תגלול אל הקלט שנמצא בפוקוס, מה שמעניק למשתמש חוויה נחמדה.

השימוש הוא גם קל מאוד - אתה רק צריך להחליף את המכולה View, שוב החל מקוד הבסיס, ולהגדיר כמה אפשרויות. הנה הקוד ואז אתאר אותו.

import React from 'react'; import { View, TextInput, Image } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' import styles from './styles'; import logo from './logo.png'; const Demo = () => { return (        ); }; export default Demo;

ראשית ברצונך להגדיר את הרקע ColorColor של ScrollView בצורה זו (אם היית מפעיל גלילה מחדש) הרקע ColorCom הוא תמיד זהה. בשלב הבא תרצה לומר לרכיב היכן מיקום ברירת המחדל הוא כך שברגע שהמקלדת סגורה, היא תחזור לאותה נקודה - על ידי השמטת אביזר זה התצוגה עלולה להיתקע בחלק העליון לאחר סגירת המקלדת, כך.

לאחר ההצגה resetScrollToCoords הגדרת את contentContainerStyle - זה בעצם מחליף את Viewהסגנונות המכילים שהיו לך בעבר. הדבר האחרון שאני עושה הוא להשבית את תצוגת הגלילה מאינטראקציה של המשתמש. זה לא תמיד הגיוני עבור ממשק המשתמש שלך (כגון ממשק שבו משתמש עורך שדות פרופיל רבים) אך עבור זה זה עושה, זה לא הגיוני מאוד לאפשר למשתמש לגלול ידנית כי אין מה לגלול ל.

שילוב של אביזרים אלה יחד תקבל את התוצאה הבאה, שעובדת די טוב.

מודול מקלדת

זו ללא ספק האפשרות הידנית ביותר אך גם נותנת לך את השליטה הרבה ביותר. תשתמש בספריית האנימציה כדי לעזור באינטראקציות חלקות כמו שראית קודם.

מודול המקלדת, שאינו מתועד באתר React Native, מאפשר להאזין לאירועי מקלדת הנפלטים מהמכשיר. האירועים שבהם תשתמש הם keyboardWillShow ו- keyboardWillHide , המחזירים את משך הזמן שייקח האנימציה ואת מיקום הסיום של המקלדת (בין היתר).

אם אתה משתמש ב- Android, תרצה להשתמש במקום זאת ב- keyboardDidShow וב- keyboardDidHide.

כאשר האירוע keyboardWillShow נפלט, תגדיר משתנה מונפש לגובה הסופי של המקלדת ותנפח אותו למשך אותו זמן כמו אנימציית הזזה המקלדת. לאחר מכן אתה משתמש בערך מונפש זה כדי להגדיר ריפוד בתחתית המכולה כדי להקפיץ את כל התוכן.

אראה קוד עוד רגע, אך ביצוע מה שתיארתי לעיל משאיר אותנו עם החוויה הזו.

אני רוצה לתקן את התמונה הזו הפעם. לשם כך תשתמש בערך מונפש לניהול גובה התמונה, אותו תתאים כאשר פותחים את המקלדת. הנה הקוד.

import React, { Component } from 'react'; import { View, TextInput, Image, Animated, Keyboard } from 'react-native'; import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL} from './styles'; import logo from './logo.png'; class Demo extends Component { constructor(props) { super(props); this.keyboardHeight = new Animated.Value(0); this.imageHeight = new Animated.Value(IMAGE_HEIGHT); } componentWillMount () { this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); } componentWillUnmount() { this.keyboardWillShowSub.remove(); this.keyboardWillHideSub.remove(); } keyboardWillShow = (event) => { Animated.parallel([ Animated.timing(this.keyboardHeight, { duration: event.duration, toValue: event.endCoordinates.height, }), Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT_SMALL, }), ]).start(); }; keyboardWillHide = (event) => { Animated.parallel([ Animated.timing(this.keyboardHeight, { duration: event.duration, toValue: 0, }), Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT, }), ]).start(); }; render() { return (        ); } }; export default Demo;

בהחלט יש בזה הרבה יותר מכל אחד מהפתרונות האחרים. במקום רגיל Viewאו Imageשאתה משתמש ב- Animated.Viewוכדי Animated.Imageשניתן יהיה למנף את הערכים המונפשים. החלק המהנה הוא באמת בתוך keyboardWillShow ו keyboardWillHide הפונקציות איפה ערכי האנימציה משתנים.

מה שקורה שם הוא ששני ערכים מונפשים משתנים במקביל ומשמשים אז להפעלת ממשק המשתמש. זה משאיר אותך עם זה.

זה הרבה יותר קוד אבל זה די חלקלק. יש לך הרבה אפשרויות למה שאתה יכול לעשות ובאמת תוכל להתאים אישית את האינטראקציה לפי ליבך.

שילוב אפשרויות

אם אתה רוצה לשמור קצת קוד אתה יכול לשלב כמה אפשרויות, וזה מה שאני נוטה לעשות. לדוגמא על ידי שילוב של אפשרות 1 ו- 3 אתה רק צריך לדאוג לניהול ואנימציה של גובה התמונה.

הקוד אינו הרבה פחות ממקור אפשרות 3, אך ככל שממשק המשתמש גדל במורכבותו, הוא יכול לעזור לך קצת.

import React, { Component } from 'react'; import { View, TextInput, Image, Animated, Keyboard, KeyboardAvoidingView } from 'react-native'; import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL } from './styles'; import logo from './logo.png'; class Demo extends Component { constructor(props) { super(props); this.imageHeight = new Animated.Value(IMAGE_HEIGHT); } componentWillMount () { this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); } componentWillUnmount() { this.keyboardWillShowSub.remove(); this.keyboardWillHideSub.remove(); } keyboardWillShow = (event) => { Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT_SMALL, }).start(); }; keyboardWillHide = (event) => { Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT, }).start(); }; render() { return (        ); } }; export default Demo;

לכל יישום היתרונות והחסרונות שלו - יהיה עליכם לבחור את המתאים ביותר בהתחשב בחוויית המשתמש אליה אתם מכוונים.

האם אתה מעוניין ללמוד עוד על השימוש ב- React Native לבניית אפליקציות מובייל באיכות גבוהה? הירשם לקורס React Native בחינם שלי!