کار با flex در react native

سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری با flex در react native کار کنیم.با استفاده از flex ما میتونیم عرض و ارتفاع رو با توجه با اندازه صفحه نمایش دستگاه به صورت انعطاف پذیر مشخص کنیم.flex با مقدار عددی مشخص میشود به طور مثال flex:1.

در این آموزش متنی ما یک View والد با flex:1 اینجاد میکنیم.این استایل تمام عرض و ارتفاع صفحه را در بر میگیرد.سپس سه View فرزند را داخل View اصلی ایجاد میکنیم و با استفاده از flex عرض و ارتفاع را برای این سه View فرزند تقسیم میکنیم.

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.دادن استایل flex:1 به View والد

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

render() {

return (

</View>

);

}

5.اضافه کردن ۳ View داخل View والد

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

render() {

return (

</View>

);

}

6.تنظیم flex برای View های فرزند با استفاده از استایل

آیا Expo برای ساخت اپلیکیشن های React Native مناسب است؟

render() {
    return (
     <View style={{flex :1 }}>
 
        <View style={{flex :1, backgroundColor: '#FF5722'}} />
 
        <View style={{flex :2, backgroundColor: '#673AB7'}} />
 
        <View style={{flex :3, backgroundColor: '#FFEB3B'}} />
 
      </View>
    );
  }

render() {

return (

</View>

);

}

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

import React, { Component } from 'react';

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

class Myproject extends Component {
  render() {
    return (
     <View style={{flex :1 }}>

        <View style={{flex :1, backgroundColor: '#FF5722'}} />

        <View style={{flex :2, backgroundColor: '#673AB7'}} />

        <View style={{flex :3, 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>

);

}

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

اسکرین شات:

کار با flex در react native

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

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

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

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

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

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

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

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