۲۹
فروردین

جلسه ۲۵ : کامپوننت Switch در React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در قسمت قبل در مورد status bar یا نوار وضعیت در React Native صحبت نمودیم. در این قسمت کامپوننت Switch در React Native رو بررسی خواهیم نمود.

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

در این فصل، ما کامپوننت سوئیچ را در چند مرحله توضیح خواهیم داد.
مرحله ۱: ایجاد فایل
ما از Component HomeContainer برای logic استفاده خواهیم کرد، اما ما باید کامپوننت presentational ایجاد کنیم.
حالا یک فایل جدید ایجاد کنید: SwitchExample.js.
مرحله ۲: logic
ما مقداری از state و توابع برای تبدیل آیتم های سوئیچ به Component SwitchExample را مرور می کنیم. توابع Toggle برای به روز رسانی state استفاده می شود.

App.js

مثال :

import React, { Component } from 'react'
import { View } from 'react-native'
import SwitchExample from './switch_example.js'

export default class HomeContainer extends Component {
   constructor() {
      super();
      this.state = {
         switch1Value: false,
      }
   }
   toggleSwitch1 = (value) => {
      this.setState({switch1Value: value})
      console.log('Switch 1 is: ' + value)
   }
   render() {
      return (
         <View>
            <SwitchExample
            toggleSwitch1 = {this.toggleSwitch1}
            switch1Value = {this.state.switch1Value}/>
         </View>
      );
   }
}

import React, { Component } from 'react'

import { View } from 'react-native'

import SwitchExample from './switch_example.js'

export default class HomeContainer extends Component {

constructor() {

super();

this.state = {

switch1Value: false,

}

toggleSwitch1 = (value) => {

this.setState({switch1Value: value})

console.log('Switch 1 is: ' + value)

}

render() {

return (

<View>

<SwitchExample

toggleSwitch1 = {this.toggleSwitch1}

switch1Value = {this.state.switch1Value}/>

</View>

);

}

مرحله ۳: Presentation
کامپوننت سوئیچ دو props را می گیرد. بعد از اینکه کاربر سوئیچ را فشار می دهد، onValueChange prop منجر به تابع toggle می شود. مقدار prop به وضعیت Component HomeContainer محدود می شود.

switch_example.js

مثال :

import React, { Component } from 'react'
import { View, Switch, StyleSheet }

from 'react-native'

export default SwitchExample = (props) => {
   return (
      <View style = {styles.container}>
         <Switch
         onValueChange = {props.toggleSwitch1}
         value = {props.switch1Value}/>
      </View>
   )
}
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      alignItems: 'center',
      marginTop: 100
   }
})

import React, { Component } from 'react'

import { View, Switch, StyleSheet }

from 'react-native'

export default SwitchExample = (props) => {

return (

<Switch

onValueChange = {props.toggleSwitch1}

value = {props.switch1Value}/>

</View>

)

}

const styles = StyleSheet.create ({

container: {

flex: 1,

alignItems: 'center',

marginTop: 100

}

})

اگر switch را فشار دهید، state به روز می شود. شما می توانید مقادیر را در کنسول بررسی کنید.

خروجی

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

کلام پایانی

خب ، کاربران محترم سایت پی وی لرن ،در این قسمت از سری آموزش های فرم ورک راکت نیتیو کامپوننت Switch در React Native رو بررسی نمودیم. در جلسه آینده مبحث کامپوننت Text در React Native رو خواهیم داشت.

QR: جلسه ۲۵ : کامپوننت Switch در React Native

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۵ : کامپوننت Switch در React Native

مقدمه

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

App.js

switch_example.js

خروجی

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