Skip to content

Feat: 添加内置导航头 #1961

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Feat: 添加内置导航头 #1961

wants to merge 15 commits into from

Conversation

thuman
Copy link
Collaborator

@thuman thuman commented Apr 17, 2025

No description provided.

let safeArea = {}
const { top = 0, bottom = 0, left = 0, right = 0 } = insets

console.log('initialWindowMetricsInset', initialWindowMetricsInset)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

整体基于顶部的navigation.layout进行计算

const stackLength = navigation.getState()?.routes?.length

const backElement = stackLength > 1
? createElement(ReactNative.TouchableOpacity, {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

回退按钮考虑端上跳入场景

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

移除回退按钮相关的rnConfig

}))
: null

return createElement(ReactNative.View, {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dom布局结构优化

@@ -0,0 +1,87 @@
import { createElement, useState } from 'react'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

文件移到env下

const headerTextColor = pageConfig.navigationBarTextStyle || 'white'
const safeAreaTop = useSafeAreaInsets()?.top || 0
const headerHeight = useInnerHeaderHeight(pageConfig)
const [title, setTitle] = useState(pageConfigTitle || '')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

支持setPageConfig

const windowDimensions = ReactNative.Dimensions.get('window')
// 安卓底部会有个虚拟按键区域 计算方式 = screen.height - window.height - statusBarHeight
const bottomVirtualHeight = screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight
navigation.layout = {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

layout包含left right top bottom height width

const screenDimensions = ReactNative.Dimensions.get('screen')
const windowDimensions = ReactNative.Dimensions.get('window')
// 安卓底部会有个虚拟按键区域 计算方式 = screen.height - window.height - statusBarHeight
const bottomVirtualHeight = screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const bottomVirtualHeight = screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight || 0

return 0
} else {
const safeAreaTop = useSafeAreaInsets()?.top || 0
const headerHeight = __mpx_mode__ === 'ios' ? safeAreaTop + 44 : safeAreaTop + 56
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

确定回退按钮大小

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants