۲۹
فروردین

جلسه ۱۳ : کار با Button در React Native

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

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

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. با مبحث HTTP در فریم ورک React Native و استفاده از Fetch در فریم ورک React Native همراه شدیم تا الان ، که به کار با Button در React Native رسیدیم در این بخش اجزای قابل لمس در فریم ورک راکت نیتیو را بیان نموده. در پایان بازخورد بومی قابل لمس Touchable Native Feedback در React Native و قابل لمس بدون بازخورد یا Touchable Without Feedback رو خواهیم داشت.

کار با Button در React Native

در این فصل، ما اجزای قابل لمس را در فریم ورک React Native نشان می دهیم. ما آنها را “قابل لمس” یا ‘touchable’ می نامیم، زیرا آن ها پیشنهاد ساخت برای حرکت یا انیمیشن هستند و ما می توانیم از onPress prop برای مدیریت رویداد لمسی استفاده کنیم.
فیس بوک کامپوننت Button را ارائه می دهد که می تواند به عنوان یک دکمه عمومی استفاده شود. مثال زیر را درک کنید.

App.js

مثال :

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

const App = () => {
   const handlePress = () => false
   return (
      <Button
         onPress = {handlePress}
         title = "Red button!"
         color = "red"
      />
   )
}
export default App

import React, { Component } from 'react'

import { Button } from 'react-native'

const App = () => {

const handlePress = () => false

return (

<Button

onPress = {handlePress}

title = "Red button!"

color = "red"

)

}

export default App

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

دکمه ها در React Native

Touchable Opacity

این عنصر هنگامی که لمس می شود، تاری یک عنصر را تغییر می دهد.

App.js

مثال :

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

const App = () => {
   return (
      <View style = {styles.container}>
         <TouchableOpacity>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableOpacity>
      </View>
   )
}
export default App

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
})

import React from 'react'

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

const App = () => {

return (

Button

</Text>

</TouchableOpacity>

</View>

)

}

export default App

const styles = StyleSheet.create ({

container: {

alignItems: 'center',

text: {

borderWidth: 1,

padding: 25,

borderColor: 'black',

backgroundColor: 'red'

}

})

Touchable Opacity – دکمه ها در React Native

Touchable Highlight

هنگامی که یک کاربر عنصر را فشار می دهد، رنگ تیره تر می شود و رنگ آندرلاین از طریق آن نشان داده می شود.

App.js

مثال :

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

const App = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableHighlight>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableHighlight>
      </View>
   )
}
export default App

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
})

import React from 'react'

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

const App = (props) => {

return (

Button

</Text>

</TouchableHighlight>

</View>

)

}

export default App

const styles = StyleSheet.create ({

container: {

alignItems: 'center',

text: {

borderWidth: 1,

padding: 25,

borderColor: 'black',

backgroundColor: 'red'

}

})

بازخورد بومی قابل لمس Touchable Native Feedback در React Native

زمانی که عنصر فشار داده می شود انیمیشن جوهر را شبیه سازی می کند.

App.js

مثال :

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

const Home = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableNativeFeedback>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableNativeFeedback>
      </View>
   )
}
export default Home

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
})

import React from 'react'

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

const Home = (props) => {

return (

Button

</Text>

</TouchableNativeFeedback>

</View>

)

}

export default Home

const styles = StyleSheet.create ({

container: {

alignItems: 'center',

text: {

borderWidth: 1,

padding: 25,

borderColor: 'black',

backgroundColor: 'red'

}

})

قابل لمس بدون بازخورد یا Touchable Without Feedback

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

مثال :

<TouchableWithoutFeedback>
   <Text>
      Button
   </Text>
</TouchableWithoutFeedback>

<Text>

Button

</Text>

</TouchableWithoutFeedback>

کلام پایانی

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

QR: جلسه ۱۳ : کار با Button در React Native

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

Touchable Opacity در React Native ,آموزش React Native ,اجزای قابل لمس را در فریم ورک React Native ,کار با Button در React Native

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

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

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

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

جلسه ۱۳ : کار با Button در React Native

مقدمه

کار با Button در React Native

App.js

Touchable Opacity

App.js

Touchable Highlight

App.js

بازخورد بومی قابل لمس Touchable Native Feedback در React Native

App.js

قابل لمس بدون بازخورد یا Touchable Without Feedback

کلام پایانی

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