mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-01-12 22:51:18 +08:00
78afbffe97
## Motivation Right now `headerMode: float` renders an absolutely-positioned header. To offset the content appropriately, it then measures the height of the header and compensates with a margin. This approach unfortunately doesn't work well for animations. Before | After :-------------------------:|:-------------------------: <img src="http://ashoat.com/jerky_absolute.gif" width="300" /> | <img src="http://ashoat.com/smooth_relative.gif" width="300" /> ## Approach When rendering the header absolutely we want to render it above (after, in sibling order) the content. But when rendering it relatively we want to render it first (before, in sibling order). The margin compensation code is no longer necessary so I removed it. ## Test plan I used the `StackHeaderCustomization` example to make sure transitions between `headerTransparent` and `!headerTransparent` looked good. I added a custom (taller) header to test if height transitions looked good, and toggled `headerShown` to make sure that transitioned well too. Would be open to any other suggestions of things to test!
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.
Contributing
Please read through our contribution guide a 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.