آموزش اولین برنامه React Native خود را ایجاد کنید

سرفصل ها و درس ها

شروع شدن Getting Started

• معرفی Introduction

• در حال نصب React Native Installing React Native

• سازمان پروژه Project Organization

• سازمان پروژه Project Organization

• کد منبع Source Code

• نسخه های بسته Package Versions

• نسخه های بسته Package Versions

• ایجاد صفحات اصلی Creating the Basic Screens

• ایجاد صفحات اصلی Creating the Basic Screens

شروع شدن Getting Started

• معرفی Introduction

• در حال نصب React Native Installing React Native

• کد منبع Source Code

ساخت لیست مخاطبین Building the Contact List

• اطلاعات مخاطبین The Contacts Data

• نمای کلی API: جزء FlatList API Overview: FlatList Component

• تمرین: یک FlatList پایه ایجاد کنید Exercise: Create a Basic FlatList

• تمرین: یک FlatList پایه ایجاد کنید Exercise: Create a Basic FlatList

• پیاده سازی: یک FlatList پایه ایجاد کنید Implementation: Create a Basic FlatList

• سازماندهی فهرست اجزاء Organizing the Component Directory

• سازماندهی فهرست اجزاء Organizing the Component Directory

• نمای کلی API: StyleSheet و Flexbox API Overview: StyleSheet & Flexbox

• نمای کلی API: StyleSheet و Flexbox API Overview: StyleSheet & Flexbox

• نمای کلی API: پلتفرم API Overview: Platform

• نمای کلی API: پلتفرم API Overview: Platform

• ایجاد توابع کمکی Creating the Helper Functions

• نصب React Native Vector Icons Installing React Native Vector Icons

• نصب React Native Vector Icons Installing React Native Vector Icons

• نمای کلی API: مؤلفه نماد API Overview: Icon Component

• نمای کلی API: مؤلفه نماد API Overview: Icon Component

• تمرین: یک جزء ListItem ایجاد و استفاده کنید Exercise: Create and Use a ListItem Component

• تمرین: یک جزء ListItem ایجاد و استفاده کنید Exercise: Create and Use a ListItem Component

• پیاده سازی: ایجاد و استفاده از یک جزء ListItem Implementation: Create and Use a ListItem Component

ساخت لیست مخاطبین Building the Contact List

• اطلاعات مخاطبین The Contacts Data

• نمای کلی API: جزء FlatList API Overview: FlatList Component

• پیاده سازی: یک FlatList پایه ایجاد کنید Implementation: Create a Basic FlatList

• ایجاد توابع کمکی Creating the Helper Functions

• پیاده سازی: ایجاد و استفاده از یک جزء ListItem Implementation: Create and Use a ListItem Component

مبانی ناوبری Basics of Navigation

• نمای کلی و نصب React Navigation Overview of and Installing React Navigation

• نمای کلی API: StackNavigator API Overview: StackNavigator

• نمای کلی API: StackNavigator API Overview: StackNavigator

• تمرین: تعریف StackNavigator Exercise: Defining a StackNavigator

• تمرین: تعریف StackNavigator Exercise: Defining a StackNavigator

• پیاده سازی: تعریف StackNavigator Implementation: Defining a StackNavigator

• پیاده سازی: تعریف StackNavigator Implementation: Defining a StackNavigator

• نمای کلی API: عملکرد پیمایش API Overview: Navigate Function

• نمای کلی API: عملکرد پیمایش API Overview: Navigate Function

• تمرین: پیمایش مخاطبین به جزئیات Exercise: Navigating Contacts to Details

• تمرین: پیمایش مخاطبین به جزئیات Exercise: Navigating Contacts to Details

• پیاده سازی: پیمایش مخاطبین به جزئیات Implementation: Navigating Contacts to Details

مبانی ناوبری Basics of Navigation

• نمای کلی و نصب React Navigation Overview of and Installing React Navigation

• پیاده سازی: پیمایش مخاطبین به جزئیات Implementation: Navigating Contacts to Details

ساخت صفحه نمایش جزئیات کاربر Building the User Details Screen

• نمای کلی API: Screen Navigation Prop API Overview: Screen Navigation Prop

• نمای کلی API: عنوان نوار ناوبری سفارشی API Overview: Custom Navigation Bar Title

• تمرین: یک کامپوننت هدر ایجاد و استفاده کنید Exercise: Create and Use a Header Component

• پیاده سازی: ایجاد و استفاده از کامپوننت هدر Implementation: Create and Use a Header Component

• پیاده سازی: ایجاد و استفاده از کامپوننت هدر Implementation: Create and Use a Header Component

• نمای کلی API: ScrollView Component API Overview: ScrollView Component

• تمرین: ایجاد و استفاده از یک جزء اقدامات Exercise: Create and Use an Actions Component

• پیاده سازی: ایجاد و استفاده از یک جزء اقدامات Implementation: Create and Use an Actions Component

• ایجاد یک جزء ردیف قابل استفاده مجدد Creating a Reusable Row Component

• نمای کلی و نصب Moment.js Overview and Installation of Moment.js

• تمرین: یک مؤلفه اطلاعات ایجاد و استفاده کنید Exercise: Create and Use an Info Component

• پیاده سازی: ایجاد و استفاده از یک مؤلفه اطلاعات Implementation: Create and Use an Info Component

ساخت صفحه نمایش جزئیات کاربر Building the User Details Screen

• نمای کلی API: Screen Navigation Prop API Overview: Screen Navigation Prop

• نمای کلی API: عنوان نوار ناوبری سفارشی API Overview: Custom Navigation Bar Title

• تمرین: یک کامپوننت هدر ایجاد و استفاده کنید Exercise: Create and Use a Header Component

• نمای کلی API: ScrollView Component API Overview: ScrollView Component

• تمرین: ایجاد و استفاده از یک جزء اقدامات Exercise: Create and Use an Actions Component

• پیاده سازی: ایجاد و استفاده از یک جزء اقدامات Implementation: Create and Use an Actions Component

• ایجاد یک جزء ردیف قابل استفاده مجدد Creating a Reusable Row Component

• نمای کلی و نصب Moment.js Overview and Installation of Moment.js

• تمرین: یک مؤلفه اطلاعات ایجاد و استفاده کنید Exercise: Create and Use an Info Component

• پیاده سازی: ایجاد و استفاده از یک مؤلفه اطلاعات Implementation: Create and Use an Info Component

نوار ناوبری Tab Navigation

• نمای کلی API: TabNavigator API Overview: TabNavigator

• نمای کلی API: TabNavigator API Overview: TabNavigator

• تمرین: ایجاد و استفاده از TabNavigator Exercise: Create and Use a TabNavigator

• تمرین: ایجاد و استفاده از TabNavigator Exercise: Create and Use a TabNavigator

• پیاده سازی: ایجاد و استفاده از TabNavigator Implementation: Create and Use a TabNavigator

• پیاده سازی: ایجاد و استفاده از TabNavigator Implementation: Create and Use a TabNavigator

• تمرین: StackNavigators برای همه برگه ها Exercise: StackNavigators for All Tabs

• تمرین: StackNavigators برای همه برگه ها Exercise: StackNavigators for All Tabs

• پیاده سازی: StackNavigators برای همه برگه ها Implementation: StackNavigators for All Tabs

نوار ناوبری Tab Navigation

• پیاده سازی: StackNavigators برای همه برگه ها Implementation: StackNavigators for All Tabs

ناوبر کشو Drawer Navigator

• نمای کلی API: Drawer Navigator API Overview: Drawer Navigator

• نمای کلی API: Drawer Navigator API Overview: Drawer Navigator

• تمرین: ایجاد DrawerNavigator Exercise: Creating the DrawerNavigator

• پیاده سازی: ایجاد DrawerNavigator Implementation: Creating the DrawerNavigator

• پیاده سازی: ایجاد DrawerNavigator Implementation: Creating the DrawerNavigator

• باز کردن کشو از نوار پیمایش Opening the Drawer from the Navigation Bar

• تب ها در iOS، کشو در اندروید Tabs on iOS, Drawer on Android

• تمرین: دکمه کشو نوار ناوبری بهتر Exercise: A Better Navbar Drawer Button

• پیاده سازی: یک دکمه کشوی نوار ناوبری بهتر Implementation: A Better Navbar Drawer Button

• پیاده سازی: یک دکمه کشوی نوار ناوبری بهتر Implementation: A Better Navbar Drawer Button

ناوبر کشو Drawer Navigator

• تمرین: ایجاد DrawerNavigator Exercise: Creating the DrawerNavigator

• باز کردن کشو از نوار پیمایش Opening the Drawer from the Navigation Bar

• تب ها در iOS، کشو در اندروید Tabs on iOS, Drawer on Android

• تمرین: دکمه کشو نوار ناوبری بهتر Exercise: A Better Navbar Drawer Button

ساخت صفحه نمایش من Building the Me Screen

• وارد کردن داده ها Importing the Data

• وارد کردن داده ها Importing the Data

• تمرین: آهنگسازی صفحه من Exercise: Composing the Me Screen

• پیاده سازی: آهنگسازی صفحه من Implementation: Composing the Me Screen

• تمرین: ایجاد یک جزء دکمه Exercise: Creating a Button Component

• تمرین: ایجاد یک جزء دکمه Exercise: Creating a Button Component

• پیاده سازی: ایجاد یک جزء دکمه Implementation: Creating a Button Component

ساخت صفحه نمایش من Building the Me Screen

• تمرین: آهنگسازی صفحه من Exercise: Composing the Me Screen

• پیاده سازی: آهنگسازی صفحه من Implementation: Composing the Me Screen

• پیاده سازی: ایجاد یک جزء دکمه Implementation: Creating a Button Component

ساختن صفحه افزودن Building the Add Screen

• نمای کلی API: TextInput API Overview: TextInput

• نمای کلی API: TextInput API Overview: TextInput

• تمرین: ایجاد یک TextInput سفارشی Exercise: Creating a Custom TextInput

• تمرین: ایجاد یک TextInput سفارشی Exercise: Creating a Custom TextInput

• پیاده سازی: ایجاد یک TextInput سفارشی Implementation: Creating a Custom TextInput

• ساخت یک فرم Building a Form

• ساخت یک فرم Building a Form

• نمای کلی و نصب API: React Native Keyboard Aware ScrollView API Overview & Installation: React Native Keyboard Aware ScrollView

• نمای کلی و نصب API: React Native Keyboard Aware ScrollView API Overview & Installation: React Native Keyboard Aware ScrollView

• تمرین: با استفاده از KeyboardAwareScrollView Exercise: Using KeyboardAwareScrollView

• تمرین: با استفاده از KeyboardAwareScrollView Exercise: Using KeyboardAwareScrollView

• پیاده سازی: با استفاده از KeyboardAwareScrollView Implementation: Using KeyboardAwareScrollView

• پیاده سازی: با استفاده از KeyboardAwareScrollView Implementation: Using KeyboardAwareScrollView

• پیشرفت از یک زمینه به بعد Progressing From One Field to the Next

• پیشرفت از یک زمینه به بعد Progressing From One Field to the Next

ساختن صفحه افزودن Building the Add Screen

• پیاده سازی: ایجاد یک TextInput سفارشی Implementation: Creating a Custom TextInput

حرکت رو به جلو Moving Forward

• منابع یادگیری بیشتر Further Learning Resources

• منابع یادگیری بیشتر Further Learning Resources

حرکت رو به جلو Moving Forward