گرفتن Device Height Width در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری Height و Width یک device رو در ReactNative بگیریم.ReactNative بطور پیشفرض یک کلاس به نام Dimensions در اختیاد توسعه دهندگان قرار داده.با استفاده از Dimensions ما میتونیم ارتفاع(Height )وعرض(Width) گوشی موبایل رو بگیریم.در ادامه با من همراه باشید تا قدم به قدم با استفاده از button عرض و ارتفاع گوشی موبایل رو بدست بیاریم.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن کامپوننت هایAppRegistry, StyleSheet, Text, View, Button, Dimensions , Alert در بلاک import
3.ایجاد یک تابع به نام ()GetHeightFunction.این تابع برای گرفتن ارتفاع با استفاده از Dimensions.get(‘window’).height مورد استفاده قرار میگیرد.
|
1 2 3 4 5 6 |
GetHeightFunction = () => { const Height_Holder = Dimensions.get('window').height; Alert.alert("Device Height: " + Height_Holder); } |
4.ایجاد یک تابع به نام ()GetWidthFunction برای گرفتن عرض device
|
1 2 3 4 5 6 |
GetWidthFunction = () => { const Width_Holder = Dimensions.get('window').width; Alert.alert("Device Width: " + Width_Holder); } |
5.اضافه کردن View در بلاک render return
|
1 2 3 4 |
<View style={styles.MainContainer}> </View> |
6.اضافه کردن دو View فرزند درون View اصلی.هر View فرزند دارای یک کامپوننت Button است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<View style={styles.MainContainer}> <View style={styles.ButtonStyle}> </View> <View style={styles.ButtonStyle}> </View> </View> |
7.فراخوانی توابع ()GetHeightFunction و ()GetWidthFunction در رویداد onPress هر یک از button ها.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<View style={styles.MainContainer}> <View style={styles.ButtonStyle}> <Button title = "Click Here To Show Device Height" onPress = { this.GetHeightFunction }/> </View> <View style={styles.ButtonStyle}> <Button title = "Click Here To Show Device Width" onPress = { this.GetWidthFunction } /> </View> </View> |
8.ایجاد استایل سفارشی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor: '#F5FCFF', margin: 10, }, ButtonStyle: { margin: 10 } }); |
9.کد کامل برنامه در فایل 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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Button, Dimensions,Alert } from 'react-native'; export default class Project extends Component { GetHeightFunction = () => { const Height_Holder = Dimensions.get('window').height; Alert.alert("Device Height: " + Height_Holder); } GetWidthFunction = () => { const Width_Holder = Dimensions.get('window').width; Alert.alert("Device Width: " + Width_Holder); } render() { return ( <View style={styles.MainContainer}> <View style={styles.ButtonStyle}> <Button title = "Click Here To Show Device Height" onPress = { this.GetHeightFunction }/> </View> <View style={styles.ButtonStyle}> <Button title = "Click Here To Show Device Width" onPress = { this.GetWidthFunction } /> </View> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor: '#F5FCFF', margin: 10, }, ButtonStyle: { margin: 10 } }); AppRegistry.registerComponent('Project', () => Project); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید