آموزش سوئیچ در برنامه نویسی ریکت نیتیو

آموزش سوئیچ در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش سوئیچ در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

در این درس ما در چند مرحله مولفه Switch را توضیح خواهیم داد.

مرحله ۱: ایجاد فایل

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

اجازه دهید اکنون یک فایل جدید ایجاد کنیم: SwitchExample.js.

مرحله ۲: منطق

ما در حال انتقال مقدار از state و توابع برای تغییر وضعیت موارد سوئیچ به مولفه SwitchExample هستیم. از توابع Toggle برای به روزرسانی حالت استفاده خواهد شد.

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>
      );
   }
}

مرحله ۳: ارائه

مولفه سوئیچ دو props می گیرد. پس از فشار دادن سوئیچ کاربر توسط، تابع onValueChange تابع های Toggle ما را آغاز می کند. مقدار prop به حالت مولفه 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
   }
})

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

خروجی

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

1. آموزش برنامه نویسی ریکت نیتیو
2. آموزش تنظیمات محیطی برنامه نویسی ریکت نیتیو
3. آموزش برنامه نویسی ریکت نیتو – برنامه
4. آموزش state در برنامه نویسی ریکت نیتیو 
5. آموزش Props در برنامه نویسی ریکت نیتیو 
6. آموزش استایل دهی در برنامه نویسی ریکت نیتیو
7. آموزش Flexbox در برنامه نویسی ریکت نیتیو
8. آموزش ListView در برنامه نویسی ریکت نیتیو
9. آموزش ورودی متن در برنامه نویسی ریکت نیتیو
10. آموزش ScrollView در برنامه نویسی ریکت نیتیو
11. آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو
12.  آموزش HTTP در برنامه نویسی ریکت نیتیو
13. آموزش کار با دکمه ها در برنامه نویسی ریکت نیتیو
14. آموزش انیمیشن ها در برنامه نویسی ریکت نیتیو
15. آمورش اشکال زدایی در برنامه نویسی ریکت نیتیو
16. آموزش روتر در برنامه نویسی ریکت نیتیو
17. آموزش اجرای IOS در برنامه نویسی ریکت نیتیو
18. آموزش اجرای اندروید در برنامه نویسی ریکت نیتیو
19. آموزش View در برنامه نویسی ریکت نیتیو
20. آموزش WebView در برنامه نویسی ریکت نیتیو
21. آموزش مودال در برنامه نویسی ریکت نیتیو
22. آموزش نشانگر فعالیت در برنامه نویسی ریکت نیتیو
23. آموزش Picker در برنامه نویسی ریکت نیتیو
24. آموزش استفاده از نوار وضعیت در برنامه نویسی ریکت نیتیو