Skip to content

Commit 6f2e065

Browse files
czy0729czy0729
committed
- [iOS] 修复 iOS 26 以上头部容器布局相关距离错误、部分样式错误等问题
1 parent 5f6f5c5 commit 6f2e065

15 files changed

Lines changed: 80 additions & 71 deletions

File tree

‎packages/ipa/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
"react-native-reanimated": "3.16.1",
102102
"react-native-render-html": "4.1.1",
103103
"react-native-restart": "0.0.14",
104-
"react-native-safe-area-context": "5.5.2",
104+
"react-native-safe-area-context": "~5.6.0",
105105
"react-native-safe-area-view": "1.1.1",
106106
"react-native-screens": "4.12.0",
107107
"react-native-shimmer-placeholder": "^2.0.9",

‎src/App.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Provider from '@ant-design/react-native/lib/provider'
1313
import { DeepLink, DEV, HoldMenuProvider } from '@components'
1414
import { AppCommon } from '@_'
1515
import { _ } from '@stores'
16-
import { useCachedResources, useOrientation } from '@utils/hooks'
16+
import { useCachedResources, useObserver, useOrientation } from '@utils/hooks'
1717
import NaviteStacks from '@src/navigations/native-stacks'
1818
import theme from '@styles/theme'
1919

@@ -32,26 +32,29 @@ export default function App() {
3232
_.toggleOrientation(orientation)
3333
}, [orientation])
3434

35-
if (!loadingResult) return null
35+
return useObserver(() => {
36+
if (!loadingResult) return null
3637

37-
const isLoadingComplete = loadingResult >= 3
38-
return (
39-
<GestureHandlerRootView style={_.container.flex}>
40-
<SafeAreaProvider style={_.container.flex}>
41-
{/* @ts-ignore */}
42-
<Provider theme={theme}>
43-
<HoldMenuProvider>
44-
<NaviteStacks isLoadingComplete={isLoadingComplete} />
45-
</HoldMenuProvider>
46-
{isLoadingComplete && (
47-
<Suspense>
48-
<AppCommon />
49-
<DeepLink />
50-
<DEV />
51-
</Suspense>
52-
)}
53-
</Provider>
54-
</SafeAreaProvider>
55-
</GestureHandlerRootView>
56-
)
38+
const isLoadingComplete = loadingResult >= 3
39+
40+
return (
41+
<GestureHandlerRootView style={_.container.plain}>
42+
<SafeAreaProvider style={_.container.flex}>
43+
{/* @ts-ignore */}
44+
<Provider theme={theme}>
45+
<HoldMenuProvider>
46+
<NaviteStacks isLoadingComplete={isLoadingComplete} />
47+
</HoldMenuProvider>
48+
{isLoadingComplete && (
49+
<Suspense>
50+
<AppCommon />
51+
<DeepLink />
52+
<DEV />
53+
</Suspense>
54+
)}
55+
</Provider>
56+
</SafeAreaProvider>
57+
</GestureHandlerRootView>
58+
)
59+
})
5760
}

‎src/components/collapsible/index.android.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* @Last Modified by: czy0729
55
* @Last Modified time: 2026-03-18 04:33:48
66
*/
7-
import RNCollapsible from './collapsible'
7+
import CustomCollapsible from './collapsible'
88
import CollapsibleBase from './collapsible-base'
99

1010
import type { Props as CollapsibleProps } from './types'
@@ -15,7 +15,7 @@ export type { CollapsibleProps }
1515
* @doc https://github.com/oblador/react-native-collapsible
1616
*/
1717
export function Collapsible(props: CollapsibleProps) {
18-
return <CollapsibleBase {...props} CollapsibleImpl={RNCollapsible} />
18+
return <CollapsibleBase {...props} CollapsibleImpl={CustomCollapsible} />
1919
}
2020

2121
export default Collapsible

‎src/components/collapsible/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
* @Last Modified time: 2026-03-18 04:33:13
66
*/
77
import RNCollapsible from 'react-native-collapsible'
8+
import { IOS_IPA } from '@src/config'
9+
import CustomCollapsible from './collapsible'
810
import CollapsibleBase from './collapsible-base'
911

1012
import type { Props as CollapsibleProps } from './types'
@@ -15,7 +17,9 @@ export type { CollapsibleProps }
1517
* @doc https://github.com/oblador/react-native-collapsible
1618
*/
1719
export function Collapsible(props: CollapsibleProps) {
18-
return <CollapsibleBase {...props} CollapsibleImpl={RNCollapsible} />
20+
return (
21+
<CollapsibleBase {...props} CollapsibleImpl={IOS_IPA ? CustomCollapsible : RNCollapsible} />
22+
)
1923
}
2024

2125
export default Collapsible

