mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-10 09:13:43 +08:00
chore: migrate to monorepo
This commit is contained in:
Satyajit Sahoo
246
example/src/StackWithTranslucentHeader.tsx
Normal file
246
example/src/StackWithTranslucentHeader.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
import * as React from 'react';
|
||||
import { Platform, ScrollView, StyleSheet, View } from 'react-native';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { getStatusBarHeight } from 'react-native-iphone-x-helper';
|
||||
import {
|
||||
NavigationEventPayload,
|
||||
NavigationEventSubscription,
|
||||
Themed,
|
||||
SupportedThemes,
|
||||
} from 'react-navigation';
|
||||
import {
|
||||
createStackNavigator,
|
||||
HeaderStyleInterpolators,
|
||||
NavigationStackScreenProps,
|
||||
NavigationStackProp,
|
||||
TransitionPresets,
|
||||
} from 'react-navigation-stack';
|
||||
import { Button } from './Shared/ButtonWithMargin';
|
||||
import { HeaderButtons } from './Shared/HeaderButtons';
|
||||
import SampleText from './Shared/SampleText';
|
||||
|
||||
interface MyNavScreenProps {
|
||||
navigation: NavigationStackProp;
|
||||
banner: React.ReactNode;
|
||||
}
|
||||
|
||||
class MyNavScreen extends React.Component<MyNavScreenProps> {
|
||||
// Inset to compensate for navigation bar being transparent.
|
||||
// And improved abstraction for this will be built in to react-navigation
|
||||
// at some point.
|
||||
|
||||
getHeaderInset(): any {
|
||||
const HEADER_HEIGHT =
|
||||
getStatusBarHeight() + Platform.select({ ios: 44, default: 56 });
|
||||
|
||||
return Platform.select({
|
||||
android: {
|
||||
contentContainerStyle: {
|
||||
paddingTop: HEADER_HEIGHT,
|
||||
},
|
||||
},
|
||||
ios: {
|
||||
contentInset: { top: HEADER_HEIGHT },
|
||||
contentOffset: { y: -HEADER_HEIGHT },
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { navigation, banner } = this.props;
|
||||
const { push, replace, popToTop, pop } = navigation;
|
||||
return (
|
||||
<ScrollView style={{ flex: 1 }} {...this.getHeaderInset()}>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button
|
||||
onPress={() => push('Profile', { name: 'Jane' })}
|
||||
title="Push a profile screen"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
|
||||
title="Navigate to a photos screen"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => replace('Profile', { name: 'Lucy' })}
|
||||
title="Replace with profile"
|
||||
/>
|
||||
<Button onPress={() => popToTop()} title="Pop to top" />
|
||||
<Button onPress={() => pop()} title="Pop" />
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
<Themed.StatusBar />
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface MyHomeScreenProps {
|
||||
navigation: NavigationStackProp;
|
||||
}
|
||||
|
||||
class MyHomeScreen extends React.Component<MyHomeScreenProps> {
|
||||
// eslint-disable-next-line react/sort-comp
|
||||
static navigationOptions = {
|
||||
title: 'Welcome',
|
||||
};
|
||||
s0: NavigationEventSubscription | null = null;
|
||||
s1: NavigationEventSubscription | null = null;
|
||||
s2: NavigationEventSubscription | null = null;
|
||||
s3: NavigationEventSubscription | null = null;
|
||||
|
||||
componentDidMount() {
|
||||
this.s0 = this.props.navigation.addListener('willFocus', this.onWF);
|
||||
this.s1 = this.props.navigation.addListener('didFocus', this.onDF);
|
||||
this.s2 = this.props.navigation.addListener('willBlur', this.onWB);
|
||||
this.s3 = this.props.navigation.addListener('didBlur', this.onDB);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this.s0!.remove();
|
||||
this.s1!.remove();
|
||||
this.s2!.remove();
|
||||
this.s3!.remove();
|
||||
}
|
||||
onWF = (a: NavigationEventPayload) => {
|
||||
console.log('willFocus HomeScreen', a);
|
||||
};
|
||||
onDF = (a: NavigationEventPayload) => {
|
||||
console.log('didFocus HomeScreen', a);
|
||||
};
|
||||
onWB = (a: NavigationEventPayload) => {
|
||||
console.log('willBlur HomeScreen', a);
|
||||
};
|
||||
onDB = (a: NavigationEventPayload) => {
|
||||
console.log('didBlur HomeScreen', a);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { navigation } = this.props;
|
||||
return <MyNavScreen banner="Home Screen" navigation={navigation} />;
|
||||
}
|
||||
}
|
||||
|
||||
interface MyPhotosScreenProps {
|
||||
navigation: NavigationStackProp;
|
||||
}
|
||||
class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
|
||||
static navigationOptions = {
|
||||
title: 'Photos',
|
||||
};
|
||||
s0: NavigationEventSubscription | null = null;
|
||||
s1: NavigationEventSubscription | null = null;
|
||||
s2: NavigationEventSubscription | null = null;
|
||||
s3: NavigationEventSubscription | null = null;
|
||||
|
||||
componentDidMount() {
|
||||
this.s0 = this.props.navigation.addListener('willFocus', this.onWF);
|
||||
this.s1 = this.props.navigation.addListener('didFocus', this.onDF);
|
||||
this.s2 = this.props.navigation.addListener('willBlur', this.onWB);
|
||||
this.s3 = this.props.navigation.addListener('didBlur', this.onDB);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this.s0!.remove();
|
||||
this.s1!.remove();
|
||||
this.s2!.remove();
|
||||
this.s3!.remove();
|
||||
}
|
||||
onWF = (a: NavigationEventPayload) => {
|
||||
console.log('willFocus PhotosScreen', a);
|
||||
};
|
||||
onDF = (a: NavigationEventPayload) => {
|
||||
console.log('didFocus PhotosScreen', a);
|
||||
};
|
||||
onWB = (a: NavigationEventPayload) => {
|
||||
console.log('willBlur PhotosScreen', a);
|
||||
};
|
||||
onDB = (a: NavigationEventPayload) => {
|
||||
console.log('didBlur PhotosScreen', a);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { navigation } = this.props;
|
||||
return (
|
||||
<MyNavScreen
|
||||
banner={`${navigation.state.params!.name}'s Photos`}
|
||||
navigation={navigation}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const MyProfileScreen = ({
|
||||
navigation,
|
||||
}: {
|
||||
navigation: NavigationStackProp;
|
||||
}) => (
|
||||
<MyNavScreen
|
||||
banner={`${navigation.state.params!.mode === 'edit' ? 'Now Editing ' : ''}${
|
||||
navigation.state.params!.name
|
||||
}'s Profile`}
|
||||
navigation={navigation}
|
||||
/>
|
||||
);
|
||||
|
||||
MyProfileScreen.navigationOptions = (props: {
|
||||
navigation: NavigationStackProp;
|
||||
theme: SupportedThemes;
|
||||
}) => {
|
||||
const { navigation, theme } = props;
|
||||
const { state, setParams } = navigation;
|
||||
const { params } = state;
|
||||
return {
|
||||
headerBackImage: params!.headerBackImage
|
||||
? () => params!.headerBackImage
|
||||
: undefined,
|
||||
// Render a button on the right side of the header.
|
||||
// When pressed switches the screen to edit mode.
|
||||
headerRight: () => (
|
||||
<HeaderButtons>
|
||||
<HeaderButtons.Item
|
||||
color={theme === 'light' ? '#000' : '#fff'}
|
||||
title={params!.mode === 'edit' ? 'Done' : 'Edit'}
|
||||
onPress={() =>
|
||||
setParams({ mode: params!.mode === 'edit' ? '' : 'edit' })
|
||||
}
|
||||
/>
|
||||
</HeaderButtons>
|
||||
),
|
||||
headerTitle: `${params!.name}'s Profile!`,
|
||||
};
|
||||
};
|
||||
|
||||
const StackWithTranslucentHeader = createStackNavigator(
|
||||
{
|
||||
Home: {
|
||||
screen: MyHomeScreen,
|
||||
},
|
||||
Photos: {
|
||||
path: 'photos/:name',
|
||||
screen: MyPhotosScreen,
|
||||
},
|
||||
Profile: {
|
||||
path: 'people/:name',
|
||||
screen: MyProfileScreen,
|
||||
},
|
||||
},
|
||||
{
|
||||
defaultNavigationOptions: ({ theme }: NavigationStackScreenProps) => ({
|
||||
...TransitionPresets.SlideFromRightIOS,
|
||||
headerBackground: () =>
|
||||
Platform.OS === 'ios' ? (
|
||||
<BlurView
|
||||
style={{ flex: 1 }}
|
||||
blurType={theme === 'light' ? 'light' : 'dark'}
|
||||
/>
|
||||
) : (
|
||||
<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
|
||||
),
|
||||
headerStyle: {
|
||||
borderBottomColor: theme === 'light' ? '#A7A7AA' : 'transparent',
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
},
|
||||
headerTransparent: true,
|
||||
headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
export default StackWithTranslucentHeader;
|
||||
Reference in New Issue
Block a user