Skip to content

Commit 896e81d

Browse files
Wang-YuanbaiWang-Yuanbai
committed
elements回退到在源库基础上适配鸿蒙
1 parent d19e23f commit 896e81d

36 files changed

+984
-25
lines changed

‎packages/elements/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@react-native-oh-tpl/elements",
33
"description": "UI Components for React Navigation",
4-
"version": "1.3.21-0.1.2",
4+
"version": "1.3.21-0.1.3",
55
"harmony": {
66
"alias": "@react-navigation/elements"
77
},

‎packages/elements/src/Background.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useTheme } from '@react-navigation/native';
2+
import * as React from 'react';
3+
import { View, ViewProps } from 'react-native';
4+
5+
type Props = ViewProps & {
6+
children: React.ReactNode;
7+
};
8+
9+
export default function Background({ style, ...rest }: Props) {
10+
const { colors } = useTheme();
11+
12+
return (
13+
<View
14+
{...rest}
15+
style={[{ flex: 1, backgroundColor: colors.background }, style]}
16+
/>
17+
);
18+
}

‎packages/elements/src/Header/Header.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import {
55
useSafeAreaInsets,
66
} from 'react-native-safe-area-context';
77

8-
import type { HeaderOptions, Layout } from '@react-navigation/elements/src/types';
8+
import type { HeaderOptions, Layout } from '../types';
99
import getDefaultHeaderHeight from './getDefaultHeaderHeight';
10-
import HeaderBackground from '@react-navigation/elements/src/Header/HeaderBackground';
11-
import HeaderShownContext from '@react-navigation/elements/src/Header/HeaderShownContext';
12-
import HeaderTitle from '@react-navigation/elements/src/Header/HeaderTitle';
10+
import HeaderBackground from './HeaderBackground';
11+
import HeaderShownContext from './HeaderShownContext';
12+
import HeaderTitle from './HeaderTitle';
1313

1414
type Props = HeaderOptions & {
1515
/**

‎packages/elements/src/Header/HeaderBackButton.tsx

+247
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
import { useTheme } from '@react-navigation/native';
2+
import * as React from 'react';
3+
import {
4+
Animated,
5+
I18nManager,
6+
Image,
7+
LayoutChangeEvent,
8+
Platform,
9+
StyleSheet,
10+
View,
11+
} from 'react-native';
12+
13+
import MaskedView from '../MaskedView';
14+
import PlatformPressable from '../PlatformPressable';
15+
import type { HeaderBackButtonProps } from '../types';
16+
17+
export default function HeaderBackButton({
18+
disabled,
19+
allowFontScaling,
20+
backImage,
21+
label,
22+
labelStyle,
23+
labelVisible = Platform.OS === 'ios',
24+
onLabelLayout,
25+
onPress,
26+
pressColor,
27+
pressOpacity,
28+
screenLayout,
29+
tintColor: customTintColor,
30+
titleLayout,
31+
truncatedLabel = 'Back',
32+
accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
33+
testID,
34+
style,
35+
}: HeaderBackButtonProps) {
36+
const { colors } = useTheme();
37+
38+
const [initialLabelWidth, setInitialLabelWidth] = React.useState<
39+
undefined | number
40+
>(undefined);
41+
42+
const tintColor =
43+
customTintColor !== undefined
44+
? customTintColor
45+
: Platform.select({
46+
ios: colors.primary,
47+
default: colors.text,
48+
});
49+
50+
const handleLabelLayout = (e: LayoutChangeEvent) => {
51+
onLabelLayout?.(e);
52+
53+
setInitialLabelWidth(e.nativeEvent.layout.x + e.nativeEvent.layout.width);
54+
};
55+
56+
const shouldTruncateLabel = () => {
57+
return (
58+
!label ||
59+
(initialLabelWidth &&
60+
titleLayout &&
61+
screenLayout &&
62+
(screenLayout.width - titleLayout.width) / 2 < initialLabelWidth + 26)
63+
);
64+
};
65+
66+
const renderBackImage = () => {
67+
if (backImage) {
68+
return backImage({ tintColor });
69+
} else {
70+
return (
71+
<Image
72+
style={[
73+
styles.icon,
74+
Boolean(labelVisible) && styles.iconWithLabel,
75+
Boolean(tintColor) && { tintColor },
76+
]}
77+
source={require('../assets/back-icon.png')}
78+
fadeDuration={0}
79+
/>
80+
);
81+
}
82+
};
83+
84+
const renderLabel = () => {
85+
const leftLabelText = shouldTruncateLabel() ? truncatedLabel : label;
86+
87+
if (!labelVisible || leftLabelText === undefined) {
88+
return null;
89+
}
90+
91+
const labelElement = (
92+
<View
93+
style={
94+
screenLayout
95+
? // We make the button extend till the middle of the screen
96+
// Otherwise it appears to cut off when translating
97+
[styles.labelWrapper, { minWidth: screenLayout.width / 2 - 27 }]
98+
: null
99+
}
100+
>
101+
<Animated.Text
102+
accessible={false}
103+
onLayout={
104+
// This measurement is used to determine if we should truncate the label when it doesn't fit
105+
// Only measure it when label is not truncated because we want the measurement of full label
106+
leftLabelText === label ? handleLabelLayout : undefined
107+
}
108+
style={[
109+
styles.label,
110+
tintColor ? { color: tintColor } : null,
111+
labelStyle,
112+
]}
113+
numberOfLines={1}
114+
allowFontScaling={!!allowFontScaling}
115+
>
116+
{leftLabelText}
117+
</Animated.Text>
118+
</View>
119+
);
120+
121+
if (backImage || Platform.OS !== 'ios') {
122+
// When a custom backimage is specified, we can't mask the label
123+
// Otherwise there might be weird effect due to our mask not being the same as the image
124+
return labelElement;
125+
}
126+
127+
return (
128+
<MaskedView
129+
maskElement={
130+
<View style={styles.iconMaskContainer}>
131+
<Image
132+
source={require('../assets/back-icon-mask.png')}
133+
style={styles.iconMask}
134+
/>
135+
<View style={styles.iconMaskFillerRect} />
136+
</View>
137+
}
138+
>
139+
{labelElement}
140+
</MaskedView>
141+
);
142+
};
143+
144+
const handlePress = () => onPress && requestAnimationFrame(onPress);
145+
146+
return (
147+
<PlatformPressable
148+
disabled={disabled}
149+
accessible
150+
accessibilityRole="button"
151+
accessibilityLabel={accessibilityLabel}
152+
testID={testID}
153+
onPress={disabled ? undefined : handlePress}
154+
pressColor={pressColor}
155+
pressOpacity={pressOpacity}
156+
android_ripple={androidRipple}
157+
style={[styles.container, disabled && styles.disabled, style]}
158+
hitSlop={Platform.select({
159+
ios: undefined,
160+
default: { top: 16, right: 16, bottom: 16, left: 16 },
161+
})}
162+
>
163+
<React.Fragment>
164+
{renderBackImage()}
165+
{renderLabel()}
166+
</React.Fragment>
167+
</PlatformPressable>
168+
);
169+
}
170+
171+
const androidRipple = {
172+
borderless: true,
173+
foreground: Platform.OS === 'android' && Platform.Version >= 23,
174+
radius: 20,
175+
};
176+
177+
const styles = StyleSheet.create({
178+
container: {
179+
alignItems: 'center',
180+
flexDirection: 'row',
181+
minWidth: StyleSheet.hairlineWidth, // Avoid collapsing when title is long
182+
...Platform.select({
183+
ios: null,
184+
default: {
185+
marginVertical: 3,
186+
marginHorizontal: 11,
187+
},
188+
}),
189+
},
190+
disabled: {
191+
opacity: 0.5,
192+
},
193+
label: {
194+
fontSize: 17,
195+
// Title and back label are a bit different width due to title being bold
196+
// Adjusting the letterSpacing makes them coincide better
197+
letterSpacing: 0.35,
198+
},
199+
labelWrapper: {
200+
// These styles will make sure that the label doesn't fill the available space
201+
// Otherwise it messes with the measurement of the label
202+
flexDirection: 'row',
203+
alignItems: 'flex-start',
204+
},
205+
icon: Platform.select({
206+
ios: {
207+
height: 21,
208+
width: 13,
209+
marginLeft: 8,
210+
marginRight: 22,
211+
marginVertical: 12,
212+
resizeMode: 'contain',
213+
transform: [{ scaleX: I18nManager.getConstants().isRTL ? -1 : 1 }],
214+
},
215+
default: {
216+
height: 24,
217+
width: 24,
218+
margin: 3,
219+
resizeMode: 'contain',
220+
transform: [{ scaleX: I18nManager.getConstants().isRTL ? -1 : 1 }],
221+
},
222+
}),
223+
iconWithLabel:
224+
Platform.OS === 'ios'
225+
? {
226+
marginRight: 6,
227+
}
228+
: {},
229+
iconMaskContainer: {
230+
flex: 1,
231+
flexDirection: 'row',
232+
justifyContent: 'center',
233+
},
234+
iconMaskFillerRect: {
235+
flex: 1,
236+
backgroundColor: '#000',
237+
},
238+
iconMask: {
239+
height: 21,
240+
width: 13,
241+
marginLeft: -14.5,
242+
marginVertical: 12,
243+
alignSelf: 'center',
244+
resizeMode: 'contain',
245+
transform: [{ scaleX: I18nManager.getConstants().isRTL ? -1 : 1 }],
246+
},
247+
});

‎packages/elements/src/Header/HeaderBackContext.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import getNamedContext from '../getNamedContext';
2+
3+
const HeaderBackContext = getNamedContext<{ title: string } | undefined>(
4+
'HeaderBackContext',
5+
undefined
6+
);
7+
8+
export default HeaderBackContext;

‎packages/elements/src/Header/HeaderBackground.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { useTheme } from '@react-navigation/native';
2+
import * as React from 'react';
3+
import {
4+
Animated,
5+
Platform,
6+
StyleProp,
7+
StyleSheet,
8+
ViewProps,
9+
ViewStyle,
10+
} from 'react-native';
11+
12+
type Props = Omit<ViewProps, 'style'> & {
13+
style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
14+
children?: React.ReactNode;
15+
};
16+
17+
export default function HeaderBackground({ style, ...rest }: Props) {
18+
const { colors } = useTheme();
19+
20+
return (
21+
<Animated.View
22+
style={[
23+
styles.container,
24+
{
25+
backgroundColor: colors.card,
26+
borderBottomColor: colors.border,
27+
shadowColor: colors.border,
28+
},
29+
style,
30+
]}
31+
{...rest}
32+
/>
33+
);
34+
}
35+
36+
const styles = StyleSheet.create({
37+
container: {
38+
flex: 1,
39+
...Platform.select({
40+
android: {
41+
elevation: 4,
42+
},
43+
ios: {
44+
shadowOpacity: 0.85,
45+
shadowRadius: 0,
46+
shadowOffset: {
47+
width: 0,
48+
height: StyleSheet.hairlineWidth,
49+
},
50+
},
51+
default: {
52+
borderBottomWidth: StyleSheet.hairlineWidth,
53+
},
54+
}),
55+
},
56+
});

‎packages/elements/src/Header/HeaderHeightContext.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import getNamedContext from '../getNamedContext';
2+
3+
const HeaderHeightContext = getNamedContext<number | undefined>(
4+
'HeaderHeightContext',
5+
undefined
6+
);
7+
8+
export default HeaderHeightContext;

‎packages/elements/src/Header/HeaderShownContext.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import getNamedContext from '../getNamedContext';
2+
3+
const HeaderShownContext = getNamedContext('HeaderShownContext', false);
4+
5+
export default HeaderShownContext;

0 commit comments

Comments
 (0)