Soldan sağa doğru açılan gizli bir kısımda menülerinizi saklar. Bu bölümde basit bir “createDrawerNavigator” örneği yapacağız.
Tab Navigation bölümüne AppDrawer.js isminde bir dosya yaratıp, aşağıdaki kodları yazdım. Index.js bölümünden ilk çalışacak dosyayı ayarlayarak istediğiniz örneği çalıştırabilirsiniz.
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 |
import React from 'react'; import { Text, View, StyleSheet, Button, Image } from 'react-native'; import { createDrawerNavigator, createAppContainer } from 'react-navigation'; class MyHomeScreen extends React.Component { static navigationOptions = { drawerLabel: 'Home', drawerIcon: ({ tintColor }) => ( <Image source={require('./chats-icon.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), }; render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button onPress={() => this.props.navigation.navigate('Notifications')} title="Go to notifications" /> </View> ); } } class MyNotificationsScreen extends React.Component { static navigationOptions = { drawerLabel: 'Notifications', drawerIcon: ({ tintColor }) => ( <Image source={require('./notif-icon.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), }; render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button onPress={() => this.props.navigation.goBack()} title="Go back home" /> </View> ); } } const styles = StyleSheet.create({ icon: { width: 24, height: 24, }, }); const MyDrawerNavigator = createDrawerNavigator({ Home: { screen: MyHomeScreen, }, Notifications: { screen: MyNotificationsScreen, }, }); const MyApp = createAppContainer(MyDrawerNavigator); export default MyApp; |
Bu örneğinde Tab örneğine çok benzediği görülmektedir. Bu örnekte internetten bulduğum ikonları projeye ekledim. Drawer bölümünde ikonları görebilirsiniz.
Eğer bu gizli menüyü kod ile açmak veya kapamak isteseniz aşağıdaki kodları kullanabilirsiniz.
1 2 |
this.props.navigation.openDrawer(); this.props.navigation.closeDrawer(); |
Toogle özelliği ile açığı kapalı, kapalıyı açık yapabilirsiniz.
1 |
this.props.navigation.toggleDrawer(); |
Drawer’ın açık mı kapalı mı olduğunu öğrenmek için:
1 2 |
const parent = this.props.navigation.dangerouslyGetParent(); const isDrawerOpen = parent && parent.state && parent.state.isDrawerOpen; |
Çok basit örneklerle navigation konusu işledik. Daha fazla bilgi için React Navigation sitesini ziyaret edebilirsiniz.