حل مشکل 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.js

import 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.js

import 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 مطالعه کنید پیشنهاد میکنم به بخش آموزش متنی سایت مراجعه کنید.

اسکرین شات

[منبع]