تغییر navigationOptions بصورت خودکار در React Native
React Navigation دارای یک ساختار به نام Static navigationOptions است که شما میتونید با استفاده از این پارامتر رنگ پس زمینه action bar،رنگ عنوان و یک سری موارد دیگه رو مشخص کنید.اما شاید در بعضی از برنامه ها شما به عنوان توسعه دهنده قصد داشته باشید تا کاربر بتونه یک سری تغییرات در ظاهر برنامه ایجاد کنه.در این آموزش متنی قصد داریم یاد بگیریم چجوری بصورت خودکار و با کلیک بر روی button مقادیر navigationOptions رو تغییر بدیم.
1.قبل از اینکه شروع به کدنویسی کنیم نیازداریم کتابخانه React Navigation رو نصب کنیم.بنابرابن دایرکتوری پروژه رو در Command Prompt(Terminal) باز میکنیمو دستور زیر رو اجرا میکنیم.
|
1 |
npm install --save react-navigation |
2.ایمپورت کردن کامپوننت های StyleSheet, View, Text, YellowBox و TouchableOpacity در پروژه.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, YellowBox, TouchableOpacity } from 'react-native'; |
3.ایمپورت کردن StackNavigator از کتاخانه React Navigation
|
1 |
import { StackNavigator } from 'react-navigation'; |
4.در این آموزش متنی ما از یک activity استفاده میکنیم.پس یک کلاس به نام MainActivity ایجاد میکنیم.
|
1 2 3 4 5 |
class MainActivity extends Component { } |
5.تعریف ()constructor در کلاس MainActivity و استفاده از YellowBox.ignoreWarnings() برای برطرف کردن هشدار isMounted(…) is deprecated.
|
1 2 3 4 5 6 7 8 9 10 11 |
constructor(props) { super(props); YellowBox.ignoreWarnings( ['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader' ]); } |
6.تعریف static navigationOptions با navigation prop در کلاس MainActivity .ما از ()navigation.getParam برای مشخص کردن مقادیر بصورت خودکار استفاده میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
static navigationOptions = ({ navigation }) => { return { title: navigation.getParam('Title', 'Default Title'), headerStyle: { backgroundColor: navigation.getParam('BackgroundColor', '#E040FB'), }, headerTintColor: navigation.getParam('HeaderTintColor', '#fff') }; }; |
7.ایجاد یک تابع به نام ()apply_Green.در این تابع ما مقدار navigationOptions رو با استفاده از ()this.props.navigation.setParams بروزرسانی میکنیم.در این تابع هر سه مقدار itle, background color و Header tint color رو بروزرسانی میکنیم.
|
1 2 3 4 5 |
apply_Green=()=>{ this.props.navigation.setParams({Title: 'Green Activity', BackgroundColor : '#1B5E20', HeaderTintColor : '#fff'}); } |
8.ایجاد یک تابع دیگر به نام ()apply_Sky_Blue. عملکرد این تابع دقیقا شبیه تابع فوق است.
|
1 2 3 4 5 |
apply_Sky_Blue=()=>{ this.props.navigation.setParams({Title: 'Sky Blue Activity', BackgroundColor : '#2979FF', HeaderTintColor : '#fff'}); } |
9.ایجاد یک تابع دیگر به نام ()apply_Orange. عملکرد این تابع دقیقا شبیه دو تابع فوق است.
|
1 2 3 4 5 |
apply_Orange=()=>{ this.props.navigation.setParams({Title: 'Orange Activity', BackgroundColor : '#FF3D00', HeaderTintColor : '#fff'}); } |
10.ایجاد 3 button با استفاده از کامپوننت TouchableOpacity در بلاک render’s return و فراخوانی توابع بالا در رویداد onPress این buttonها.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
render() { return( <View style = {styles.MainContainer}> <TouchableOpacity onPress={this.apply_Green} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> APPLY GREEN COLOR </Text> </TouchableOpacity> <TouchableOpacity onPress={this.apply_Sky_Blue} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> APPLY SKY BLUE COLOR </Text> </TouchableOpacity> <TouchableOpacity onPress={this.apply_Orange} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> APPLY ORANGE COLOR </Text> </TouchableOpacity> </View> ); } |
11.استفاده از StackNavigator و قرار دادن کلاس MainActivity به عنوان اولین screen .
|
1 2 3 4 5 6 |
export default ActivityProject = StackNavigator( { First: { screen: MainActivity } }); |
12.ایجاد استایل سفارشی.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const styles = StyleSheet.create({ MainContainer : { flex:1, justifyContent: 'center', alignItems: 'center', padding: 10, backgroundColor: '#FAFAFA' }, button: { width: '100%', height: 40, padding: 10, backgroundColor: '#9E9E9E', borderRadius:7, marginTop: 12 }, TextStyle:{ color:'#fff', textAlign:'center', } }); |
13.کد کامل برنامه در فایل App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, YellowBox, TouchableOpacity } from 'react-native'; import { StackNavigator } from 'react-navigation'; class MainActivity extends Component { constructor(props) { super(props); YellowBox.ignoreWarnings( ['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader' ]); } static navigationOptions = ({ navigation }) => { return { title: navigation.getParam('Title', 'Default Title'), headerStyle: { backgroundColor: navigation.getParam('BackgroundColor', '#E040FB'), }, headerTintColor: navigation.getParam('HeaderTintColor', '#fff') }; }; apply_Green=()=>{ this.props.navigation.setParams({Title: 'Green Activity', BackgroundColor : '#1B5E20', HeaderTintColor : '#fff'}); } apply_Sky_Blue=()=>{ this.props.navigation.setParams({Title: 'Sky Blue Activity', BackgroundColor : '#2979FF', HeaderTintColor : '#fff'}); } apply_Orange=()=>{ this.props.navigation.setParams({Title: 'Orange Activity', BackgroundColor : '#FF3D00', HeaderTintColor : '#fff'}); } render() { return( <View style = {styles.MainContainer}> <TouchableOpacity onPress={this.apply_Green} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> APPLY GREEN COLOR </Text> </TouchableOpacity> <TouchableOpacity onPress={this.apply_Sky_Blue} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> APPLY SKY BLUE COLOR </Text> </TouchableOpacity> <TouchableOpacity onPress={this.apply_Orange} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> APPLY ORANGE COLOR </Text> </TouchableOpacity> </View> ); } } export default ActivityProject = StackNavigator( { First: { screen: MainActivity } }); const styles = StyleSheet.create({ MainContainer : { flex:1, justifyContent: 'center', alignItems: 'center', padding: 10, backgroundColor: '#FAFAFA' }, button: { width: '100%', height: 40, padding: 10, backgroundColor: '#9E9E9E', borderRadius:7, marginTop: 12 }, TextStyle:{ color:'#fff', textAlign:'center', } }); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید