تشخیص دستگاه Android و Ios در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری تشخیص بدیم که اپلیکیشن روی پلتفرم Android یا Iod اجرا میشه.ReactNative یک فریمورک برای ساخت اپلیکیشن های native برای پلتفرم های Android و Ios هست.گاهی اوقات لازمه که ما بدونیم قراره اپلیکیشن روی کدوم یکی از این پلتفرم ها اجرا بشه تا نمایش مختلفی براش درنظر بگیریم.
کامپوننت های مهم مخصوص پلتفرم Ios:
- DatePickerIOS
- NavigatorIOS
- PickerIOS
- ProgressViewIOS
- SegmentedControlIOS
- SnapshotViewIOS
- ActionSheetIOS
- AdSupportIOS
- AlertIOS
- ImagePickerIOS
- VibrationIOS
کامپوننت های مهم مخصوص پلتفرم Android:
- DrawerLayoutAndroid
- ProgressBarAndroid
- ToolbarAndroid
- ViewPagerAndroid
- BackAndroid
- DatePickerAndroid
- PermissionsAndroid
- TimePickerAndroid
- ToastAndroid
ReactNative یک کتابخانه اعجاب انگیز به نام Platform در اختیار توسعه دهنده ها قرار داده که با استفاده از این کتابخانه میشه تشخیص داد که اپلیکیشن بر روی کدوم پلتفرم در حال اجراست.
1.اضافه کردن کامپوننت های AppRegistry , StyleSheet , View , Text , Platform در بلاک import
|
1 2 3 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View, Text, Platform } from 'react-native'; |
2.اضافه کردن View در بلاک render return
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View style={styles.MainContainer}> ); } } |
3.ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 }, TextStyle: { fontSize: 24, color: "#000", textAlign: 'center' } }); |
4.اضافه کردن { } curly brackets به کامپوننت View.حالا درون براکت (Platform.OS === ‘ios’) رو قرار میدیم.
|
1 2 3 4 5 |
<View style={styles.MainContainer}> { (Platform.OS === 'ios') ? <Text style= {styles.TextStyle}> This is iOS Device. </Text> : <Text style= {styles.TextStyle}> This is Android Device. </Text> } </View> |
5.کد کامل برنامه در فایل index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View, Text, Platform } from 'react-native'; class MainProject extends Component { render() { return ( <View style={styles.MainContainer}> { (Platform.OS === 'ios') ? <Text style= {styles.TextStyle}> This is iOS Device. </Text> : <Text style= {styles.TextStyle}> This is Android Device. </Text> } </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 }, TextStyle: { fontSize: 24, color: "#000", textAlign: 'center' } }); AppRegistry.registerComponent('MainProject', () => MainProject); |
اسکرین شات در Ios:
اسکرین شات در Android:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید