حل مشکل  keyboard overlapping  در React Native

کامپوننت KeyboardAvoidingView برای جلوگیری از keyboard overlapping بر روی TextInput در React Native استفاده می شود.اگر به طور پیش فرض از KeyboardAvoidingView استفاده نکنیم ، صفحه کلید در بالای TextInput در Focus نشان داده می شود.اما اگر از KeyboardAvoidingView استفاده کنیم هنگامی که بر روی TextInput برای تایپ Focus میکنیم، صفحه کلید زیر TextInput قرار می گیرد و دیگر مشکلی برای تایپ نداریم.کامپوننت KeyboardAvoidingView نمی تواند به تنهایی استفاده شود و باید درون کامپوننت ScrollView قرار گیرد تا همه کامپوننت ها scrollable شوند. ایمپورت کامپوننت های StyleSheet, ScrollView, KeyboardAvoidingView, TextInput و View در فایل App.jsimport React, {Component} from 'react'; import { StyleSheet, ScrollView, KeyboardAvoidingView, TextInput, View } from 'react-native';ایجاد یک class به نام App.این class کامپوننت اصلی ما در برنامه خواهد بودexport default class App extends Component { }اضافه کردن کامپوننت View به بلاک render’s return. این کامپوننت والد(parent) ما برای children خواهد بودrender() { return ( <View style={styles.MainContainer}> </View> ); }اضافه کردن کامپوننت ScrollView با کامپوننت KeyboardAvoidingView و قرار دادن تمامی کامپوننت های TextInput درون KeyboardAvoidingView<ScrollView keyboardShouldPersistTaps=&quothandled&quot showsVerticalScrollIndicator={false}> <KeyboardAvoidingView enabled > <TextInput placeholder=&quotEnter Name here&quot style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TextInput placeholder=&quotEnter Name here&quot style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TextInput placeholder=&quotEnter Name here&quot style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TextInput placeholder=&quotEnter Name here&quot style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TextInput placeholder=&quotEnter Name here&quot style={styles.textInputStyle} underlineColorAndroid='transparent' /> </KeyboardAvoidingView> </ScrollView>کد کامل برنامه در فایل App.jsimport React, {Component} from 'react'; import { StyleSheet, ScrollView, KeyboardAvoidingView, TextInput, View } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.MainContainer}> <ScrollView keyboardShouldPersistTaps=&quothandled&quot showsVerticalScrollIndicator={false} > <KeyboardAvoidingView enabled > <TextInput placeholder=&quotEnter Name here&quot style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TextInput placeholder=&quotEnter Name here&quot style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TextInput placeholder=&quotEnter Name here&quot style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TextInput placeholder=&quotEnter Name here&quot style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TextInput placeholder=&quotEnter Name here&quot style={styles.textInputStyle} underlineColorAndroid='transparent' /> </KeyboardAvoidingView> </ScrollView> </View> ); } } const styles = StyleSheet.create({ MainContainer: { justifyContent: 'center', alignItems : 'center', padding: 12 }, textInputStyle: { height: 40, width: 300, textAlign: 'center', borderWidth: 2, borderColor: '#000', borderRadius: 8, marginTop: 50 }, });اگر این مقاله براتون مفید بود،اون رو با دوستان و همکاراتون به اشتراک بزارید.همچنین اگر قصد دارید مقالات تخصصی بیشتری در زمینه React Native مطالعه کنید پیشنهاد میکنم به بخش آموزش متنی سایت مراجعه کنید.اسکرین شات[منبع]