آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کدهای پلتفرم - محور برای React Native Apps

دوره های مرتبط با این مقاله

کدهای پلتفرم - محور برای React Native Apps

هنگام ساخت یک application که روی پلتفرم های مختلف قابلیت اجرا دارد، می خواهیم تا جایی که ممکن است از کدهای یکسان در بخش های مختلف بارها استفاده کنیم. با این حال، سناریوهای زیادی ممکن است پیش بیاید که در آن کدها باید متفاوت باشند، برای مثال ممکن است بخواهیم المان های بصری متفاوتی برای application android و iOS خود استفاده کنیم.

React Native دو روش برای سازماندهی به کد و جدا کردن آن براساس پلتفرم در اختیار می گذارد:


  • استفاده از Platform module
  • استفاده از platform-specific file extensions

بعضی component ها ممکن است ویژگی هایی داشته باشند که فقط روی یک پلتفرم کار کند. همه این ویژگی ها با @platform نشانه گذاری شده اند.

Platform module

React Native ماژولی در اختیار می گذارد که پلتفرمی که application در آن درحال اجراست را، شناسایی می کند. می توانید از این منطق برای نوشتن کدهای پلتفرم - محور خود استفاده کنید. این روش را فقط زمانی بکار ببرید که بخش کوچکی از component پلتفرم - محور است.


import {Platform, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

هنگام اجرای application روی iOS، Platform.OS برابر ios خواهد بود و هنگام اجرا روی android برابر android خواهد بود.

همچنین یک متد Platform.select هم موجود است، که اگر object حاوی Platform.OS ، به عنوان ورودی به آن بدهیم، مقداری را برمی گرداند که مختص پلتفرمی است که کد روی آن درحال اجراست.


import {Platform, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

نتیجه ی این کد یک container است که روی هر دو پلتفرم flex: 1 دارد، و روی iOS یک background قرمز، و روی application یک background آبی خواهد داشت.

از آنجا که هر مقداری می گیرد، می توانید از آن برای برگرداندن component هم استفاده کنید، برای مثال:


const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();
;

تشخیص نسخه application

در application، ماژول Platform میتواند برای شناسایی نسخه android که application روی آن درحال اجراست، استفاده شود.


import {Platform} from 'react-native';
if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}

تشخیص نسخه iOS

در iOS، Version خروجی -[UIDevice systemVersion] است، که رشته ای حاوی version فعلی OS آن است. یک نمونه از version سیستم "10.3" است. برای مثال، برای تشخیص major version number در iOS:


import {Platform} from 'react-native';
const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS < = 9) {
  console.log('Work around a change in behavior');
}

Platform-specific extensions

وقتی کد پلتفرم - محور پیچیده ای دارید، بهتر است کدها را در فایل های جداگانه بگذارید. React Native فایل های با پسوند .ios. و .android. را تشخیص می دهد و هنگام نیاز، آن ها را در پلتفرم مختص خودشان load می کند. برای مثال، فرضا دو فایل زیر را در پروژه خود دارید:

    BigButton.ios.js
    BigButton.android.js

می توانید component را به صورت زیر به کار ببرید:


import BigButton from './BigButton';

React Native به صورت اتوماتیک براساس پلتفرمی که کد روی آن درحال اجراست، فایل مناسب را استفاده می کند.

Native-specific extensions (اشتراک کد با NodeJS و وب)

هنگامی که می خواهید یک ماژول بین NodeJs/Web و React Native مشترکا استفاده شود، اما درمورد Android/iOS بودن پلتفرم حساسیتی ندارید، می توانید از پسوند .native.js استفاده کنید. این مورد بخصوص هنگامی کاربرد دارد که پروژه ای کد مشترک بین React Native و ReactJS دارد.

برای مثال، فایل های زیر را در پروژه ای دارید:

 # picked up by Webpack, Rollup or any other Web bundler
 Container.js
 Container.native.js
 # picked up by the React Native bundler for both Android and iOS (Metro)
                        

می توانید همچنان آن را بدون پسوند .native، اصطلاحا require کنید:


import Container from './Container';

نکته : برای اینکه از داشتن کدهای بی استفاده در فاز تولید پروژه جلوگیری کنید، Web bundler خود را به گونه ای config کنید که پسوند .native.js را نادیده بگیرد. این کار موجب کاهش سایز bundle نیز می شود.

  • 359
  •    0
  • تاریخ ارسال :   1398/05/31

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .