نوشته های Hamed Alvandy

مدیریت کردن TextInput در ReactNative قمست 1

Hamed Alvandy — Wed, 15 Jul 2020 16:56:43 +0430

مدیریت کردن TextInput در ReactNativeسلامیه نکته خیلی باحال رو میخوام امروز بگم . فرض کنید شما یه فرم نوشتید که قرار یکسری اطلاعات رو از کاربر بگیره و زمان پر کردن هر فیلد شما میخوایید زمانی که ورود اطلاعات تمام شد یک عملیاتی روی اون دیتا انجام بدید . خب این رو میدونیم خیلی راحت با تابع یا تابع Text هرکدوم که در اون لحظه کارمون رو انجام میده انجام بدیم . خب تا اینجای کار همه چیز راحته بذارید یه مثال هم براش بزنیم : مثل حالت زیرimport React, { Component } from 'react';import { AppRegistry, TextInput } from 'react-native';export default class UselessTextInput extends Component { constructor(props) { super(props); this.state = { text: 'Useless Placeholder' }; } render() { return ( this.setState({text})} value={this.state.text} /> ); }}// skip this line if using Create React Native AppAppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);خب تا اینجا همه چی عالی هستش.حالا فرض کنید که قرار یکی از فیلدهاتون که کنترل کل فرم رو داره انجام میده به عنوان مثال کد ملی حتما باید چک بشه . شما اگر دستی فرم رو پر کنید که مشکلی ندارید امااااااااااااااااااااا اگر به صورت اتوماتیک بخوام فرمتون پر بشه ممکنه دیگه به راحتی بعد از از پر شدن اتوماتیک فرم روی مثلا فیلد کد ملی نمیتونید اعتبار سنجی رو به همین راحتی انجام بدید .خب برای این کار باید چیکار کرد ؟نگران نباشید الان میگم بهتون .خب فرم ما داره مقادیرش رو از STATE ها میگیره و پر میکنه بعد از پر کردن باید کاری کنیم که فرم به صورت اتوماتیک کار ولیدیت مثلا کد ملی رو انجام بده .این کار خیلی راحته ول از همه باید کاری کنید زمانی که وارد فرم شدید فیلد کد ملی روش Focuse بشه پس برای این کار من کامپوننتم رو به صورت زیر ست میکنم در اول کار : خب به همین راحتی مرحله اول انجام شد حالا برای اینکه اگر فیلدم پر شده بود به صورت اتوماتیک یه کارایی انجام بده خب به راحتی میام و کدم رو به صورت زیر درست می کنم { if(this.state.User.identification_number.length===10){ .... } }} />خب به همین راحتی .....امید وارم این آموزش مورد قبولتون بوده باشه تا بعد....

توسعه دهنده ReactNative هستید ؟obfuscate رو فراموش نکنید

Hamed Alvandy — Sun, 17 May 2020 16:42:24 +0430

