mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-06-11 16:30:07 +08:00
dbe961ba5b
This commit adds new `header` and `headerShown` options in drawer navigator to be able to show a header, along with a bunch of header related options similar to stack navigator. Historically, we have suggested to nest a stack navigator inside drawer navigator to render a header. While it works, it's not efficient to nest an entire navigator just for a header, considering it adds a lot of additional overhead from the code to handle animations, gestures etc. which won't ever be run in this case. It also increases the view hierarchy which has negative impacts on performance on Android, and could cause content not to render on older iOS devices. Another issue with the approach is that since drawer navigator is at the root in this setup, it's possible to open drawer from every screen in the stack navigator, which usually isn't the expected behaviour. It's necessary to write additional code to disable the gesture to open drawer in all screens but first. In addition, users also need to add a custom drawer icon to the header manually to be able to toggle the drawer If drawer navigator could render its own header we'd avoid all these shortcomings as well as make the code simpler. For now, I have implemented a new `Header` component in drawer since it's way simpler than stack navigator header. Though we may consider creating a shared UI package and add such components there which all our navigators could use. The `Header` includes a button to toggle the drawer by default, and supports customization options such as showing custom left/right/title components. For this commit, I have kept `headerShown` to `false` by default coz I wasn't sure if it'd be a breaking change to start showing headers in drawers. Probably we can toggle it to `true` by default in next major.
React Navigation 5
Routing and navigation for your React Native apps.
Documentation can be found at reactnavigation.org.
If you are looking for version 4, the code can be found in the 4.x branch.
Package Versions
Contributing
Please read through our contribution guide to get started!
Installing from a fork on GitHub
Since we use a monorepo, it's not possible to install a package from the repository URL. If you need to install a forked version from Git, you can use gitpkg.
First install gitpkg:
yarn global add gitpkg
Then follow these steps to publish and install a forked package:
- Fork this repo to your account and clone the forked repo to your local machine
- Open a Terminal and
cdto the location of the cloned repo - Run
yarnto install any dependencies - If you want to make any changes, make them and commit
- Now
cdto the package directory that you want to use (e.g.cd packages/stackfor@react-navigation/stack) - Run
gitpkg publishto publish the package to your repo
After publishing, you should see something like this:
Package uploaded to git@github.com:<user>/<repo>.git with the name <name>
You can now install the dependency in your project:
yarn add <user>/<repo>.git#<name>
Remember to replace <user>, <repo> and <name> with right values.