React Native – 15 مؤلفه اصلی

React Native یک فریمورک قدرتمند و محبوب است که توسط فیس بوک توسعه یافته است که به توسعه دهندگان این امکان را می دهد ساخت اپلیکیشن موبایل با استفاده از جاوا اسکریپت و React.

یکی از مزایای کلیدی React Native توانایی آن در ایجاد برنامه های کاربردی واقعی برای iOS و Android با استفاده از یک پایگاه کد واحد است. این از طریق مجموعه‌ای از مؤلفه‌های اصلی ارائه‌شده توسط فریم‌ورک، که شکاف بین توسعه وب و توسعه برنامه بومی را پر می‌کند، به دست می‌آید. این اجزای اصلی به گونه‌ای طراحی شده‌اند که انعطاف‌پذیر و کارآمد باشند و به توسعه‌دهندگان این امکان را می‌دهند که طیف گسترده‌ای از برنامه‌های کاربردی تلفن همراه را با ظاهر و احساس بومی ایجاد کنند.

در این بررسی اجمالی، ما 15 مورد از مهم‌ترین مؤلفه‌های اصلی React Native را بررسی می‌کنیم و عملکردها، موارد استفاده و مثال‌هایی را برای تسلط بر توسعه اپلیکیشن موبایل با React Native برجسته می‌کنیم.

1. مشاهده کنید

را View کامپوننت در React Native یک کامپوننت کانتینری اساسی است که از سبک های طرح بندی مختلف پشتیبانی می کند. معادل a است div عنصر در HTML است و می تواند برای ایجاد و استایل کردن کانتینرها برای عناصر مختلف استفاده شود.

در اینجا مثالی از نحوه استفاده از آن آورده شده است View جزء:

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

function App() {
  return (
    
      Hello, World!
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fffff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

2. جزء متن

را Text کامپوننت یک عنصر اساسی در React Native است که برای نمایش محتوای متنی روی صفحه استفاده می شود. در حالی که دارای برخی از ویژگی های ظاهری اولیه است، معمولاً آن را در داخل اجزای دیگر قرار می دهید (به عنوان مثال، View) برای ایجاد رابط های کاربری پیچیده تر.

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const SimpleText = () => {
  return (
     alert('Hello')}>
      This is an example of a Text component in React Native. Tap on me!
    
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: 'blue',
    textAlign: 'center',
    margin: 10,
    fontFamily: 'Arial',
  },
});

export default SimpleText;

3. ورودی متن

TextInput یک جزء اصلی در React Native است که به کاربر اجازه می دهد متن را وارد کند. معمولاً برای جمع‌آوری داده‌های کاربر، مانند ایمیل‌ها یا رمزهای عبور، استفاده می‌شود. شما می توانید ظاهر آن را سفارشی کنید TextInput با استفاده از وسایل مختلف مانند placeholder، multiline، maxLength، و بیشتر.

در اینجا یک مثال اساسی از استفاده است TextInput:

import React, { useState } from 'react';
import { TextInput, View, Button } from 'react-native';

const App = () => {
  const [text, setText] = useState('');

  const handleSubmit = () => {
    alert('You entered: ' + text);
  };

  return (
    
       setText(text)}
        value={text}
        placeholder="Enter text here"
      />
      
    
  );
};

4. دکمه

آ Button یک جزء داخلی React Native است که برای ایجاد دکمه های قابل کلیک استفاده می شود. این یک جزء ساده، قابل تنظیم و آسان برای استفاده است که لمس می کند و باعث تحریک آن می شود onPress رویداد هنگام فشار دادن

در اینجا یک مثال ساده از نحوه ایجاد a آورده شده است Button در React Native:

import React from 'react';
import { Button } from 'react-native';

const MyButton = () => {
  const onPressHandler = () => {
    alert('Button Pressed');
  };

  return (
    
  );
};

export default MyButton;

5. تصویر

را Image جزء برای نمایش تصاویر در برنامه React Native استفاده می شود. این به شما امکان می دهد تصاویر محلی و همچنین از راه دور را بارگیری و نمایش دهید، و ابزارها و روش های ضروری را برای مدیریت و سفارشی سازی بهتر تصویر ارائه می دهد.

برای استفاده از Image جزء، باید آن را از «react-native» وارد کنید:

import { Image } from 'react-native';

برای نمایش یک تصویر محلی در برنامه، باید آن را در منبع اصلی برنامه مورد نیاز قرار دهید Image جزء. فایل تصویر را در دایرکتوری پروژه خود قرار دهید و از دستور زیر استفاده کنید:

برای نمایش یک تصویر از راه دور از یک URL، باید پایه منبع را با a تنظیم کنید uri هدف – شی:

به خاطر داشته باشید که هنگام استفاده از تصاویر از راه دور باید ابعاد (عرض و ارتفاع) را مشخص کنید:

6. SafeAreaView

SafeAreaView یک مؤلفه اصلی React Native است که به تنظیم عناصر رابط کاربری و طرح‌بندی برنامه‌تان کمک می‌کند تا بریدگی‌ها، لبه‌های منحنی یا نشانگر خانه را در دستگاه‌های iOS تنظیم کنید. این تضمین می کند که محتوا در قسمت قابل مشاهده صفحه نمایش ارائه می شود.

در اینجا یک مثال از استفاده است SafeAreaView در کد:

import React from 'react';
import { SafeAreaView, StyleSheet, Text } from 'react-native';

const App = () => {
  return (
    
      Hello World!
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

7. Scroll View

در React Native، ScrollView یک محفظه اسکرول عمومی است که برای ارائه نمای قابل پیمایش به اجزای فرزند خود استفاده می شود. زمانی که نیاز دارید محتوای قابل پیمایش را بزرگتر از صفحه نمایش دهید، مانند لیست ها، تصاویر یا متن مفید است. آ ScrollView برای کارکرد صحیح باید ارتفاع محدودی داشته باشد.

در اینجا یک مثال ساده از نحوه استفاده از آن آورده شده است ScrollView جزء در برنامه React Native شما:

import React from 'react';
import { ScrollView, Text } from 'react-native';

const MyScrollView = () => {
  return (
    
      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
      Item 6
    
  );
}

export default MyScrollView;

8. FlatList

FlatList یک مؤلفه اصلی React Native است که فهرستی از داده‌های در حال تغییر، اما ساختاری مشابه را نمایش می‌دهد. این یک جزء لیست کارآمد است که از یک پیمایش محدود استفاده می کند renderWindow، کاهش ردپای حافظه و ایجاد اسکرول صاف. علاوه بر این، FlatList پشتیبانی از سرصفحه، پاورقی، کشش برای تازه کردن، و اسکرول افقی، در میان چیزهای دیگر.

در اینجا یک مثال اساسی است که نحوه استفاده از آن را نشان می دهد FlatList جزء:

import React from 'react';
import { FlatList, View, Text } from 'react-native';

const data = [
  { id: '1', content: 'Item 1' },
  { id: '2', content: 'Item 2' },
  { id: '3', content: 'Item 3' },
  // ...
];

const renderItem = ({ item }) => (
  
    {item.content}
  
);

const MyFlatList = () => (
   item.id}
  />
);

export default MyFlatList;

9. سوئیچ

آ Switch یک مؤلفه اصلی در React Native است که برای پیاده‌سازی ورودی «تغییر» یا «روشن خاموش» استفاده می‌شود. این یک رابط کاربری برای کاربر فراهم می کند تا بین دو حالت مختلف جابجا شود، معمولا درست یا نادرست. مورد استفاده اولیه فعال یا غیرفعال کردن یک ویژگی یا تنظیمات در یک برنامه است.

Switch جزء دارای یک بولی است value prop (درست برای روشن، غلط برای خاموش) و an onValueChange کنترل کننده رویداد، که هر زمان که کاربر سوئیچ را تغییر می دهد، فعال می شود.

در اینجا مثالی از نحوه استفاده آورده شده است Switch در یک برنامه React Native:

import React, {useState} from 'react';
import {View, Switch, Text} from 'react-native';

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);

  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    
      Enable Feature:
      
    
  );
};

export default App;

10. معین

آ Modal مؤلفه ای است که محتوا را در بالای نمای فعلی نمایش می دهد و پوششی ایجاد می کند که می تواند برای اهداف مختلف مانند نمایش اطلاعات اضافی، پیام های تأیید یا منوی انتخاب استفاده شود.

import React, {useState} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    
       {
          Alert.alert('Modal has been closed.');
          setModalVisible(!modalVisible);
        }}>
        
          
            Hello, I am a Modal!

             {
                setModalVisible(!modalVisible);
              }}>
              Hide Modal
            
          
        
      

       {
          setModalVisible(true);
        }}>
        Show Modal
      
    
  );
};

export default App;

11. قابل فشار دادن

