آموزش لیست ویو در برنامه نویسی React Native

در خدمت شما عزیزان هستیم با  آموزش لیست ویو در برنامه نویسی React Native از وب سایت آموزش برنامه نویسی سورس باران. در جلسه هشتم آموزش ریکت نیتیو،لیست ویو (ListView) یکی از قدیمی ترین و پرکاربردترین کامپوننت ها در توسعه اپلیکیشن های Android و Ios است. لیست ویو ساده ترین راه برای نمایش داده های چندگانه در یک صفحه نمایش با قابلیت scroll است. تا نتها با ما همراه باشید…

آموزش لیست ویو در برنامه نویسی React Native

بدون معطلی بریم سراغ آموزش و کارمون رو شروع کنیم. ابتدا یک پروژه جدید ایجاد کنید. ما List را در کامپوننت Home وارد می کنیم و آن را روی صفحه نمایش نشان می دهیم.

App.js

import React from 'react'
import List from './List.js'

const App = () => {
   return (
      <List />
   )
}
export default App

برای ایجاد یک ListView ،از روش ()map استفاده خواهیم کرد. این یک آرایه ای از موارد را تکرار می کند و هر کدام را رندر می کند.

List.js

import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'
   
class List extends Component {
   state = {
      names: [
         {
            id: 0,
            name: 'Ben',
         },
         {
            id: 1,
            name: 'Susan',
         },
         {
            id: 2,
            name: 'Robert',
         },
         {
            id: 3,
            name: 'Mary',
         }
      ]
   }
   alertItemName = (item) => {
      alert(item.name)
   }
   render() {
      return (
         <View>
            {
               this.state.names.map((item, index) => (
                  <TouchableOpacity
                     key = {item.id}
                     style = {styles.container}
                     onPress = {() => this.alertItemName(item)}>
                     <Text style = {styles.text}>
                        {item.name}
                     </Text>
                  </TouchableOpacity>
               ))
            }
         </View>
      )
   }
}
export default List

const styles = StyleSheet.create ({
   container: {
      padding: 10,
      marginTop: 3,
      backgroundColor: '#d9f9b1',
      alignItems: 'center',
   },
   text: {
      color: '#4f603c'
   }
})

هنگامی که ما برنامه را اجرا می کنیم، لیستی از اسامی را خواهیم دید.

شما می توانید بر روی هر یک از آیتم های موجود در لیست کلیک کنید تا هشدار را با نام نشان دهد.

مثال 2 از آموزش ListView در react native

ساخت پروژه جدید و اضافه کردن کامپوننت های AppRegistry, StyleSheet, View, Alert, ListView , Text در بلاک import

import React, { Component } from 'react';
 
import { AppRegistry, StyleSheet, View, Alert, ListView, Text } from 'react-native';

ایجاد constructor در کلاس اصلی با پارامتر props

constructor(props) {
 
    super(props);
 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    
    this.state = {
 
      dataSource: ds.cloneWithRows([
           'One',
            'Two',
            'Three',
            'Four',
            'Five',
            'Six',
            'Seven',
            'Eight',
            'Nine',
            'Ten',
            'Eleven',
            'Twelve'
        ]),
    
    };
 
  }

ایجاد یک تابع به نام ListViewItemSeparator . با استفاده از این تابع بین آیتم های ListView یک جداکننده بصورت خط ایجاد میکنیم.

ListViewItemSeparator = () => {
    return (
      <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );
  }

ایجاد تابع GetListViewItem برای نمایش نام آیتم های ListView

GetListViewItem (rowData) {
   
  Alert.alert(rowData);
 
  }

اضافه کردن View در بلاک render return

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

ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent

const styles = StyleSheet.create({
 
  MainContainer :{
  
    justifyContent: 'center',
    flex:1,
    margin: 10
  },
 
  rowViewContainer: 
  {
 
    fontSize: 18,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 10,
 
  }
});

اضافه کردن کامپوننت ListView دورن View

dataSource: فراخوانی data source که با استفاده از state تعریف کردیم.

renderSeparator: فراخوانی تابع ListViewItemSeparator برای نمایش خط جداکننده بین آیتم ها

renderRow: نمایش اطلاعات با استفاده از کامپوننت Text

onPress: فراخوانی تابع GetListViewItem

<View style={styles.MainContainer}>
  
         <ListView
 
            dataSource={this.state.dataSource}
 
            renderSeparator= {this.ListViewItemSeparator}
 
            renderRow={
                        (rowData) => <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData)}>{rowData}</Text>
                      }
 
          />
 
</View>

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

import React, { Component } from 'react';
 
import { AppRegistry, StyleSheet, View, Alert, ListView, Text } from 'react-native';
 
class MainProject extends Component {
 
constructor(props) {
 
    super(props);
 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    
    this.state = {
 
      dataSource: ds.cloneWithRows([
           'One',
            'Two',
            'Three',
            'Four',
            'Five',
            'Six',
            'Seven',
            'Eight',
            'Nine',
            'Ten',
            'Eleven',
            'Twelve'
        ]),
    
    };
 
 
  }
 
 ListViewItemSeparator = () => {
    return (
      <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );
  }
 
