مشکلات صفحه کلید داخل ScrollView در React Native

در این مطلب من قصد دارم دو ویژگی مفید که هنگام استفاده از صفحه کلید native در TextInputنمایش داده میشود را معرفی کنم.هنگامی که از TextInput برای واردکردن اطلاعات استفاده میکنید،صفجه کلید باز می شود و اندازه ای رو در صفحه اشغال میکند.

زمانی که از TextInput درون ScrollView استفاده میکنیم،چندین مشکل زمان باز شدن صفحه کلید ایجاد میشود.

مشکل 1:Button باید دو بار کلیک شود

زمانی که صفحه کلید باز میشود شما برای بسته شدن باید هر جایی از صفحه رو دوبار لمس یا کلیک کنید.دفعه اول که شما بر روی صفحه خارج از TextInput ضربه میزنید،صفحه کلید محو میشود و در ضربه بعدی عملیات ها فعال میشوند.

به عکس زیر توجه کنید:

راه حل: keyboardShouldPersistTaps

یک prop باید به ScrollView تحت عنوان keyboardShouldPersistTaps داده شود.این راه حل مشکل دوبار ضربه بر روی صفحه را حل میکند و تضمین میکند که دیگر این مشکل رخ ندهد.

<ScrollView keyboardShouldPersistTaps='always'>

<TextInput
     style={styles.textContainer}
     placeholder={'Add Your Text Here'}
     textAlignVertical={'top'}
     multiline={true}
     onChangeText={(text) => 
     this.setState({addNoteText: text})}
     value={this.state.addNoteText} 
     autoCorrect={true} />

</ScrollView>

<TextInput

style={styles.textContainer}

placeholder={'Add Your Text Here'}

textAlignVertical={'top'}

multiline={true}

onChangeText={(text) =>

this.setState({addNoteText: text})}

value={this.state.addNoteText}

autoCorrect={true} />

</ScrollView>

عکس زیر بعد از حل شدن مشکل را نشان میدهد:

در مثال بالا ،keyboardShouldPersistTaps باید با always مقدار دهی شود.این مقدار تضمین میکند که keyboard بصورت خودکار محو نشود.این property همچنین میتواند مقادیر دیگری بگیرد که بستگی به نوع اپلیکیشنی دارد که شما طراحی میکنید:

'never'
'handled'

مشکل 2 :صفحه کلید هنگام scroll صفحه محو نمیشود.

یکی از مشکلاتی دیگه ای که من بهش برخوردم اینکه زمان scroll صفحه کلید محو نمی شود و باید حتما بر روی صفحه خارج از TextInput ضربه زده بشه تا صفحه کلید dismiss بشه.ضربه زدن برای محو شدن صفحه کلید تجربه جالبی نیست و خوشبختانه React Native این مشکل رو حل کرده.

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

راه حل : keyboardDismissMode

یک property به نام keyboardDismissMode باید به ScrollView داده شود.تنظیم این مقدار این تضمین را میدهد که با scroll صفحه کلید محو میشود.

<ScrollView keyboardDismissMode='on-drag'>

<TextInput
     style={styles.textContainer}
     placeholder={'Add Your Text Here'}
     textAlignVertical={'top'}
     multiline={true}
     onChangeText={(text) => 
     this.setState({addNoteText: text})}
     value={this.state.addNoteText} 
     autoCorrect={true} />

</ScrollView>

<TextInput

style={styles.textContainer}

placeholder={'Add Your Text Here'}

textAlignVertical={'top'}

multiline={true}

onChangeText={(text) =>

this.setState({addNoteText: text})}

value={this.state.addNoteText}

autoCorrect={true} />

</ScrollView>

منبع : medium

مشکلات صفحه کلید داخل ScrollView در React Native

مشکل 1:Button باید دو بار کلیک شود

راه حل: keyboardShouldPersistTaps

مشکل 2 :صفحه کلید هنگام scroll صفحه محو نمیشود.

راه حل : keyboardDismissMode

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

مشکل 1:Button باید دو بار کلیک شود

راه حل: keyboardShouldPersistTaps

مشکل 2 :صفحه کلید هنگام scroll صفحه محو نمیشود.

راه حل : keyboardDismissMode

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

نمایش عکس های گوشی در react native (ری اکت نیتیو)

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