kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-04-29 12:55:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: make sure disabling react-native-screens works

Browse Source
This commit is contained in:
Satyajit Sahoo
2021-05-09 06:38:45 +02:00
parent 4294318210
commit a369ba3645
6 changed files with 69 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/src/index.tsx
View File

@@ -61,7 +61,7 @@ if (Platform.OS !== 'web') {
LogBox.ignoreLogs(['Require cycle:']); LogBox.ignoreLogs(['Require cycle:']);
} }
enableScreens(false); enableScreens();
declare global { declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace // eslint-disable-next-line @typescript-eslint/no-namespace

13
packages/bottom-tabs/src/views/BottomTabView.tsx
View File

@@ -1,6 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { StyleSheet, Platform } from 'react-native'; import { StyleSheet, Platform } from 'react-native';
import { ScreenContainer } from 'react-native-screens';
import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
import { import {
NavigationHelpersContext, NavigationHelpersContext,
@@ -13,8 +12,7 @@ import {
SafeAreaProviderCompat, SafeAreaProviderCompat,
getHeaderTitle, getHeaderTitle,
} from '@react-navigation/elements'; } from '@react-navigation/elements';
import { MaybeScreenContainer, MaybeScreen } from './ScreenFallback';
import ScreenFallback from './ScreenFallback';
import BottomTabBar, { getTabBarHeight } from './BottomTabBar'; import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext'; import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext'; import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
@@ -93,8 +91,7 @@ export default function BottomTabView(props: Props) {
return ( return (
<NavigationHelpersContext.Provider value={navigation}> <NavigationHelpersContext.Provider value={navigation}>
<SafeAreaProviderCompat> <SafeAreaProviderCompat>
<ScreenContainer <MaybeScreenContainer
// @ts-ignore
enabled={detachInactiveScreens} enabled={detachInactiveScreens}
style={styles.container} style={styles.container}
> >
@@ -123,7 +120,7 @@ export default function BottomTabView(props: Props) {
} = descriptor.options; } = descriptor.options;
return ( return (
<ScreenFallback <MaybeScreen
key={route.key} key={route.key}
style={StyleSheet.absoluteFill} style={StyleSheet.absoluteFill}
visible={isFocused} visible={isFocused}
@@ -149,10 +146,10 @@ export default function BottomTabView(props: Props) {
{descriptor.render()} {descriptor.render()}
</Screen> </Screen>
</BottomTabBarHeightContext.Provider> </BottomTabBarHeightContext.Provider>
</ScreenFallback> </MaybeScreen>
); );
})} })}
</ScreenContainer> </MaybeScreenContainer>
<BottomTabBarHeightCallbackContext.Provider value={setTabBarHeight}> <BottomTabBarHeightCallbackContext.Provider value={setTabBarHeight}>
{renderTabBar()} {renderTabBar()}
</BottomTabBarHeightCallbackContext.Provider> </BottomTabBarHeightCallbackContext.Provider>

33
packages/bottom-tabs/src/views/ScreenFallback.tsx
View File

@@ -1,6 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import type { StyleProp, ViewStyle } from 'react-native'; import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
import { Screen, screensEnabled } from 'react-native-screens';
import { ResourceSavingView } from '@react-navigation/elements'; import { ResourceSavingView } from '@react-navigation/elements';
type Props = { type Props = {
@@ -10,12 +9,34 @@ type Props = {
style?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>;
}; };
export default function ScreenFallback({ visible, children, ...rest }: Props) { let Screens: typeof import('react-native-screens') | undefined;
if (screensEnabled?.()) {
try {
Screens = require('react-native-screens');
} catch (e) {
// Ignore
}
export const MaybeScreenContainer = ({
enabled,
...rest
}: ViewProps & {
enabled: boolean;
children: React.ReactNode;
}) => {
if (Screens?.screensEnabled?.()) {
return <Screens.ScreenContainer enabled={enabled} {...rest} />;
}
return <View {...rest} />;
};
export function MaybeScreen({ visible, children, ...rest }: Props) {
if (Screens?.screensEnabled?.()) {
return ( return (
<Screen activityState={visible ? 2 : 0} {...rest}> <Screens.Screen activityState={visible ? 2 : 0} {...rest}>
{children} {children}
</Screen> </Screens.Screen>
); );
} }

16
packages/drawer/src/views/DrawerView.tsx
View File

@@ -6,7 +6,6 @@ import {
Platform, Platform,
BackHandler, BackHandler,
} from 'react-native'; } from 'react-native';
import { ScreenContainer } from 'react-native-screens';
import { useSafeAreaFrame } from 'react-native-safe-area-context'; import { useSafeAreaFrame } from 'react-native-safe-area-context';
import Animated from 'react-native-reanimated'; import Animated from 'react-native-reanimated';
import { import {
@@ -22,9 +21,8 @@ import {
SafeAreaProviderCompat, SafeAreaProviderCompat,
getHeaderTitle, getHeaderTitle,
} from '@react-navigation/elements'; } from '@react-navigation/elements';
import { MaybeScreenContainer, MaybeScreen } from './ScreenFallback';
import { GestureHandlerRootView } from './GestureHandler'; import { GestureHandlerRootView } from './GestureHandler';
import ScreenFallback from './ScreenFallback';
import DrawerToggleButton from './DrawerToggleButton'; import DrawerToggleButton from './DrawerToggleButton';
import DrawerContent from './DrawerContent'; import DrawerContent from './DrawerContent';
import DrawerStatusContext from '../utils/DrawerStatusContext'; import DrawerStatusContext from '../utils/DrawerStatusContext';
@@ -191,8 +189,10 @@ function DrawerViewBase({
const renderSceneContent = () => { const renderSceneContent = () => {
return ( return (
// @ts-ignore <MaybeScreenContainer
<ScreenContainer enabled={detachInactiveScreens} style={styles.content}> enabled={detachInactiveScreens}
style={styles.content}
>
{state.routes.map((route, index) => { {state.routes.map((route, index) => {
const descriptor = descriptors[route.key]; const descriptor = descriptors[route.key];
const { lazy = true, unmountOnBlur } = descriptor.options; const { lazy = true, unmountOnBlur } = descriptor.options;
@@ -223,7 +223,7 @@ function DrawerViewBase({
} = descriptor.options; } = descriptor.options;
return ( return (
<ScreenFallback <MaybeScreen
key={route.key} key={route.key}
style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]} style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
visible={isFocused} visible={isFocused}
@@ -245,10 +245,10 @@ function DrawerViewBase({
> >
{descriptor.render()} {descriptor.render()}
</Screen> </Screen>
</ScreenFallback> </MaybeScreen>
); );
})} })}
</ScreenContainer> </MaybeScreenContainer>
); );
}; };

33
packages/drawer/src/views/ScreenFallback.tsx
View File

@@ -1,6 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import type { StyleProp, ViewStyle } from 'react-native'; import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
import { Screen, screensEnabled } from 'react-native-screens';
import { ResourceSavingView } from '@react-navigation/elements'; import { ResourceSavingView } from '@react-navigation/elements';
type Props = { type Props = {
@@ -10,12 +9,34 @@ type Props = {
style?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>;
}; };
export default function ScreenFallback({ visible, children, ...rest }: Props) { let Screens: typeof import('react-native-screens') | undefined;
if (screensEnabled?.()) {
try {
Screens = require('react-native-screens');
} catch (e) {
// Ignore
}
export const MaybeScreenContainer = ({
enabled,
...rest
}: ViewProps & {
enabled: boolean;
children: React.ReactNode;
}) => {
if (Screens?.screensEnabled?.()) {
return <Screens.ScreenContainer enabled={enabled} {...rest} />;
}
return <View {...rest} />;
};
export function MaybeScreen({ visible, children, ...rest }: Props) {
if (Screens?.screensEnabled?.()) {
return ( return (
<Screen activityState={visible ? 2 : 0} {...rest}> <Screens.Screen activityState={visible ? 2 : 0} {...rest}>
{children} {children}
</Screen> </Screens.Screen>
); );
} }

5
packages/stack/src/views/Screens.tsx
View File

@@ -17,10 +17,7 @@ export const MaybeScreenContainer = ({
children: React.ReactNode; children: React.ReactNode;
}) => { }) => {
if (Screens != null) { if (Screens != null) {
return ( return <Screens.ScreenContainer enabled={enabled} {...rest} />;
// @ts-ignore
<Screens.ScreenContainer enabled={enabled} {...rest} />
);
} }
return <View {...rest} />; return <View {...rest} />;