تشخیص حالت صفحه در react native
سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم که چجوری حالت صفحه device رو در React Native تشخیص بدیم.دو نوع حالت صفحه در گوشی های موبایل وجود داره.حالت پیشفرض Portrait هست که در این حالت ارتفاع صفحه از عرض صفحه بیشتره و حالت دوم Landscape هست که بعد از چرخیدن (rotating) عرض صفحه از ارتفاع بیشتر میشه.بنابراین در این آموزش ما قصد داریم یک اپلیکیشن با استفاده از onLayout و بدون restart اپلیکیشن ایجاد کنیم که حالت صفحه رو بین Portrait و Landscape بصورت realtime تشخیص بده.ما از یک فرمول ساده برای تشخیص با استفاده از عرض و ارتفاع صفحه استفاده میکنیم و با توجه به بزرگی یا کوچکی عرض از ارتفاع حالت Portrait یا Landscape رو تشخیص میدیم
1.ایمپورت کردن کامپوننت های StyleSheet, View و Text در پروژه
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; |
2.ایجاده constructor در کلاس اصلی. تعریف 3 متغیر OrientationStatus, Height_Layou و Width_Layout با استفاده از state بدون مقداراولیه.
OrientationStatus: برای نگه داشتن حالت Portrait یا Landscape
Height_Layout: برای نگه داشتن ارتفاع صفحه
Width_Layout: برای نگه داشتن عرض صفحه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
constructor(){ super(); this.state = { OrientationStatus : '', Height_Layout : '', Width_Layout : '', } } |
3. ایجاد یک تابع به نام ()DetectOrientation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
DetectOrientation(){ if(this.state.Width_Layout > this.state.Height_Layout) { // Write Your own code here, which you want to execute on Landscape Mode. this.setState({ OrientationStatus : 'Landscape Mode' }); } else{ // Write Your own code here, which you want to execute on Portrait Mode. this.setState({ OrientationStatus : 'Portrait Mode' }); } } |
4.ایجاد یک Root View در بلاک render’s return. در این View با استفاده از onLayout ما عرض و ارتفاع صفحه رو محاسبه میکنیم و مقدار متغیرهای Height_Layout و Width_Layout رو بروزرسانی میکنیم و تابع ()DetectOrientation رو فراخوانی میکنم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
render() { return ( <View style={styles.MainContainer} onLayout={(event) => this.setState({ Width_Layout : event.nativeEvent.layout.width, Height_Layout : event.nativeEvent.layout.height }, ()=> this.DetectOrientation())}> </View> ); } |
5. حالا یک کامپوننت Text درون View اصلی اضافه میکنیم.این کامپوننت مقدار متغیر OrientationStatus رو نشون میده.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
render() { return ( <View style={styles.MainContainer} onLayout={(event) => this.setState({ Width_Layout : event.nativeEvent.layout.width, Height_Layout : event.nativeEvent.layout.height }, ()=> this.DetectOrientation())}> <Text style={styles.TextStyle}> { this.state.OrientationStatus } </Text> </View> ); } |
6. ایجاد چرخه حیات ()componentDidMount و فراخوانی تابع ()DetectOrientation
|
1 2 3 4 5 |
componentDidMount(){ this.DetectOrientation(); } |
7.ایجاد استایل
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 10 }, TextStyle :{ fontSize : 20, color : '#000' } }); |
8.کد کامل برنامه در فایل App.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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; export default class App extends Component<{}> { constructor(){ super(); this.state = { OrientationStatus : '', Height_Layout : '', Width_Layout : '', } } componentDidMount(){ this.DetectOrientation(); } DetectOrientation(){ if(this.state.Width_Layout > this.state.Height_Layout) { // Write Your own code here, which you want to execute on Landscape Mode. this.setState({ OrientationStatus : 'Landscape Mode' }); } else{ // Write Your own code here, which you want to execute on Portrait Mode. this.setState({ OrientationStatus : 'Portrait Mode' }); } } render() { return ( <View style={styles.MainContainer} onLayout={(event) => this.setState({ Width_Layout : event.nativeEvent.layout.width, Height_Layout : event.nativeEvent.layout.height }, ()=> this.DetectOrientation())}> <Text style={styles.TextStyle}> { this.state.OrientationStatus } </Text> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 10 }, TextStyle :{ fontSize : 20, color : '#000' } }); |
اسکرین شات در نسخه اندروید:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید