طراحی Material Button در react native

سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری یک Material Button در react native طراحی کنیم.Button یکی از کامپوننت های پرکاربرد react native است زیرا بدون Button کاربر نمیتواند عملیات خاصی انجام بدهد.به طور پیش فرض react native از یک استایل Material برای Button استفاده میکند.بنابراین در این آموزش متنی ما یک button ایجاد میکنیم و با استفاده از Props مشخص میکنیم که هروقت کاربر بر روی این دکمه کلیک کرد یک پیام به صورت dialog نمایش داده شود.

1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقالهآموزش نصب react native بر روی مک رو مطالعه کنید)

2.اضافه کردن کامپوننت های AppRegistry,Button, Alert و View در بلاک import

import { AppRegistry, View, Button, Alert } from 'react-native';

1	import { AppRegistry, View, Button, Alert } from 'react-native';

3. ایجاد تابع ()SampleFunction درون کلاس اصلی.در این تابع ما یک پیغام به صورت dialog به کاربر نمایش میدهیم.

SampleFunction() {
 
    Alert.alert('Button Clicked!')
 
}

SampleFunction() {

Alert.alert('Button Clicked!')

}

4.اضافه کردن تگ View در بلاک render return

render() {
    return (
     <View>
 
      
 
     </View>
    );
  }

render() {

return (

<View>

</View>

);

}

5.استایل دهی به View

render() {
    return (
     <View style={{flex :1, justifyContent: 'center', margin: 10 }}>
 
       
 
     </View>
    );
  }

render() {

return (

</View>

);

}

6.اضافه کردن Button درون View

render() {
    return (
     <View style={{flex :1, justifyContent: 'center', margin: 10 }}>
 
        <Button />
 
     </View>
    );
  }

render() {

return (

</View>

);

}

7.مشخص کردن رنگ و عنوان Button

render() {
    return (
     <View style={{flex :1, justifyContent: 'center', margin: 10 }}>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/create-multi-language-localization-support-react-native-app/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/react_native_localization-300x210.png" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">آموزش React Native - چندزبانه کردن اپلیکیشن</div></div></div><div class="ctaButton"></div></div></a></div> 
        <Button title="Sample Button" color="#2196F3" />
 
     </View>
    );
  }

render() {

return (

</View>

);

}

8.اضافه کردن onPress به Button

render() {
    return (
     <View style={{flex :1, justifyContent: 'center', margin: 10 }}>
 
        <Button onPress={ } title="Sample Button" color="#2196F3" />
 
     </View>
    );
  }

render() {

return (

</View>

);

}

9.فراخوانی تابع()SampleFunction در onPress

render() {
    return (
     <View style={{flex :1, justifyContent: 'center', margin: 10 }}>
 
        <Button onPress={ this.SampleFunction } title="Sample Button" color="#2196F3" />
 
     </View>
    );
  }

render() {

return (

</View>

);

}

10.کد کامل برنامه در فایل index.js

import React, { Component } from 'react';
 
import { AppRegistry, View, Button, Alert } from 'react-native';
 
class Myproject extends Component {
 
  SampleFunction() {
 
    Alert.alert('Button Clicked!')
 
  }
 
  render() {
    return (
     <View style={{flex :1, justifyContent: 'center', margin: 10 }}>
 
        <Button onPress={ this.SampleFunction } title="Sample Button" color="#2196F3" />
 
     </View>
    );
  }
}
 
AppRegistry.registerComponent('Myproject', () => Myproject);