Switch

حامد 
  بازدید : 45
چهارشنبه 6 فروردين 1404 زمان : 12:47 


1
2
3
4
5

Switch
درین قسمت ، کامپوننت Switch را در یکسری مرحله توضیح خوا‌هیم بخشید.

مرحله ۱ : تولید فولدر
ما از کامپوننت HomeContainer برای logic استعمال خوا هیم کرد ، البته بایستی مؤلفه presentational طراحی اپلیکیشن در مشهد را ساخت کنیم.
اذن دهید در حال حاضر یک پوشه تازه ساخت کنیم : SwitchExample.js

مرحله ۲ : Logic
ما در هم اکنون جابجایی مقدار از state و توابع برای تغییر و تحول مورد های switch به کامپوننت SwitchExample هستیم.
از Toggle functions برای به‌روزرسانی state به کارگیری میشود.

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 (

toggleSwitch1 = {this.toggleSwitch1}
switch1Value = {this.state.switch1Value}/>

);
}
}
COPY
مرحله ۳ : Presentation
کامپوننت Switch دو محور دارااست.
شالوده onValueChange بعداز فشردن سوئیچ بوسیله مخاطب ، toggle functions مارا فعال می نماید.
مقدار prop به state کامپوننت HomeContainer محصور میگردد.

switch_example.js

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

from \'react-native\'

export default SwitchExample = (props) => {
return (

onValueChange = {props.toggleSwitch1}
value = {props.switch1Value}/>

)
}
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: \'center\',
marginTop: 100
}
})
COPY
در شرایطی که سوئیچ را فشار دهیم ، state آپ تو دیت میشود. میتوانید مقادیر را در کنسول تحقیق فرمائید.
خروجی :

Text
در‌این نصیب در باب کامپوننت Text در React Native کلام خوا هیم کرد.
این کامپوننت می‌تواند داخل هم باشد و می‌تواند خاصیت را از پدر و مادر به فرزند به ارث غالب شود.
این میتواند از اکثری جهات موثر باشد.
ما مثال ای از والا کردن کلام نخستین ، استایل دادن به لغت ها یا این که بخش هایی از متن و … را به شما آرم خوا‌هیم بخشید.

مرحله ۱ : ساخت فولدر
فایلی که می‌خواهیم بسازیم text_example.js میباشد

مرحله ۲ : App.js
درین مرحله تنها یک container معمولی ساخت میکنیم.

App.js

import React, { Component } from \'react\'
import TextExample from \'./text_example.js\'

const App = () => {
return (

)
}
export default App
COPY
مرحله ۳ : Text

درین مرحله از الگوی وراثت استعمال خوا هیم کرد.
styles.text برای کل کامپوننت های Text انجام گردد.
همینطور میتوانید متوجه گردید که به چه شکل styling properties دیگر را برای بعضی از بخش‌های Text تهیه میکنیم.
اساسی میباشد که بدانید تمامی المان های فرزند دارنده استایل های پدر و مادر می‌باشند.

text_example.js

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

const TextExample = () => {
return (

orem ipsum dolor sit amet, sed do eiusmod.

Ut enim ad minim veniam,
quis aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.

)
}
export default TextExample

const styles = StyleSheet.create ({
container: {
alignItems: \'center\',
marginTop: 100,
padding: 20
},
text: {
color: \'#41cdf4\',
},
capitalLetter: {
color: \'red\',
fontSize: 20
},
wordBold: {
fontWeight: \'bold\',
color: \'black\'
},
italicText: {
color: \'#37859b\',
fontStyle: \'italic\'
},
textShadow: {
textShadowColor: \'red\',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius : 5
}
})
COPY
خروجی ذیل را اخذ خواهید کرد :