تنظیم عرض و ارتفاع در react native

سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری width و height در react native رو با استفاده از استایل سفارشی تنظیم کنیم.بدون توجه به اندازه صفحه نمایش ما میتونیم ارتفاع ثابت با استفاده از استایل دهی تعریف کنیم.توجه داشته باشید که تمامی ابعاد در react native مستقل از تراکم هستند.

1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)

2.اضافه کردن کامپوننت های StyleSheet و View در بلاک import

import { AppRegistry, View, StyleSheet } from 'react-native';

1	import { AppRegistry, View, StyleSheet } from 'react-native';

3.اضافه کردن تگ View در بلاک render return

 render() {
    return (
     <View>
 
        
      </View>
    );
  }

render() {

return (

<View>

</View>

);

}

4.اضافه کردن 3 View داخل View اصلی

 render() {
    return (
     <View>
 
        <View>   </View>
 
        <View>   </View>
        
        <View>   </View>
 
      </View>
    );
  }

render() {

return (

<View>

</View>

);

}

5. اضافه کردن استایل inline به 3 View فرزند

 render() {
    return (
     <View>
 
        <View style={{ }} />
 
        <View style={{ }} />
        
        <View style={{ }} />
 
      </View>
    );
  }

render() {

return (

<View>

</View>

);

}

6.اضافه کردن width و height در style

نمایش Progress bar هنگام نمایش WebPage در react native

 render() {
    return (
     <View>
 
        <View style={{width: 50, height: 50, backgroundColor: '#FF5722'}} />
 
        <View style={{width: 100, height: 100, backgroundColor: '#673AB7'}} />
        
        <View style={{width: 150, height: 150, backgroundColor: '#FFEB3B'}} />
 
      </View>

render() {

return (

<View>

</View>

7.کد کامل برنامه در فایل index.js

import React, { Component } from 'react';
 
import { AppRegistry, View, StyleSheet } from 'react-native';
 
class Myproject extends Component {
  render() {
    return (
     <View>
 
        <View style={{width: 50, height: 50, backgroundColor: '#FF5722'}} />
 
        <View style={{width: 100, height: 100, backgroundColor: '#673AB7'}} />
        
        <View style={{width: 150, height: 150, backgroundColor: '#FFEB3B'}} />
 
      </View>
    );
  }
}
 
AppRegistry.registerComponent('Myproject', () => Myproject);

import React, { Component } from 'react';

import { AppRegistry, View, StyleSheet } from 'react-native';

class Myproject extends Component {

render() {

return (

<View>

</View>

);

}

AppRegistry.registerComponent('Myproject', () => Myproject);

اسکرین شات:

تنظیم عرض و ارتفاع در react native

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