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

4 سال پیش

امتیاز دهید post

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

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

در این درس، ما به شما اجزای قابل لمس را در ریکت نیتیو نشان خواهیم داد. ما آنها را “قابل لمس” می نامیم زیرا آنها انیمیشن های داخلی را ارائه می دهند و می توانیم از prop on برای مدیریت رویداد لمسی استفاده کنیم.

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

App.js

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

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

Buttons Redbutton

تعیین میزان تیرگی

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

App.js

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'

}

})

Buttons Touchopacity

هایلایت کردن

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

App.js

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'

}

})

بازخورد نیتیو قابل لمس

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

App.js

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'

}

})

لمس بدون بازخورد

این مورد باید هنگامی استفاده شود که بخواهید رویداد لمسی را بدون هیچ گونه انیمیشنی کنترل کنید

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

<Text>

Button

</Text>

</TouchableWithoutFeedback>

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

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

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

App.js

تعیین میزان تیرگی

App.js

هایلایت کردن

App.js

بازخورد نیتیو قابل لمس

App.js

لمس بدون بازخورد

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

دیدگاه شما

بدون دیدگاه

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

App.js

تعیین میزان تیرگی

App.js

هایلایت کردن

App.js

بازخورد نیتیو قابل لمس

App.js

لمس بدون بازخورد

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه