Install react-navigation using npm or Yarn. You can also define your own component to show up as a drawer if you want to have a custom UI and actions for your side-menu. The DrawerNavigator comes with a default UI which supports an icon and a title per list item, which looks quite elegant. You can set up the DrawerNavigator by writing only 4 lines of code. You can obviously customize everything in your drawer since it is all written in JavaScript. So you need to be a little careful when managing navigation to/from a different stack.ĭrawerNavigator: This navigator gives us the side-menu which we see in most mobile applications nowadays. The only difference is that the routes you define in TabNavigator get mounted all at once. The way of defining a TabNavigator is pretty similar to a StackNavigator. React-navigation supports this navigator out of the box. We have seen this in Facebook, Twitter, and many other popular apps. TabNavigator: This is also quite a common user interface where we have a bunch of tabs and can swipe between them. Each of the screens gets mounted only when you navigate to that particular screen and gets un-mounted only when you go back or manually reset the navigation state. You define a StackNavigator by passing the routes object inside the StackNavigator function from react-navigation. We just explained how stacks work in navigation. You will use it for most react-native applications. StackNavigator: This is the most common navigator of all. Let's try to understand all three of them one-by-one. An app might contain all the available navigators. React-navigation offers a bunch of navigators predefined for our use. Types of navigators offered by react-navigation SVG Icons using react-native-vector-icons □ Speed up development with some and ES7 features □ Creating basic components and writing platform-specific codeĮSLint: The guardian of code conventions ⚔️
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |