آموزش کار با Button در ریکت نیتیو

0 دیدگاه

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

آموزش کار با Button در ریکت نیتیو

فیس بوک کامپوننت Button را ارائه می دهد که می تواند به عنوان یک دکمه عمومی استفاده شود. مثال زیر را درک کنید.

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

const App = () =&gt; {
   const handlePress = () =&gt; false
   return (
      &lt;Button
         onPress = {handlePress}
         title = "Red button!"
         color = "red"
      /&gt;
   )
}
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 پیش فرض با نیازهای شما منطبق نباشد، می توانید از یکی از اجزای زیر استفاده کنید.

آموزش ریکت نیتیو

Touchable Opacity در ریکت نیتیو

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

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

const App = () =&gt; {
   return (
      &lt;View style = {styles.container}&gt;
         &lt;TouchableOpacity&gt;
            &lt;Text style = {styles.text}&gt;
               Button
            &lt;/Text&gt;
         &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
   )
}
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 Highlight در ریکت نیتیو

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

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

const App = (props) =&gt; {
   return (
      &lt;View style = {styles.container}&gt;
         &lt;TouchableHighlight&gt;
            &lt;Text style = {styles.text}&gt;
               Button
            &lt;/Text&gt;
         &lt;/TouchableHighlight&gt;
      &lt;/View&gt;
   )
}
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

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

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

const Home = (props) =&gt; {
   return (
      &lt;View style = {styles.container}&gt;
         &lt;TouchableNativeFeedback&gt;
            &lt;Text style = {styles.text}&gt;
               Button
            &lt;/Text&gt;
         &lt;/TouchableNativeFeedback&gt;
      &lt;/View&gt;
   )
}
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

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

&lt;TouchableWithoutFeedback&gt;
   &lt;Text&gt;
      Button
   &lt;/Text&gt;
&lt;/TouchableWithoutFeedback&gt;

<Text>

Button

</Text>

</TouchableWithoutFeedback>

منبع

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

React Native یا ریکت نیتیو چیست؟

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

آموزش App در React Native

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

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

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

آموزش flex در برنامه نویسی react native

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

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

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

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

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

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

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

صابر بوستانی

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

پکیج آموزش پروژه محور لاراول و طراحی وب سایت کانون قلم چی

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۶ دی ۱۳۹۹

آموزش کار با Button در ریکت نیتیو

آموزش کار با Button در ریکت نیتیو

Touchable Opacity در ریکت نیتیو

Touchable Highlight در ریکت نیتیو

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

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

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط