آموزش کار با TextInput در برنامه نویسی ریکت نیتیو

آموزش کار با TextInput در برنامه نویسی ریکت نیتیو

در خدمت شما هستیم با آموزش کار با TextInput در برنامه نویسی ریکت نیتیو از وب سایت آموزش برنامه نویسی سورس باران. در جلسه نهم آموزش ریکت نیتیو یاد میگیرید که چطور مقدار TextInput در ریکت نیتیو رو بگیرید و مقدار ورودی کاربر رو در قالب Alert Dialog نمایش بدید. TextInput برای بدست آوردن Value از کاربر در ReactNative استفاده میشود.

با استفاده از این مثال افرادی که تازه شروع به یادگیری ReactNative کرده اند به راحتی میتوانند کار با Stateها و Propsها رو یاد بگیرند. با ما همراه باشید…

آموزش کار با TextInput در ریکت نیتیو

کامپوننت Home ورودی ها را import کرده و رندر می کند.

 

ورودی ها در ریکت نیتیو

ما initial state را تعریف خواهیم کرد. پس از تعریف initial state ،ما handleEmail و توابع handlePassword را ایجاد خواهیم کرد. این توابع برای به روز رسانی وضعیت یا state استفاده می شود. تابع ()login فقط مقدار وضعیت کنونی را اعلام می کند. ما همچنین برخی از خواص دیگر را به ورودی های متن اضافه می کنیم تا نوشتن با حروف بزرگ به صورت خودکار غیرفعال شود، حاشیه پایین را در دستگاه های Android حذف کنیم و یک placeholder جایگزین کنیم.

هر بار که ما در یکی از فیلد های ورودی تایپ می کنیم، وضعیت به روز می شود. هنگامی که ما بر روی دکمه Submit کلیک می کنیم، متن از ورودی ها در داخل جعبه محاوره نمایش داده خواهد شد.

هر بار که ما در یکی از فیلدهای ورودی تایپ می کنیم، وضعیت به روز می شود. هنگامی که ما بر روی دکمه Submit کلیک می کنیم، متن از ورودی ها در داخل جعبه محاوره نمایش داده خواهد شد.

 

آموزش 2 کار با TextInput در برنامه نویسی ریکت نیتیو

ابتدا یک پروژه جدید ایجاد نمایید. سپس AppRegistry, StyleSheet, ScrollView, TextInput, View, Alert,Button را در بلاک import اضافه کنید.

ایجاد Constructor در کلاس اصلی با پارامتر props

اضافه کردن متد super درون Constructor با پارامتر props

.اضافه کردن this.state در Constructor و قرار دادن ‘ ‘= TextInputValueHolder بدون هیچ مقداری.برای کنترل داده هایی که در حال تغییر هستند در اپلیکیشن های ReactNative از state استفاده میکنیم.

ایجاد یک تابع به نام GetValueFunction . دراین تابع ما یک متغیر از نوع const به نام TextInputValueHolder ایجاد میکنیم و مقدارش رو برابر با this.state خودش قرار میدیم.بعد از گرفتن مقدار متغیر ما این مقدار رو در قالب یک Alert Dialog نمایش میدیم.

اضافه کردن کامپوننت View در بلاک render return

ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent و ایجاد یک استایل اختصاصی به نام MainContainer

استفاده از استایل MainContainer در View

اضافه کردن کامپوننت TextInputدرون View.متد onChangeText مقدار state رو هر بار که کاربر چیزی را تایپ میکند،بروزرسانی میکند و با استفاده از inline style ما text alignment رو مرکز در نظر گرفته ایم و ارتفاع TextInput رو 50 مشخص کرده ایم.

اضافه کردن کامپوننت Button درون View درست زیر کامپوننت TextInput و فراخوانی تابع GetValueFunction در onPress of button.

کد کامل برنامه در فایل index.js

اسکرین شات

لیست جلسات قبل آموزش React Native

  1. React Native یا ریکت نیتیو چیست؟
  2. آموزش React Native – نصب و تنظیم محیط React Native
  3. آموزش App در React Native
  4. آموزش کار با State در React Native
  5. آموزش کار با کامپوننت Props در React Native
  6. آموزش استایل دهی در برنامه نویسی React Native
  7. آموزش flex در برنامه نویسی react native
  8. آموزش لیست ویو در برنامه نویسی React Native