ایجاد Material Bottom Navigation در React Native
Material Bottom Navigation یک کامپوننت hidden هست که ابتدا در screen نمایش داده نمیشه و بعد از اینکه کاربر بر روی یک ناجیه خاص یا یک bottom خاص کلید کرد بصورت انیمیشن نمایش داده می شود.Material Bottom Navigation میتونه شامل هر کامپوننت یا widget باشه.در React Native کامپوننت خاصی به اسم Bottom Navigation وجود نداره اما ما میتونیم با استفاده از کتابخونه موجود در گیت هاب به راحتی به هدفمون برسیم.در این آموزش متنی ما یک Material Bottom Navigation برای React Native ایجاد میکنیم.
1.در اولین گام باید کتابخانه REACT NATIVE BTR رو نصب کنیم.برای اینکار کافیه دایرکتوری پروژه رو در cmd باز و دستور زیر رو اجرا کنیم.
|
1 |
npm i react-native-btr --save |
2.ایمپورت کامپوننت های StyleSheet, View, Platform, Text و Button در پروژه.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Platform, Text, Button } from 'react-native'; |
3.ایمپورت کامپوننت BottomSheet از کتابخانه react-native-btr
|
1 |
import { BottomSheet } from 'react-native-btr'; |
4.ایجاد constructor در کلاس App.درون سازنده یک state به نام visible با مقدار اولیه false ایجاد میکنیم.از این state برای نمایش و پنهان کردن Bottom Navigation استفاده میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 |
constructor() { super(); this.state = { visible: false } } |
5.ایجاد یک تابع به نام ()toggleBottomNavigationView_ در کلاس اصلی.درون این تابع ما مقدار state رو تغییر میدیم.
|
1 2 3 4 5 |
_toggleBottomNavigationView = () => { this.setState({ visible: !this.state.visible }) } |
6.ایجاد کامپوننت View در بلاک render’s return.
|
1 2 3 4 5 6 7 8 9 10 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
7.ایجاد کامپوننت Button درون View اصلی.با استفاده از این Button ما تابع toggleBottomNavigationView_ رو فراخوانی میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
render() { return ( <View style={styles.MainContainer}> <Button onPress={this._toggleBottomNavigationView} title="Show Bottom Navigation View" /> </View> ); } |
8.اضافه کردن کامپوننت BottomSheet بعد از Button.شما میتونید هر کامپوننتی رو درون BottomSheet قرار بدید.
visible : برای نمایش و پنهان کردن Bottom Sheet View استفاده می شود.
Bottom Sheet View : فعال کردن Android back button.با این فعالسازس در صورتی که کاربر بر روی دکمه BACK در گوشی های اندرویدی کلیک کند تابع toggle فراخوانی می شود و View پنهان می شود.
|
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}> <Button onPress={this._toggleBottomNavigationView} title="Show Bottom Navigation View" /> <BottomSheet visible={this.state.visible} onBackButtonPress={this._toggleBottomNavigationView} onBackdropPress={this._toggleBottomNavigationView}> <View style={styles.bottomNavigationView}> <Text style={styles.text}> Put All Your Components Here, Which you want to show inside Bottom Navigation View. </Text> </View> </BottomSheet> </View> ); } |
9.ایجاد استایل
|
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 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, margin: 2, justifyContent: 'center', alignItems: 'center', paddingTop: (Platform.OS) === 'ios' ? 20 : 0, backgroundColor: '#E0F7FA' }, bottomNavigationView: { backgroundColor: '#fff', width: '100%', height: 300, justifyContent: 'center', alignItems: 'center' }, text: { padding: 10, textAlign: 'center', fontSize: 20 } }); |
10.کد کامل در فایل 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 |
import React, { Component } from 'react'; import { StyleSheet, View, Platform, Text, Button } from 'react-native'; import { BottomSheet } from 'react-native-btr'; export default class App extends Component<{}> { constructor() { super(); this.state = { visible: false } } _toggleBottomNavigationView = () => { this.setState({ visible: !this.state.visible }) } render() { return ( <View style={styles.MainContainer}> <Button onPress={this._toggleBottomNavigationView} title="Show Bottom Navigation View" /> <BottomSheet visible={this.state.visible} onBackButtonPress={this._toggleBottomNavigationView} onBackdropPress={this._toggleBottomNavigationView}> <View style={styles.bottomNavigationView}> <Text style={styles.text}> Put All Your Components Here, Which you want to show inside Bottom Navigation View. </Text> </View> </BottomSheet> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, margin: 2, justifyContent: 'center', alignItems: 'center', paddingTop: (Platform.OS) === 'ios' ? 20 : 0, backgroundColor: '#E0F7FA' }, bottomNavigationView: { backgroundColor: '#fff', width: '100%', height: 300, justifyContent: 'center', alignItems: 'center' }, text: { padding: 10, textAlign: 'center', fontSize: 20 } }); |
اسکرین شات:
پاسخی بگذارید