  GetListViewItem (rowData) {
   
  Alert.alert(rowData);
 
  }
 
render() {
return (
 
<View style={styles.MainContainer}>
  
         <ListView
 
            dataSource={this.state.dataSource}
 
            renderSeparator= {this.ListViewItemSeparator}
 
            renderRow={
                        (rowData) => <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData)}>{rowData}</Text>
                      }
 
          />
 
</View>
            
    );
  }
}
 
const styles = StyleSheet.create({
 
  MainContainer :{
  
    justifyContent: 'center',
    flex:1,
    margin: 10
  },
 
  rowViewContainer: 
  {
 
    fontSize: 18,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 10,
 
  }
});
 
AppRegistry.registerComponent('MainProject', () => MainProject);

ممنون از اینکه ما رو تا انتهای آموزش ListView در برنامه نویسی React Native همراهی نمودید. لیست جلسات قبل رو میتونید در زیر مشاهده نمایید.

لیست جلسات قبل آموزش React Native

1. React Native یا ریکت نیتیو چیست؟
2. آموزش React Native – نصب و تنظیم محیط React Native
3. آموزش App در React Native
4. آموزش کار با State در React Native
5. آموزش کار با کامپوننت Props در React Native
6. آموزش استایل دهی در برنامه نویسی React Native
7. آموزش flex در برنامه نویسی react native

The post آموزش لیست ویو در برنامه نویسی React Native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

آموزش استایل دهی در برنامه نویسی React Native

در خدمت شما عزیزان هستیم با آموزش استایل دهی در برنامه نویسی React Native از وب سایت آموزش برنامه نویسی سورس باران. در جلسه ششم آموزش ریکت نیتیو، استایل دهی در فریم ورک React Native و انواع استایل دهی مانند کامپوننت Container و Presentational کامپوننت را خواهیم داشت. با ما همراه باشید….

استایل دهی در React Native

برای استایل دهی در React Native چندین راه وجود دارد. شما می توانید از ویژگی style برای اضافه کردن styles inline استفاده کنید. با این حال، این بهترین روش نیست، زیرا این روش کد را سخت می تواند بخواند. در این فصل، از Stylesheet برای یک طراحی استفاده خواهیم کرد.

کامپوننت Container در ریکت نیتیو

در جلسات قبل هم راجب به کامپوننت Container صحبت و کار شده بود. در این بخش بصورت ساده تر نسبت به جلسات قبل کار می کنیم. به مثال زیر توجه نمایید

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

export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState}/>
         </View>
      );
   }
}

کامپوننت Presentational در ریکت نیتیو

در مثال زیر ما StyleSheet را وارد می کنیم. در پایین فایل، ما StyleSheet را ایجاد می کنیم و آن را به styles ثابت اختصاص می دهیم. توجه داشته باشید که سبک های ما در camelCase هستند و ما از px یا٪ برای یک استایل طراحی استفاده نمی کنیم. برای اعمال سبک به متن ما باید ویژگی style = {styles.myText} را به عنصر Text اضافه کنیم.

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

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text style = {styles.myState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

پس از اجرا برنامه خروجی زیر را مشاهده می کنیم

امیدواریم این جلسه از آموزش React Native مورد توجه دوستان و کاربران عزیز قرار گرفته باشد…

لیست جلسات قبل آموزش React Native

1. React Native یا ریکت نیتیو چیست؟
2. آموزش React Native – نصب و تنظیم محیط React Native
3. آموزش App در React Native
4. آموزش کار با State در React Native
5. آموزش کار با کامپوننت Props در React Native

The post آموزش استایل دهی در برنامه نویسی React Native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

آموزش کار با کامپوننت Props در React Native

با آموزش کار با کامپوننت Props در React Native از وب سایت آموزش برنامه نویسی سورس باران در خدمت شما دوستان عزیز هستیم. در این آموزش خواهیم آموخت که که Props چیست و چه کاربردی دارد. با ما همراه باشید…

آموزش کار با کامپوننت Props در React Native

در این مطلب توضیحاتی راجع به کامپوننت Props در React Native و کامپوننت Container و همچنین کامپوننت Presentational در React Native رو خواهیم داشت.

کامپوننت Props در React Native

در این آموزش می آموزید که چگونه state و Props را ترکیب کنید. اجزای Presentational باید تمام داده ها را با عبور props ها دریافت کنند. فقط اجزای container باید وضعیت داشته باشند.

حالا کامپوننت Container را به روز می کنیم. این کامپوننت state را اداره می کند و Props ها را به کامپوننت های presentational منتقل می کند. کامپوننت کانتینری تنها برای مدیریت state استفاده می شود. تمام قابلیت های مربوط به نمایش (ظاهر و غیره) در مولفه های presentational نشان داده می شود.

مثال کامپوننت Props در برنامه نویسی React Native

اگر ما بخواهیم از مثال جلسات قبل استفاده کنیم، باید عنصر Text را حذف کنیم و متن را از تابع render ، زیرا این عنصر برای ارائه متن به کاربران استفاده می شود.

app.js

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

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
      officia deserunt mollit anim id est laborum.'
   }
   updateState = () => {
      this.setState({ myState: 'The state is updated' })
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/>
         </View>
      );
   }
}

مثال کامپوننت Presentational در React Native

در این قسمت درک می کنیم که یک مولفه Presentational چیست و همچنین چگونه کار می کند.

