mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-03-13 09:24:53 +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.
90 lines
2.7 KiB
JavaScript
90 lines
2.7 KiB
JavaScript
/* eslint-disable import/no-extraneous-dependencies */
|
|
|
|
const path = require('path');
|
|
const fs = require('fs');
|
|
const escape = require('escape-string-regexp');
|
|
const blacklist = require('metro-config/src/defaults/blacklist');
|
|
|
|
const root = path.resolve(__dirname, '..');
|
|
const packages = path.resolve(root, 'packages');
|
|
|
|
const workspaces = fs
|
|
// List all packages under `packages/`
|
|
.readdirSync(packages)
|
|
// Ignore hidden files such as .DS_Store
|
|
.filter((p) => !p.startsWith('.'))
|
|
.map((p) => path.join(packages, p));
|
|
|
|
// Get the list of dependencies for all packages in the monorepo
|
|
const modules = ['@expo/vector-icons']
|
|
.concat(
|
|
...workspaces.map((it) => {
|
|
const pak = JSON.parse(
|
|
fs.readFileSync(path.join(it, 'package.json'), 'utf8')
|
|
);
|
|
|
|
// We need to make sure that only one version is loaded for peerDependencies
|
|
// So we blacklist them at the root, and alias them to the versions in example's node_modules
|
|
return pak.peerDependencies ? Object.keys(pak.peerDependencies) : [];
|
|
})
|
|
)
|
|
.sort()
|
|
.filter(
|
|
(m, i, self) =>
|
|
// Remove duplicates and package names of the packages in the monorepo
|
|
self.lastIndexOf(m) === i && !m.startsWith('@react-navigation/')
|
|
);
|
|
|
|
module.exports = {
|
|
projectRoot: __dirname,
|
|
|
|
// We need to watch the root of the monorepo
|
|
// This lets Metro find the monorepo packages automatically using haste
|
|
// This also lets us import modules from monorepo root
|
|
watchFolders: [root],
|
|
|
|
resolver: {
|
|
// We need to blacklist the peerDependencies we've collected in packages' node_modules
|
|
blacklistRE: blacklist(
|
|
[].concat(
|
|
...workspaces.map((it) =>
|
|
modules.map(
|
|
(m) =>
|
|
new RegExp(`^${escape(path.join(it, 'node_modules', m))}\\/.*$`)
|
|
)
|
|
)
|
|
)
|
|
),
|
|
|
|
// When we import a package from the monorepo, metro won't be able to find their deps
|
|
// We need to specify them in `extraNodeModules` to tell metro where to find them
|
|
extraNodeModules: modules.reduce((acc, name) => {
|
|
acc[name] = path.join(root, 'node_modules', name);
|
|
return acc;
|
|
}, {}),
|
|
},
|
|
|
|
server: {
|
|
enhanceMiddleware: (middleware) => {
|
|
return (req, res, next) => {
|
|
// When an asset is imported outside the project root, it has wrong path on Android
|
|
// So we fix the path to correct one
|
|
if (/\/packages\/.+\.png\?.+$/.test(req.url)) {
|
|
req.url = `/assets/../${req.url}`;
|
|
}
|
|
|
|
return middleware(req, res, next);
|
|
};
|
|
},
|
|
},
|
|
|
|
transformer: {
|
|
getTransformOptions: () => ({
|
|
transform: {
|
|
experimentalImportSupport: false,
|
|
inlineRequires: true,
|
|
},
|
|
}),
|
|
},
|
|
};
|