زمانی که ما یک اپلیکیشن React Native رو می سازیم ٬کد های جاوای ما تو فایلی با فرمت dex کامپال میشه .این فرمت قابل فهم برای من و شما نیست اما بگونه ای طراحی شده است که قابل فهم برای دی کامپایلر ها باشد.به هر حال میدانیم جلو دی کامپایل شدن فایل های جاوا را نمیشه گرفت ولی میشه کاری کرد که این کار سخت تر بشه.برای سخت تر کردن کار پیشنهاد Android استفاده از فایل ProGuard که یکسری تنظیمات رو در قالب کد های کوتاه میشه در اون انجام داد .و حتی میتوان با تنظیمات ProGuard از قسمت های بلا استفاده برنامه خلاص شد و اندازه برنامه را بهینه تر کرد.همیشه امنیت رو باید برای اپلیکیشن های موبایل در نظر داشت . در React Native که بعضا ممکن است از کتابخانه های Native هم استفاده کنیم استفاده از این روش خالی از لطف نیست.چگونه کد اندروید خودم رو obfuscate کنم ؟تکه کد زیر را در فایل [app_name]/android/app/build.gradledef enableProguardInReleaseBuilds = true android { // other config omitted for brevity buildTypes { release { debuggable false shrinkResources enableProguardInReleaseBuilds zipAlignEnabled enableProguardInReleaseBuilds minifyEnabled enableProguardInReleaseBuilds useProguard enableProguardInReleaseBuilds setProguardFiles([getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro']) } } }اضافه کنید.در مرحله دوم باید خط های زیر رو در فایل [app_name]/android/app/proguard-rules.proبه صورت زیر کامنت کنید.# Disabling obfuscation is useful if you collect stack traces from production crashes # (unless you are using a system that supports de-obfuscate the stack traces). # -dontobfuscateیک نکته بسیار مهم که برای React Native خود گیت هاب ری اکت نیتیو یک فایل نمونه از Progurd داره که پیشنهاد میکنم حتما از اون استفاده کنید . من لینکش پایین می ذارم براتون : https://github.com/facebook/react-native/blob/master/ReactAndroid/proguard-rules.pro پیشنهاد دوم اینکه این کار رو هم برای حالت debug هم در گریدلتون انجام بدید چون ممکنه یکسری خطا ها رو دریافت کنید اینجوری بهتر میتونید حلش کنید.چگونه چک کنیم که ایا کد من obfuscated شده یا نه ؟شما به راحتی میتوانید توسط ابزار Apk آنالیز این کار را انجام دهید در خود Android Studio به مسیر زیر برید و روی apk.* کلیک کنید [app_name]/android/app/builds/outputs/apkفایل classes.dex رو پیدا کنید و روش کلیک کنید فایل classes.dex رو بازرسی کنید . اگر همه یا بخشی از کلاس ها و یا توابع نامشون به شکل زیر تغییر کرده پس فرایند obfuscated به درستی پیش رفته اخطار امنیتی دیکامپایل کردن کد اپلیکیشن اندروید شما ممکن است باعث لو رفتن کامل معماری سیتم شما شود . هرچند امنیت سمت بک اند از احمیت بیشتری برخوردار است اما سمت کلاینت یکی از کار های امنیتی که برای اپلیکیشن های اندروید میتوانید انجام دهید همین فرایند obfuscated می باشد .

خروج از اپلیکیشن ( ری اکت نیتیو)

Hamed Alvandy — Sun, 12 Apr 2020 10:24:58 +0430

همانطور که میدانیم با زدن دکمه های بک فیزیکی به صورت متمادی در یک اپلیکیشن بر اساس استک به وجود آمده برای نویگیت کردن ببین صفحات نهایتا با خالی شدن استک خروبرو شده و از برنامه خارج میشود . اما زمانی که ما این دکمه بک را از جایی شروع میکنیم به هندل کردن ممکن است برای خروج از اپلیکیشن خودمان دستبکار شویم . پیش فرض این نوشته زمانی هست که شما از reactnavigation برای روترینگ در اپلیکیشن خود در حال استفاده هستید . خب ساده ترین را ممکن است استفاده از دستور زیر باشد باشد برای فرمان خروج :this.props.navigation.back() یا خط کد زیر:this.props.navigation.goBack()اما مورد هایی که برخواهید خورد در مواردی که استک خالی باشد یا روترینگ هنوز شروع نشده باشد ممکن است استثنا پیش می آید و احتمال خروج از اپلیکیشن در مواردی را ندارد. خب یکی از راه حل ها استفاده از دستور زیر برای اطمینان در خروج می باشد :this.props.navigation.dispatch(NavigationActions.back())اما کد زمانی که اپلیکیشن لاگین را در هربار استفاده بخواهد و همیشه کاربر نیاز به رد کردن صفحه لاگین داشته باشد تنها کاری که میکند برمیگردد به صفحه لاگین اما اگر ما نیاز داشته باشیم که کلا از اپلیکیشن خارج شود بهترین راه چون دستی دکمه بک فیزیکی را هندل کرده ایم استفاده از کد زیر می باشد : BackHandler.exitApp()

خروج از از ری اکت نیتیو با زدن دو بار بک

Hamed Alvandy — Sat, 11 Apr 2020 17:19:55 +0430

دنبال یک روشی میگشتم که توی React_native و کتابخانه React_navigation بتونم دقیقا مثل Android Native بیام و دابل بک بذارم برای خروج از اپلیکیشن . خب ایده خوبی به نظر نمیاد ولی کار فرما میخواست این رو . به عنوان اولین راه حل رفتم سراغ BackHandler و هندل کردن توی componentWillUnmount و componentDidMount و اینجا متوجه شدم که کلا توی روش روتینگ من اصلا اجرا نمیشه زمان navigation کردن . کلی کتابخونه مختلف . redux و... تست کردم و یا روشم کلا به درد نمیخورد یا برای تغییر توی پروژه من زمان زیادی باید صرف میکردم . در نتیجه به راه حل جالبی رسیدم.مشکل دقیقا کجا بود؟مشکل زمانی بود که در componentDidMount وقتی که BackHandler.addEventListener رو ست میکردم تو بقیه کامپوننت هام همین رو هندل میکرد .خب راه حل های زیادی برای این کار هست بهترین راهش این که مثل من که کامپوننت بسازی به شکل زیر :import React, { Component } from "react";import { withNavigation } from "react-navigation";import { BackHandler } from "react-native";class HandleBack extends Component { constructor(props) { super(props); this.didFocus = props.navigation.addListener("didFocus", payload => BackHandler.addEventListener("hardwareBackPress", this.onBack), ); } componentDidMount() { this.willBlur = this.props.navigation.addListener("willBlur", payload => BackHandler.removeEventListener("hardwareBackPress", this.onBack), ); } onBack = () => { return this.props.onBack(); }; componentWillUnmount() { this.didFocus.remove(); this.willBlur.remove(); BackHandler.removeEventListener("hardwareBackPress", this.onBack); } render() { return this.props.children; }}export default withNavigation(HandleBack); حالا قدم بعدی فقط و فقط اینه به شکل زیر در کاپوننت اصلی یا همون home به شکل زیر فراخوانیش کنید {}}>

حالا دیگه میتونید به هر روشی که خواستید توی onBack هندل کنید . اینجوری دیگه بقیقه کاپوننت هاتون تحت تاثیر نخواهد بود.