اجزاء Presentational  باید فقط برای ارائه نمایش به کاربران استفاده شوند. این کامپوننت state را ندارند آن ها تمام داده ها و عملکردها را به عنوان props دریافت می کنند. بهترین روش این است که از کامپوننت presentational به همان اندازه که ممکن است استفاده شود.

در حال حاضر، ما همان تابع را در فصل State داریم. تنها تفاوت این است که ما کد را به کانتینر و کامپوننت presentational اصلاح کردیم. شما می توانید برنامه را اجرا کنید و متن را مانند تصویر زیر مشاهده کنید.

اگر بر روی متن کلیک کنید، از صفحه حذف خواهد شد.

آموزش کار با کامپوننت Props در React Native

انواع مختلفی از کامپوننت ها در react native وجود داره که هر یک از این کامپوننت ها یک وظیفه خاص داره.با استفاده ار Props ها ما میتونیم این کامپوننت ها رو سفارشی سازی کنیم. در این آموزش ما قصد داریم از کامپوننت Image برای نمایش تصویر در اپلیکیشن استفاده کنیم و برای کنترل تصویر از یک Prop به نام source استفاده کنیم.

source کنترل میکنه که چه عکسی درون کامپوننت Image نمایش داده بشه.برای نمایش عکس میتونیم هم از local و هم از Http Url استفاده بکنیم.

مثال  کامپوننت presentational در React Native

همانطور که در فصل قبلی ما اشاره کردیم، ما از نحو کارکرد تابع EC6 syntax برای کامپوننت presentational استفاده می کنیم. کامپوننت ما props ها را دریافت می کند،عناصر قابل نمایش را برمی گرداند، متن فعلی با استفاده از {props.myText} تابع {props.deleteText} را هنگامی که یک کاربر بر روی متن کلیک می کند، فراخوانی کند.

PresentationalComponent.js

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

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text onPress = {props.updateState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

امیدواریم مورد توجه دوستان قرار گرفته باشد…

آموزش شماره 2 کار با Props در react native

برای مثال در این آموزش ما قصد داریم از کامپوننت Image برای نمایش تصویر در اپلیکیشن استفاده کنیم و برای کنترل تصویر از یک Prop به نام source استفاده کنیم.source کنترل میکنه که چه عکسی درون کامپوننت Image نمایش داده بشه.برای نمایش عکس میتونیم هم از local و هم از Http Url استفاده بکنیم.

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

import React, { Component } from 'react';
import {
AppRegistry, Image
} from 'react-native';
export default class Myproject extends Component {
render() {
let Image_Http_URL ={ uri: 'https://reactapp.ir/wp-content/uploads/reactapp2-2.png'};
return (
<Image source={Image_Http_URL} style = {{height: 200, resizeMode : 'center', margin: 5 }} />
);
}
}
AppRegistry.registerComponent('Myproject', () => Myproject);

در گام بعدی ما کامپوننت خودمون رو با استفاده از Props میسازیم.بنابراین در حال حاضر ما یک کامپوننت Text داریم که با استفاده از Props میتونیم در هر قسمت از اپلیکیشن این کامپوننت رو فراخوانی کنیم.

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

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class HelloClass extends Component {
render() {
return (
<Text style={{marginTop : 10}}>Hello {this.props.StudentName} !</Text>
);
}
}
export default class MyProject extends Component {
render() {
return (
<View style={{alignItems: 'center', marginTop : 20}}>
<HelloClass StudentName='Pankaj' />
<HelloClass StudentName='Honey' />
<HelloClass StudentName='Sumit' />
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('MyProject', () => MyProject);

در قطعه کد بالا ما یک کلاس اضافی به نام HelloClass ایجاد کردیم.درون این کلاس ما از کامپوننت Text استفاده کردیم.حالا ما این کامپوننت رو با استفاده از Prop به نام this.props.StudentName تنظیم کردیم.

The post آموزش کار با کامپوننت Props در React Native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

آموزش کار با State در React Native

با آموزش کار با State در React Native از وب سایت آموزش برنامه نویسی سورس باران در خدمت شما کاربران عزیز هستیم. در جلسه چهارم آموزش React Native به بررسی State یا وضعیت در React Native و تفاوت بین State و props در React Native خواهیم پرداخت.

آموزش کار با State در React Native

داده ها در داخل React Components توسط State و props اداره می شوند. در این فصل، ما درباره State صحبت خواهیم کرد. State تغییرپذیر است در حالیکه props غیر قابل تغییر است. این بدان معنی است که در آینده می توان State را به روز کرد در حالی که props را نمی توان آپدیت کرد. در ادامه آموزش React Native با ما همراه باشید….

آموزش استفاده از State

این مولفه اصلی ماست. ما فقط وارد Home می شویم که در اکثر فصل ها استفاده شده است.

App.js

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

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum.'
   }
   render() {
      return (
      <View>
         <Text> {this.state.myState} </Text>
      </View>
      );
   }
}

ما می توانیم شبیه ساز متن یا emulator text را از state در اسکرین شات تصویر زیر مشاهده کنید.

آموزش بروزرسانی State

از آنجا که State قابل تغییر است، ما می توانیم آن را با ایجاد تابع deleteState به روز کنیم و با استفاده از رویداد onPress = {this.deleteText} فراخوانی کنیم.

Home.js

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

class Home extends Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit anim id est laborum.'
   }
   updateState = () ⇒ this.setState({ myState: 'The state is updated' })
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

در تمام فصل ها، ما از کلاس syntax برای وضعیت کامل (container) کامپوننت ها و تابع Syntax برای بدون وضعیت (presentational) کامپوننت ها استفاده می کنیم.ما در مورد کامپوننت ها در فصل بعدی بیش تر صحبت می کنیم.

ما همچنین نحوه استفاده از arrow function syntax برای updateState را یاد خواهیم گرفت. شما باید در نظر داشته باشید که این syntax از lexical scope استفاده می کند و این کلمه کلیدی با environment یا (Class) محدود می شود. که این گاهی منجر به رفتار غیرمنتظره خواهد شد.

روش دیگر برای تعریف متد ها استفاده از توابع EC5 است، اما در این صورت ما باید این را به صورت دستی در کامپوننت قرار دهیم. مثال زیر را با هم می بینیم.

class Home extends Component {
   constructor() {
      super()
      this.updateState = this.updateState.bind(this)
   }
   updateState() {
      //
   }
   render() {
      //
   }
}

مثالی دیگر از آموزش State ها در react native

برای کنترل یک کامپوننت دو نوع داده وجود داره state و props. اگر داده های ما در حال تغییر هستن باید از state استفاده کنیم. برای معرفی state باید اونو داخل سازنده ها مقدار دهی کنیم و هر وقت بخواهیم اون مقدارو تغییر بدیم از دستور setstate استفاده میکنیم. در ویدئو زیر هم توضیحات کاملی در مورد state ها دادم. در مثال زیر میخواهیم با زدن دکمه , متن title تغییر پیدا کنه به Hello world ؟

1- برای شروع react و دو کامپوننت Text , View را داخل فایل app.js اضافه میکنیم:

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

2- سپس یک کلاس با نام App تعریف می کنیم:

export default class App extends Component {
render() {
return (
);
}
}

3- حالا نوبت به تعریف state رسیده. برای این کار یک سازنده ایجاد کرده و در آن یک state با نام title تعریف میکنیم: برای تعریف state از کلمه کلیدی {this.state={name of state:value استفاده میکنیم .

export default class App extends Component {
constructor(props){
super(props);
this.state={
title:'Home page'
}
}
render() {
return (
);
}
}

4- حالا نوبت به تعریف دو کامپوننت Text , Button رسیده:

<View>
<Text>
{this.state.title}
</Text>
<Button title="click" onPress={()=>this.setState({title:' Hello world '})}/>
</View>

5- در کامپوننت Button یک پراپ title برای مشخص کردن نام دکمه و یک پراپ onPress برای زمانی که روی دکمه کلیک شد میگه چه عملی انجام بده  که در اینجا گفتیم با استفاده از setState مقدار title رو برابر عبارت Hello world بزارید.

سورس کد برنامه در فایل App.js

import React, { Component } from 'react';
import { View, Text ,Button} from 'react-native';
export default class App extends Component {
constructor(props){
super(props);
this.state={
title:'Home page'
}
}
render() {
return (
<View>
<Text>
{this.state.title}
</Text>
<Button title="click" onPress={()=>this.setState({title:'Hello world'})}/>
</View>
);
}
}

لیست جلسات قبل آموزش React Native

1. React Native یا ریکت نیتیو چیست؟
2. آموزش React Native – نصب و تنظیم محیط React Native
3. آموزش App در React Native

The post آموزش کار با State در React Native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

آموزش App در فریم ورک React Native

در خدمت شماییم با آموزش App در React Native از وب سایت آموزش برنامه نویسی سورس باران. در این جلسه که جلسه سوم آموزش React Native می باشد با app و خروجی در ری اکت نیتیو آشنا می شوید.

آموزش App در React Native

اگر برنامه پیش فرض را باز کنید می توانید ببینید که فایل app.js شبیه دستور پایین به نظر می رسد.

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

export default class App extends React.Component {
   render() {
      return (
         <View style = {styles.container}>
            <Text>Open up App.js to start working on your app!</Text>
            <Text>Changes you make will automatically reload.</Text>
            <Text>Shake your phone to open the developer menu.</Text>
         </View>
      );
   }
}

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

خروجی در React Native

برنامه Hello world در ری اکت نیتیو

برای نمایش یک پیغام ساده مثل “Welcome to Tutorialspoint” بخش CSS را حذف کنید و پیام را به صورت برچسب <text> </ text> در داخل <view> </ view> قرار دهید، همانطور که در زیر نشان داده شده است. ادامه مطالب را دنبال نمایید.

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

export default class App extends React.Component {
   render() {
      return (
         <View>
            <Text>Welcome to Tutorialspoint</Text>
         </View>
      );
   }
}

امیدواریم این جلسه مورد توجه دوستان قرار گرفته باشد.

لیست جلسات قبل آموزش React Native

1. React Native یا ریکت نیتیو چیست؟
2. آموزش React Native – نصب و تنظیم محیط React Native

The post آموزش App در React Native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

آموزش React Native – نصب و تنظیم محیط React Native

در خدمت شمایی با آموزش React Native – نصب و تنظیم محیط React Native از وب سایت آموزش برنامه نویسی سورس باران. در این جلسه که جلسه دوم آموزش React Native می باشد نصب و تنظیم محیط React Native و ایجاد پروژه جدید در React Native را خواهیم داشت. با ما همراه باشید…

نصب و تنظیم محیط React Native

جهت تنظیم محیط React Native، دو چیز لازم است که شما باید نصب کنید. ما از OSX به عنوان پلت فرم ساختمانی استفاده خواهیم کرد.

1- نصب create-react-native-app

پس از نصب NodeJS و NPM به طور موفقیت آمیز در سیستم، شما می توانید برای نصب create-react-native-app اقدام نمایید.

مثال

C:\Users\Tutorialspoint> npm install -g create-react-native-app

2- ایجاد پروژه جدید در React Native

پوشه مورد نظر را دنبال کنید و یک پروژه react native که در زیر نشان داده شده است را ایجاد نمایید.

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

پس از اجرای دستور فوق، یک پوشه با نام مشخص شده با مطالب زیر ایجاد می شود.

3- نصب NodeJS Python Jdk8

اطمینان حاصل کنید که Python NodeJS و jdk8 در سیستم شما نصب شده اند، اگر نه، آنها را نصب کنید. علاوه بر این توصیه می شود که آخرین نسخه yarn را برای جلوگیری از مسائل خاصی نصب کنید.

حتما بخوانید :  آموزش برنامه نویسی Node.js بصورت کامل

حتما بخوانید : آموزش Node.js در ۳ روز

4- نصب React Native CLI

شما می توانید رابط react native command line را بر روی npm نصب کنید، با استفاده از دستور install-g react-native-cli همانطور که در زیر نشان داده شده است.

5- Start react native

installation browse را از طریق project folder بررسی نمایید، و سعی کنید پروژه را با استفاده از دستور start یا start command شروع کنید.

مثال

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

اگر همه چیز خوب پیش رفت، یک کد QR دریافت خواهید کرد که در زیر نشان داده شده است.

یک راه برای اجرای برنامه های react native در دستگاه اندرویدتون استفاده از EXPO است. برنامه expo client را در دستگاه اندرویدتون نصب نمایید و کد QR دریافت شده را اسکن کنید.

6- Eject the project

اگر می خواهید شبیه ساز اندروید را با استفاده از android studio اجرا کنید، با فشار دادن ctrl + c از خط فرمان فعلی خارج شوید. سپس دستور run eject را اجرا کنید.

npm run eject

این باعث می شود گزینه هایی برای eject فعال شوند ، اول با استفاده از arrows یا پیکان ها انتخاب کرده و Enter را فشار دهید.

سپس، شما باید نام برنامه را در صفحه home و نام پروژه Android studio و پروژه Xcode را پیشنهاد دهید.

اگرچه پروژه شما با موفقیت eject شده است، ممکن است یک خطا رخ دهد.

آن را نادیده بگیرید و دستور زیر را برای اندروید اجرا کنید

react-native run-android

7- نصب اندروید استودیو در React Native

ازاین لینک https://developer.android.com/studio اندروید استودیو را نصب نمایید.

پس از دانلود فایل نصبی آن، بر روی آن دوبار کلیک کنید و نصب را ادامه دهید.

8- Configuring AVD Manager در React Native

برای Configuring AVD Manager روی آیکون مربوطه در نوار منو کلیک کنید.

9- Configuring AVD Manager

Choose a device definition که Nexus 5X پیشنهاد شده است.

روی دکمه Next کلیک کنید تا یک پنجره System Image ببینید. زبانه x86 Images را انتخاب کنید.

سپس Marshmallow را انتخاب کنید و روی next کلیک کنید.

سرانجام دکمه Finish را کلیک کنید تا AVD configuration را پایان دهید.

در configuring virtual device، روی دکمه play در زیر ستون Actions کلیک کنید تا شبیه ساز اندروید خود را شروع کنید.

10- Running android در React Native

prom command را باز کنید، project folder خود را جستجو کنید و دستور react-native run-android را اجرا کنید.

سپس، اجرای برنامه شما از یک prompt دیگر شروع می شود که می توانید وضعیت یا status آن را ببینید.

در شبیه ساز اندروید شما می توانید اجرای برنامه را به طور پیش فرض این طور ببینید.

11- local.properties

پوشه Android را در پوشه پروژه خود /SampleReactNative/android پاز کنید. یک فایل با نام local.properties ایجاد کنید و مسیر زیر را در آن اضافه کنید.

sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

در این جا Tutorialspoint را با نام کاربری خود جایگزین کنید.

12- Hot Reloading

برنامه تغییر App.js را بسازید و تغییرات را به طور خودکار در شبیه ساز اندروید به روز کنید. اگر نه، بر روی android emulator کلیک کنید و Ctrl + M را فشار دهید ، سپس گزینه Enable Hot Reloading را انتخاب کنید.

The post آموزش React Native – نصب و تنظیم محیط React Native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

آموزش React Native – React Native یا ریکت نیتیو چیست؟

با اولین جلسه آموزش React Native از وب سایت آموزش برنامه نویسی سورس باران در خدمت شما هستیم. در این جلسه مقاله آموزش React Native – React Native یا ریکت نیتیو چیست؟ رو تقدیم حضور شما می نماییم. شاید برای تعدادی از دوستان با React Native آشنایی نداشته باشند، به همین خاطر جلسه اول آموزش را اختصاص دادیم به معرفی و بررسی کامل React Native (ریکت نیتیو) که جهت مشاهده آن میتوانید به ادامه مطلب مراجعه نمایید.

React Native (ریکت نیتیو) چیست؟

React Native چیست؟؟ خیلی وقتا پیش اومده که تعدادی از دوستان این بوده که با یادگیری یک زبان برنامه نویسی برنامه هایی بنویسیم که روی پلتفرم های مختلف اجرا بشه و لذت برنامه نویسی ما رو دو چندان کنه. هر چند که تلاش های زیادی تو این زمینه شد ولی هیچکدوم چنگی به دل نزد تا اینکه فیسبوک در ابتدای سال 2013 اولین نسخه stable از یک کتابخونه جاوا اسکریپت رو بصورت open-source روی GitHub منتشر کرد. اسم این کتابخونه ReactJs بود که برای توسعه وب اپلیکیشن ها مورد استفاده قرار میگرفت. این کتابخونه سرعت بسیار بالاو سادگی خاصی داشت که باعث شد خیلی سریع مورد توجه قرار بگیره. اواخر مارچ 2015 بود که فیسبوک یک فریم ورک جدید به اسم React Native منتشر کرد که بهت اجازه میداد فقط با استفاده از جاوا اسکریپت و کتابخونه React اپلیکیشن موبایل برای ios بسازی. فیسبوک شش ماه بعد گام اصلی و محکم رو با انتشار React Native برای Android برداشت . توسعه دهنده ها دیگه مجبور به نوشتن کدهای جداگونه برای سیستم عامل های مختلف نبودن و استارتاپ ها و صاحبان کسب کار به توسعه دهنده هایی دسترسی پیدا کردند که برای هر دو سیستم عامل َAndroid و IOS اپلیکیشن طراحی میکردند.

با React Native یک “mobile web app” ، ” HTML5 app” یا “Hybridapp” برنامه نویسی نمی کنید بلکه یک اپلیکیشن واقعی موبایل میسازید که از یک برنامه ساخته شده با Objective-c یا Java قابل تشخیص نیست (منظور از برنامه های Native برنامه هایی هست که برای یک سیستم عامل خاص نوشته شده)

یکی از ویژگی های کار با React Native اینکه برای طراحی UI دست شما خیلی بازه و با سرعت بسیار بسیار بالایی میتونید اپلیکیشن هایی با ظاهر زیبا و جذاب طراحی کنید (نمونه کاملا عمومیش که تقریبا هممون ازش استفاده میکنیم اپلیکیشن اینستاگرام هست ). در ادامه تعدادی از بهترین اپلیکیشن های نوشته شده با ریکت نیتیو را به شما معرفی می نماییم. همچنین با استفاده از Node میتونید سمت سرور برنامه نویسی کنید. یک لحظه به این موضوع فکر کنید که فقط و فقط با استفاده از جاوا اسکریپت اپلیکیشن Native طراحی میکنید که روی Android و IOS اجرا میشه.

همچنین اوپن سورس بودن ReactNative و پشتیبانیش توسط فیسبوک فرد رو تشویق می کنه که به همین سمت بره و پیش بینی میشه تا چند سال دیگه ریکت نیتیو بازار خیلی خوبی داشته باشه. در ادامه چند تا از ویژگی های React Native رو بصورت موردی بیان میکنم :

• کامپوننتی بودن و امکان استفاده از کامپوننت ها در پروژه های دیگر و همچنین استفاده از کامپوننت های دیگر افراد که هم باعث سادگی میشه و هم سریعتر شدن کار.
• ساخت بسیار راحت تر رابط کاربری های زیبا برای اپلیکیشن (به دلیل وجود استایل css مانند و jsx) که میبینید که skype هم تجدیدنظر کرد و به ریکت نیتیو پیوست به تازگی.
• هیچ محدودیتی برای شما وحود نداره. شما میتونید هرموقع خواستید توی ریکت نیتیو کدهای java , swift بنویسید تا کامپوننت های نیتیو خودتونو به وجود بیارید. پس از این بابت هم نگرانی ای نمیزاره (البته که هر کامپوننتی نیاز داشته باشید ایجاد شده ولی این مورد محض اطمینان هست).
• یه فرانت اند کار خوب میتونه با گذاشتن تایم کمی React Native رو به خوبی فرا بگیره و همچنین برنامه نویس های اندروید و Ios هم که تا الان نیتیو کار میکردند با یادگرفتن پایه های وب سمت React Native بیان.
• بدون اینکه از زبان های نیتیو هم سردر بیارید میتونید کار بکنید باهاش و فقط باید قواعد اپلیکیشن و تفاوتش با وب رو فرا بگیرید.
• نیازی نیست برای توسعه اپ اندرویدتون از اندروید استودیو و برای ios از xcode استفاده کنید و آزادانه میتونید از هر ادیتوری استفاده بکنید و لذت ببرید.

تعریف اجمالی از برنامه نویسی React Native

React Native به شما امکان می دهد برنامه های موبایل خود را با استفاده از جاوا اسکریپت بسازید. از طراحی همانند React استفاده می کند، به شما اجازه می دهد یک UI غنی موبایل از اجزای اعلام کننده را کامپایل کنید. با React Native، شما یک برنامه وب موبایل، یک برنامه HTML5 یا یک برنامه ترکیبی ایجاد نمی کنید؛ شما یک برنامه تلفن همراه واقعی ایجاد کنید که از یک برنامه ساخته شده با استفاده از Objective-C یا جاوا غیر قابل تشخیص است. React Native با استفاده از همان بلوک های اساسی UI به عنوان برنامه های معمول iOS و Android عمل می کند. شما فقط این بلوک های ساختمانی را با استفاده از جاوا اسکریپت و React نشان می دهید.

ویژگی های React Features

1.  React : این یک چارچوب برای ساخت برنامه های وب و تلفن همراه با استفاده از جاوا اسکریپت است.
2. Native: شما می توانید از اجزای Native تحت کنترل جاوا اسکریپت استفاده کنید.
3. پلت فرم React Bative: از IOS و پلت فرم آندروید پشتیبانی می شود.

مزایای برنامه نویسی React Native

1. جاوا اسکریپت: شما می توانید دانش جاوا اسکریپت موجود را برای ساخت برنامه های تلفن همراه بومی استفاده کنید.
2. به اشتراک گذاری کد: شما می توانید بسیاری از کدهای خود را در پلت فرم های مختلف به اشتراک بگذارید.
3. جامعه: جامعه در اطراف React و React Native خیلی بزرگ است، و شما قادر خواهید بود هر پاسخی را که نیاز دارید پیدا کنید.

محدودیت های برنامه نویسی React Native

• اجزای Native: اگر می خواهید قابلیت Native ایجاد کنید که هنوز ایجاد نشده است، باید کد خاصی از پلت فرم را بنویسید.

لیست ۱۰ اپلیکیشن محبوبی که با React Native برنامه نویسی شده

1- ساخت اپلیکیشن فیسبوک با ریکت نیتیو

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

چرا فیس بوک از React Native استفاده می کند؟

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

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

2- ساخت اپلیکیشن FaceBook Ads با ریکت نیتیو

اپلیکیشن شبکه اجتماعی فیسبوک تنها اپلیکیشنی که از طرف شرکت فیسبوک با React Native ساخته شده بود، نیست، FaceBook Ads در حقیقت اولین اپلیکیشن آندرویدی بود که از سمت فیسبوک مبتنی بر React Native ساخته شد. این اپلیکیشن همزمان برای سیستم عامل های مختلفی دیگر نیز عرضه شد. این چهارچوب به نظر برای شرکت هایی با منطق پیچیده که باید فرمت ها، واحدهای پولی، نقاط زمانی و چیزهای مختلف دیگر را در اپلیکیشن پیاده سازی کنند، بسیار مناسب می‌آید. البته دلیل اصلی این حالت، این است که React Native مبتنی بر جاوا اسکریپت است.

چرا FaceBook Ads از React Native استفاده می کند؟

از ابتدای طراحی این اپلیکیشن تا پایان آن، باید گفت که این اپلیکیشن دارای تجربه کاربری بسیار خوب و توانایی کاوش بسیار ساده را دارد. انیمیشن ها و جلوه های اپلیکیشن عالی هستند، آنها حس غیر طبیعی را به شما نمی دهند و باعث به وجود آمدن باگ و پایین آمدن کارایی اپلیکیشن نمی شوند. تجربه استفاده از این اپلیکیشن بسیار خوب است، پس اگر از آن استفاده نمی کنید شدیدا توصیه می کنم برای یک بار از این اپلیکیشن استفاده کنید.

3- ساخت اپلیکیشن Walmart با ریکت نیتیو

Walmart چند سال پیش کل سیستم مدیریت وبسایت را به NodeJS منتقل کرد. و به نظر نتایج خوبی را در پی داشته است. جدیدا این وبسایت اپلیکیشن موبایل خودشان را نیز براساس React Native طراحی کرده‌اند.

Walmart اینکار را برای بهینه کردن اپلیکیشن های آندروید و آی او اس خود انجام داده است، این اپلیکیشن ها از منابع کمی استفاده می کنند و همچنین برای لود اطلاعات زمان کمتری را طی می کنند. حال با استفاده از این چهارچوب آنها نیاز به توسعه دهنده کمتری دارند و میتوانند در چیزهای دیگری نیز صرفه جویی کنند.

چرا Walmart از React Native استفاده می کند؟

یکی از اصلی‌ترین هدف های Walmart تبدیل شدن به یکی از بزرگترین بازارهای خرده فروشی در دنیای آنلاین است. برای داشتن چنین هدف بزرگی شرکت نیاز دارد که حرکت های بزرگی را انجام دهد که ممکن است دارای ریسک بالایی باشند. اما این تنها راهی است که می شود در دنیای رقابت ها سرآمد شد. به همین دلیل آنها تصمیم گرفته‌اند که تجربه مشتریان خود را با تکنولوژی های جدید و مدرن بهتر و بهتر کنند.

4- ساخت اپلیکیشن Bloomberg با ریکت نیتیو

سرویس Bloomberg به مشتریان خود دسترسی ساده‌ به محتوای شخصی سازی شده، ویدیوها و فییدهای استریم را از طریق اپلیکیشن های آندروید و آی او اس می دهد. تمام این امکانات از طریق رسانه Bloomberg فراهم می شود. برای توسعه اپلیکیشن های موبایل این شرکت تصمیم گرفت تا از این چهارچوب یونیک و منحصر به فرد استفاده کند. توسعه دهنده های این سرویس تصمیم گرفتند که اپلیکیشن مربوط به این رسانه را با استفاده از فریمورک React Native بسازند. یکی از مهمترین دلایل این موضوع محلی بودن فریمورک بود.

چرا Bloomberg از React Native استفاده می کند؟

«خب مشتری های سرویس Bloomberg بسیار زیاد هستند و به خاطر داشتن ارتباطات و نرخ ارسال اطلاعات بسیار زیاد ما به React Native مهاجرت کردیم.» این سخن را Gabriel Lеw مدیر ارشد بخش توسعه دهندگان Bloomberg می زند.

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

حتما بخوانید : آموزش ساخت یک اپلیکیشن کوچک کاربردی با برنامه‌ نویسی با React

5- ساخت اپلیکیشن اینستاگرام با React Native

اینستاگرام این چالش را پذیرفت که React Native را با ساختار نرم افزاری موجود مربوط به اپلیکیشن های موبایل خود یکپارچه کند. اگر نسخه های اولیه این اپلیکیشن را دیده باشید حتما حس داشتن یک Web View را احساس کرده‌اید. این در حالی‌ است که الان اپلیکیشن اینستاگرام به صورت محلی دارای رابط کاربری منحصر به فرد خود است.

چرا اینستاگرام از React Native استفاده می کند؟

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

6- ساخت اپلیکیشن SoundCloud Pulse با React Native

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

چرا SoundCloud Pulse از React Native استفاده می کند؟

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

7- ساخت اپلیکیشن Townske با React Native

Townske سرویسی است که به شما در گشت و گذارهای شهری کمک می کند. این اپلیکیشن شما را با مردم محلی آن شهر مرتبط می کند و مکان های محبوب آنها را به شما نشان می دهد. خب تصورش را بکنید شما در یک شهر جدید هستید و ارتباط ضعیفی با اینترنت دارید یا باتری موبایل‌تان در حال تمام شدن است. در این حالت مطمئنا آرزو دارید که همه ویژگی ها به درستی با این امکانات کار کند.

چرا Townske از React Native استفاده می کند؟

تمرکز اصلی React Native در طراحی رابط کاربری برای اپلیکیشن های موبایل است. در مقایسه با فریمورک های دیگری مانند AngularJs و MeteorJs این فریمورک تمرکزش روی رابط کاربری است. شاید این دلیلی باشد که React Native را بیشتر به یک کتابخانه شبیه می کند تا یک فریمورک! خب این ویژگی باعث می شود که توسعه دهنده بتواند دسترسی بیشتری روی رابط کاربری اپلیکیشن داشته باشد و بتواند اپلیکیشن سریع‌تر با رابط کاربری ساده‌تری طراحی کند. به نظر می رسد که این اپلیکیشن دارای سرعت لود بسیار بالا و میزان کم برای استفاده از منابع است.

8- ساخت اپلیکیشن Gyroscope با React Native

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

9- ساخت اپلیکیشن Wix با React Native

Wix شرکتی است که در سال ۲۰۰۶ شروع به کار کرد، این سرویس برای کاربران خود میزبانی وب و طراحی وب را مهیا می کند. با استفاده از این سرویس می توانید وبسایت خود را در قالب HTML۵ طراحی کنید، وبسایت های واکنشگرایی که فقط با درگ/درپ ساخته می شود. دو ویژگی خوب این ابزار، یکی این است که کاربران می توانند مطابق با نیاز های شرکت خودشان وبسایت طراحی کنند و ویژگی دوم این است که کاربران هیچ نیازی به دانش کدنویسی نخواهند داشت. خب در Wix می توان اپلیکیشن های مبتنی بر وب را نیز طراحی کرد که براساس React Native ساخته می شوند.

شاید برایتان جذاب باشد : پکیج آموزش برنامه نویسی اندروید+ساخت اپلیکیشن مشابه دیجی کالا

چرا Wix از React Native استفاده می کند؟

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

10- ساخت Delivery.com با React Native

Delivery.com سرویسی برای مشتریانی است که می خواهند از فروشگاه های پیشنهاد شده از طرف مردم محلی یک منطقه خاص استفاده کنند. البته جدای از فروشگاه، می توان به رستوران، کافه و … نیز اشاره کرد. هر روز در این سرویس بیشتر از یک میلیون درخواست از طرف مشتریان مختلف به این سرویس ارسال می شود. آنها در اپلیکیشن های آندروید و آی او اس خود از React Native استفاده می کنند.

چرا Delivery.com از React Native استفاده می کند؟

React Native به توسعه دهندگان اجازه می دهد تا بتوانند اپلیکیشن را قادر سازند تا از ویژگی های دستگاه استفاده کنند. ویژگی هایی مانند GPS، Rotate، Zoom و … . این کار با دسترسی به منابع حافظه کمتر و سرعت لود سریعتر انجام می گیرد. استفاده از React Native باعث شده که اپلیکیشن مرتب‌ تر و بهتر عمل کند.

منبع : https://brainhub.eu/blog/react-native-apps/

4 ویدئو معرفی برنامه نویسی React Native

Why React Native

Basics of React Native

Event Handling with React Native

Working with Props and State

The post React Native یا ریکت نیتیو چیست؟ appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.