Pressable یک مؤلفه اصلی در React Native است که باعث می شود هر نما به درستی به رویدادهای لمس یا فشار دادن پاسخ دهد. طیف گسترده ای از کنترل کننده های رویداد را برای مدیریت تعاملات کاربر، مانند onPress، onPressIn، onPressOut، و onLongPress. با Pressable، می‌توانید دکمه‌ها، کارت‌ها یا هر عنصر قابل لمسی را در برنامه خود ایجاد کنید.

import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

export default function CustomButton() {
  return (
     console.log('Pressed!')}
      style={({ pressed }) => [
        styles.button,
        pressed ? styles.pressedButton : styles.normalButton,
      ]}
    >
      Press me
    
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 10,
    borderRadius: 5,
  },
  normalButton: {
    backgroundColor: 'blue',
  },
  pressedButton: {
    backgroundColor: 'darkblue',
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
  },
});

12. TouchableOpacity

در React Native، کامپوننت‌های Touchable برای مدیریت تعاملات کاربر مانند ضربه زدن، فشار طولانی و دو بار ضربه زدن روی عناصر مناسب استفاده می‌شوند.
TouchableOpacity است کدورت نمای بسته بندی شده زمانی که فعال است کاهش می یابد.

import { TouchableOpacity } from 'react-native';

 {
    alert('Tapped!');
  }}
>
  Tap me

13. شاخص فعالیت

را ActivityIndicator یک مؤلفه اصلی در React Native است که یک نشانه بصری ساده از برخی فعالیت های در حال انجام یا وضعیت بارگذاری در برنامه شما ارائه می دهد. این یک انیمیشن چرخان را نشان می دهد که به کاربر بازخورد می دهد که چیزی در پس زمینه اتفاق می افتد. این مؤلفه به ویژه هنگام واکشی داده ها از یک منبع خارجی مانند سرور یا هنگام انجام عملیات وقت گیر مفید است.

برای استفاده از مؤلفه ActivityIndicator، کافی است آن را از «react-native» وارد کنید و آن را به درخت مؤلفه خود اضافه کنید. شما می توانید ظاهر و رفتار آن را سفارشی کنید ActivityIndicator با ارائه ابزارهای اختیاری مختلف، مانند متحرک سازی، رنگ و اندازه.

در زیر مثالی از نحوه استفاده از آن آورده شده است ActivityIndicator کامپوننت در یک جزء عملکردی React:

import React from 'react';
import { ActivityIndicator, View, Text } from 'react-native';

const LoadingScreen = () => (
  
    Loading, please wait...
    
  
);

export default LoadingScreen;

14. نوار وضعیت

را StatusBar جزء برای کنترل ظاهر نوار وضعیت در بالای صفحه استفاده می شود. ممکن است کمی غیرعادی به نظر برسد زیرا برخلاف سایر مؤلفه‌های React Native، هیچ محتوای قابل مشاهده‌ای ارائه نمی‌کند. در عوض، برخی از ویژگی‌های بومی را تنظیم می‌کند که می‌توانند به شخصی‌سازی ظاهر نوارهای وضعیت در Android، iOS یا سایر پلتفرم‌ها کمک کنند.

برای استفاده از StatusBar کامپوننت، باید آن را از «react-native» وارد کرده و در کامپوننت React خود استفاده کنید. در اینجا یک مثال است:

import React from 'react';
import { View, StatusBar } from 'react-native';

const App = () => {
  return (
    
      
      {/* Your other components */}
    
  );
};

export default App;

15. SectionList

SectionList مؤلفه ای است که برای رندر بخش ها و سرصفحه ها در نمای پیمایشی استفاده می شود. به مدیریت و بهینه سازی لیست بزرگی از موارد تقسیم شده به دسته ها کمک می کند. یکی از لیست است View اجزای ارائه شده توسط React Native به همراه FlatList.

تفاوت کلیدی بین SectionList و FlatList آن است SectionList اقلام داده را به بخش هایی با سرصفحه جدا می کند.

در اینجا مثالی از نحوه استفاده از a آورده شده است SectionList در برنامه شما:

import React, {Component} from 'react';
import {SectionList, StyleSheet, Text, View, SafeAreaView} from 'react-native';

export default class App extends Component {
  render() {
    return (
      
         {item}}
          renderSectionHeader={({section}) => (
            {section.title}
          )}
          keyExtractor={(item, index) => String(index)}
        />
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingRight: 10,
    paddingLeft: 10,
  },
  sectionHeader: {
    fontSize: 20,
    fontWeight: 'bold',
    backgroundColor: 'lightgrey',
    padding: 5,
  },
  item: {
    fontSize: 16,
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: 'black',
  },
});