- [安卓] 修复非全面屏和状态栏颜色等问题

czy0729 · Aug 13, 2023 · bb790bf · bb790bf
1 parent 7b8ec4d
commit bb790bf
Show file tree

Hide file tree

Showing 27 changed files with 231 additions and 191 deletions.
diff --git a/app.json b/app.json
@@ -1,9 +1,9 @@
 {
   "expo": {
     "description": "A React Native App for https://bgm.tv, tinygrail plugin 4.5.0",
-    "version": "8.0.0",
+    "version": "8.0.1",
     "android": {
-      "versionCode": 80010,
+      "versionCode": 80100,
       "package": "com.czy0729.bangumi",
       "adaptiveIcon": {
         "foregroundImage": "./src/assets/images/foreground.png",

diff --git a/config.ts b/config.ts
@@ -20,7 +20,7 @@ export const RERENDER_SHOW = /ZZZ/ // /Rakuen\.(.+?)\.Main/
 export const ANDROID_DEV_MENU = true
 
 /** 是否不显示图片 (开发用) false 是为了打包后的 apk 稳定显示图片 */
-export const TEXT_ONLY = DEV ? !DEV : false
+export const TEXT_ONLY = DEV ? DEV : false
 
 /** 反代地址 */
 export const HOST_PROXY = 'https://bangumi-app-webproxy.magmablock.top'

diff --git a/src/components/hardware-texture-blur-view/index.tsx b/src/components/hardware-texture-blur-view/index.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2023-08-08 16:38:27
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-08-10 20:41:14
+ * @Last Modified time: 2023-08-13 21:18:33
  */
 import React from 'react'
 import { View } from 'react-native'
@@ -38,7 +38,7 @@ export const HardwareTextureBlurView = ({
         <View
           style={{
             // @ts-expect-error
-            height: style?.height || '100%',
+            height: _.flatten(style)?.height || '100%',
             ...containerStyle
           }}
           removeClippedSubviews

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -4,19 +4,16 @@
  * @Author: czy0729
  * @Date: 2022-03-10 17:27:04
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-07-25 20:24:56
+ * @Last Modified time: 2023-08-13 22:03:13
  */
 import React, { useLayoutEffect } from 'react'
-import { _ } from '@stores'
 import { useNavigation, useObserver } from '@utils/hooks'
-import { IOS, STORYBOOK } from '@constants'
-import { StatusBarEvents } from '../status-bar-events'
+import { STORYBOOK } from '@constants'
 import { Track } from '../track'
 import Popover from './popover'
 import Placeholder from './placeholder'
 import { updateHeader } from './utils'
 import HeaderComponent from './header-component'
-import { statusBarEventsTypes } from './styles'
 import { IHeader } from './types'
 
 const Header: IHeader = ({
@@ -30,7 +27,6 @@ const Header: IHeader = ({
   headerTitle = null,
   headerTitleAlign = 'center',
   headerTitleStyle,
-  statusBarEvents = true,
   statusBarEventsType
 }) => {
   const navigation = useNavigation()
@@ -59,23 +55,6 @@ const Header: IHeader = ({
   ])
 
   return useObserver(() => {
-    let statusBarEventsProps = {}
-    if (statusBarEvents) {
-      if (statusBarEventsType && statusBarEventsTypes[statusBarEventsType]) {
-        statusBarEventsProps = statusBarEventsTypes[statusBarEventsType](fixed)
-      } else if (mode) {
-        statusBarEventsProps = {
-          barStyle: fixed ? 'light-content' : 'dark-content',
-          backgroundColor: 'transparent',
-          action: 'onWillFocus'
-        }
-      } else if (!IOS && _.isDark) {
-        statusBarEventsProps = {
-          backgroundColor: _._colorPlainHex
-        }
-      }
-    }
-
     const passProps = {
       navigation,
       fixed,
@@ -95,7 +74,6 @@ const Header: IHeader = ({
             <HeaderComponent {...passProps} fixed />
           </>
         )}
-        {statusBarEvents && <StatusBarEvents {...statusBarEventsProps} />}
         <Track title={title} hm={hm} alias={alias} />
       </>
     )

diff --git a/src/components/header/types.ts b/src/components/header/types.ts
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-05-02 12:19:35
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-07-28 19:31:41
+ * @Last Modified time: 2023-08-13 21:31:07
  */
 import {
   ColorValue,
@@ -54,7 +54,7 @@ export type Props = {
   /** 是否变动状态栏主题 */
   statusBarEvents?: boolean
 
-  /** 预设的状态栏主题 */
+  /** @deprecated 预设的状态栏主题 */
   statusBarEventsType?: 'Subject' | 'Topic' | 'Tinygrail'
 }
 

diff --git a/src/components/header/utils.tsx b/src/components/header/utils.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-03-12 04:55:18
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-08-10 20:49:55
+ * @Last Modified time: 2023-08-13 21:32:24
  */
 import React, { useState, useCallback, useRef } from 'react'
 import { _, systemStore } from '@stores'
@@ -86,12 +86,6 @@ export const updateHeader = ({
     /** ==================== headerRight ==================== */
     headerRightContainerStyle: {},
     headerRight: undefined
-
-    /** ==================== navigationBar ==================== */
-    // navigationBarColor: _.select(
-    //   _.colorPlain,
-    //   _.deep(_._colorPlainHex, _._colorDarkModeLevel1Hex)
-    // ),
   }
 
   if (headerRight) {

diff --git a/src/components/page/index.tsx b/src/components/page/index.tsx
@@ -3,7 +3,7 @@
  * @Author: czy0729
  * @Date: 2022-05-01 14:26:57
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-08-08 23:19:03
+ * @Last Modified time: 2023-08-13 22:40:04
  */
 import React from 'react'
 import { View } from 'react-native'

diff --git a/src/components/page/types.ts b/src/components/page/types.ts
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-08-16 12:49:45
  * @Last Modified by: czy0729
- * @Last Modified time: 2022-08-16 12:50:32
+ * @Last Modified time: 2023-08-13 22:40:40
  */
 import { ViewStyle, ColorValue } from '@types'
 

diff --git a/src/components/safe-area-bottom/index.tsx b/src/components/safe-area-bottom/index.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2023-08-01 19:33:04
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-08-07 15:53:57
+ * @Last Modified time: 2023-08-13 20:40:09
  */
 import React from 'react'
 import { View } from 'react-native'
@@ -24,7 +24,11 @@ export const SafeAreaBottom = ({
     return (
       <View
         style={stl(style, {
-          [type]: bottom
+          [type]:
+            type === 'height'
+              ? // @ts-expect-error
+                bottom + style?.height || 0
+              : bottom
         })}
         {...other}
       >

diff --git a/src/components/safe-area-bottom/types.ts b/src/components/safe-area-bottom/types.ts
@@ -10,7 +10,7 @@ export type Props = {
   style?: ViewStyle
 
   /** 复写的对应样式 */
-  type?: 'bottom' | 'paddingBottom'
+  type?: 'bottom' | 'paddingBottom' | 'height'
 
-  children: ReactNode
+  children?: ReactNode
 }
diff --git a/src/components/status-bar-events/index.tsx b/src/components/status-bar-events/index.tsx
@@ -5,7 +5,7 @@
  * @Author: czy0729
  * @Date: 2019-08-11 14:02:16
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-01-15 10:41:48
+ * @Last Modified time: 2023-08-13 22:13:04
  */
 import React from 'react'
 import { StatusBar, StatusBarStyle } from 'react-native'
@@ -22,17 +22,20 @@ export const StatusBarEvents = observer(
     tinygrail = false,
     backgroundColor = '#ffffff',
     barStyle = 'dark-content',
-    translucent = !IOS,
+    translucent = false,
     animated = IOS,
     action = 'onDidFocus'
   }: StatusBarEventsProps) => {
+    return null
+
     let _barStyle: StatusBarStyle
     if (tinygrail) {
       _barStyle = barStyle
     } else {
       // 黑暗模式可以一直设置为 light-content
       _barStyle = _.mode === 'light' ? barStyle : 'light-content'
     }
+
     const events = () => {
       if (!IOS) {
         StatusBar.setBackgroundColor(backgroundColor, animated)
@@ -43,9 +46,8 @@ export const StatusBarEvents = observer(
     const props: PassProps = {
       onDidFocus: () => events()
     }
-    if (action === 'onWillFocus') {
-      props.onWillFocus = () => events()
-    }
+    if (action === 'onWillFocus') props.onWillFocus = () => events()
+
     return (
       <>
         <StatusBar

diff --git a/src/navigations/native-stacks/index.tsx b/src/navigations/native-stacks/index.tsx
@@ -2,16 +2,18 @@
  * @Author: czy0729
  * @Date: 2023-07-28 15:33:09
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-08-11 21:26:20
+ * @Last Modified time: 2023-08-13 22:39:04
  */
 import React from 'react'
 import { StackAnimationTypes } from 'react-native-screens'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { useObserver } from 'mobx-react'
-import { StatusBar } from 'expo-status-bar'
 import * as Screens from '@screens'
 import { _, systemStore } from '@stores'
 import { urlStringify } from '@utils'
+import { IOS } from '@constants'
+import { ColorValue } from '@types'
 import navigationsParams from '@/config'
 import NavigationContainer from '../navigation-container'
 import BottomTabNavigator from '../bottom-tab-navigator'
@@ -24,51 +26,70 @@ const defaultScreenOptions = {
     backgroundColor: 'transparent',
     elevation: 0
   },
-  navigationBarColor: 'transparent',
   freezeOnBlur: false
 }
 
 const Stack = createNativeStackNavigator()
 function Stacks({ isLoadingComplete }) {
+  const { bottom } = useSafeAreaInsets()
   const { initialRouteName, initialRouteParams } = navigationsParams
   return useObserver(() => {
-    const { transition } = systemStore.setting
+    const { transition, androidBlur, blurBottomTabs } = systemStore.setting
     let animation: StackAnimationTypes = 'slide_from_right'
     if (transition === 'vertical') {
       animation = 'slide_from_bottom'
     } else if (transition === 'scale') {
       animation = 'default'
     }
+
+    /** 是否全面屏 */
+    const isFullScreen = bottom <= 20
+    let navigationBarColor: ColorValue = _.colorPlain
+    if (isFullScreen || (!IOS && androidBlur && blurBottomTabs && _.isDark)) {
+      navigationBarColor = 'transparent'
+    }
+
     return (
-      <>
-        <StatusBar style={_.select('dark', 'light')} />
-        <NavigationContainer>
-          <Stack.Navigator
-            screenOptions={{
-              ...defaultScreenOptions,
-              contentStyle: {
-                backgroundColor: _.colorPlain
-              },
-              animation
-            }}
-            initialRouteName={initialRouteName}
-          >
-            <Stack.Screen name='HomeTab' component={BottomTabNavigator} />
-            {isLoadingComplete &&
-              Object.keys(Screens).map(name => (
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            ...defaultScreenOptions,
+            statusBarStyle: _.select('dark', 'light'),
+            contentStyle: {
+              backgroundColor: _.colorPlain
+            },
+            navigationBarColor,
+            animation
+          }}
+          initialRouteName={initialRouteName}
+        >
+          <Stack.Screen name='HomeTab' component={BottomTabNavigator} />
+          {isLoadingComplete &&
+            Object.keys(Screens).map(name => {
+              let statusBarStyle: 'dark' | 'light' = _.select('dark', 'light')
+              if (!_.isDark) {
+                if (name === 'Subject' || name === 'User' || name === 'Zone') {
+                  statusBarStyle = 'light'
+                }
+              }
+
+              return (
                 <Stack.Screen
                   key={name}
                   name={name}
                   component={Screens[name]}
                   initialParams={
                     initialRouteName === name ? initialRouteParams : undefined
                   }
+                  options={{
+                    statusBarStyle
+                  }}
                   getId={({ params }) => (params ? urlStringify(params) : undefined)}
                 />
-              ))}
-          </Stack.Navigator>
-        </NavigationContainer>
-      </>
+              )
+            })}
+        </Stack.Navigator>
+      </NavigationContainer>
     )
   })
 }