‎src/components/fixed-textarea/textarea/styles.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,16 @@ export const memoStyles = _.memoStyles(() => ({
3434
textarea: {
3535
minHeight: 48,
3636
maxHeight: 152,
37-
paddingTop: 12,
37+
paddingTop: 14,
3838
paddingHorizontal: 0,
3939
paddingBottom: 8,
4040
marginBottom: -_.hairlineWidth,
4141
color: _.colorDesc,
42+
fontFamily: _.fontBoldFamily,
4243
fontSize: 14 + _.fontSizeAdjust,
4344
lineHeight: 22,
44-
backgroundColor: 'transparent'
45+
backgroundColor: 'transparent',
46+
includeFontPadding: false
4547
},
4648
hiddenText: {
4749
color: 'transparent',

‎src/components/header-v2/header/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
* @Last Modified time: 2026-04-20 21:52:20
66
*/
77
import React from 'react'
8-
import { View } from 'react-native'
98
import { observer } from 'mobx-react'
109
import { stl } from '@utils'
1110
import { r } from '@utils/dev'
@@ -47,18 +46,20 @@ function Header({
4746
<Background style={stl(style, transparent && styles.transparent)} />
4847
{!transparent && (
4948
<Flex
50-
style={stl(styles.title, headerTitleStyle)}
49+
style={stl(styles.title, headerTitleStyle, {
50+
top: statusBarHeight
51+
})}
5152
justify={headerTitleAlign === 'left' ? 'start' : 'center'}
5253
>
5354
<Text
54-
style={stl(styles.titleText, headerTitleTextStyle)}
55+
style={stl(headerTitleTextStyle)}
5556
size={headerTitleSize}
5657
numberOfLines={1}
5758
ellipsizeMode='middle'
5859
>
5960
{title}
6061
</Text>
61-
{!!headerTitleAppend && <View style={styles.titleAppend}>{headerTitleAppend}</View>}
62+
{!!headerTitleAppend && headerTitleAppend}
6263
</Flex>
6364
)}
6465
<Back color={color} />

‎src/components/header-v2/header/styles.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,8 @@ export const memoStyles = _.memoStyles(() => ({
2121
right: 48,
2222
bottom: 0,
2323
left: 48,
24-
height: _.r(_.ios(36, 48)),
2524
pointerEvents: 'none'
2625
},
27-
titleText: {
28-
lineHeight: 20,
29-
marginTop: -7
30-
},
31-
titleAppend: {
32-
marginTop: -7
33-
},
3426
transparent: {
3527
backgroundColor: 'transparent'
3628
}

‎src/components/header/transition/index.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,18 @@ import React from 'react'
88
import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
99
import { observer } from 'mobx-react'
1010
import { r } from '@utils/dev'
11+
import { useInsets } from '@utils/hooks'
1112
import { ScrollView } from '../../scroll-view'
1213
import { Text } from '../../text'
1314
import { COMPONENT } from './ds'
1415
import { memoStyles } from './styles'
1516

1617
import type { Props } from './types'
17-
1818
function Transition({ fixed, title, headerTitle }: Props) {
1919
r(COMPONENT)
2020

21+
const { statusBarHeight } = useInsets()
22+
2123
const wrapStyles = useAnimatedStyle(
2224
() => ({
2325
opacity: withTiming(fixed ? 1 : 0, {
@@ -45,7 +47,16 @@ function Transition({ fixed, title, headerTitle }: Props) {
4547

4648
return (
4749
<Animated.View style={[styles.view, wrapStyles]}>
48-
<Animated.View style={[styles.body, title && styles.bodyTitle, bodyStyles]}>
50+
<Animated.View
51+
style={[
52+
styles.body,
53+
title && styles.bodyTitle,
54+
bodyStyles,
55+
{
56+
top: statusBarHeight + 2
57+
}
58+
]}
59+
>
4960
{headerTitle || (
5061
<ScrollView style={styles.scrollView} contentContainerStyle={styles.container} horizontal>
5162
<Text style={styles.text} size={15} numberOfLines={1}>

‎src/components/header/transition/styles.ts‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,7 @@
55
* @Last Modified time: 2024-08-28 21:23:15
66
*/
77
import { _ } from '@stores'
8-
import { WEB, WSA } from '@constants'
9-
10-
let minHeight: number
11-
if (WSA) {
12-
minHeight = 40
13-
} else if (WEB) {
14-
minHeight = 32
15-
} else {
16-
minHeight = 20 * 1.28
17-
}
8+
import { WEB } from '@constants'
189

1910
export const memoStyles = _.memoStyles(() => ({
2011
view: {
@@ -28,12 +19,12 @@ export const memoStyles = _.memoStyles(() => ({
2819
overflow: 'hidden'
2920
},
3021
body: {
22+
display: 'flex',
23+
justifyContent: 'center',
3124
position: 'absolute',
3225
zIndex: 1,
33-
bottom: _.device(8, 14),
3426
left: _.device(48, 56),
35-
right: WEB ? 0 : 56,
36-
minHeight
27+
right: WEB ? 0 : 56
3728
},
3829
bodyTitle: {
3930
bottom: _.device(6, 10)

‎src/screens/home/mono/component/extra/extra.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const Extra = memo(
2020
if (canICO) {
2121
return (
2222
<Touchable
23-
style={[_.container.touch, _.mr.sm]}
23+
style={_.container.touch}
2424
onPress={() => {
2525
confirm('花费 10000cc 启动 ICO?', () => {
2626
doICO(navigation)
@@ -29,7 +29,7 @@ const Extra = memo(
2929
>
3030
<Flex style={_.mr.sm}>
3131
<IconHeader name='trophy' size={18} />
32-
<Text size={13}>启动 ICO</Text>
32+
<Text size={12}>启动 ICO</Text>
3333
</Flex>
3434
</Touchable>
3535
)

0 commit comments

Comments
 (0)