详情页

App.js

@@ -50,6 +50,7 @@ export default function App() {
           routes: [
             {
               name: initName,
+              // name: 'MerchantDetail',
             },
           ],
         })

app.json

@@ -39,8 +39,7 @@
       ]
     },
     "androidStatusBar": {
-      "backgroundColor": "#FFC21C",
-      "translucent": false
+      "backgroundColor": "#FFC21C"
     },
     "web": {
       "favicon": "./assets/images/favicon.png"

components/DetailHeader.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import Constants from 'expo-constants';
+import { Appbar } from 'react-native-paper';
+import { goBack } from '../navigation/RootNavigation';
+
+export default function Header() {
+  return (
+    <>
+      {Platform.OS !== 'ios' && <StatusBar hidden translucent />}
+
+      <Appbar.Header
+        dark
+        statusBarHeight={Platform.OS === 'ios' ? Constants.statusBarHeight : 0}
+      >
+        <Appbar.BackAction onPress={goBack} />
+        <Appbar.Content
+          title="忘记密码"
+          titleStyle={{ textAlign: 'center', fontSize: 16 }}
+        />
+        <Appbar.Action icon="dots-vertical" />
+      </Appbar.Header>
+    </>
+  );
+}

components/Header.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { StatusBar, Platform } from 'react-native';
+import { Platform } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
 import Constants from 'expo-constants';
 import { Appbar } from 'react-native-paper';
 import { goBack } from '../navigation/RootNavigation';
@@ -7,7 +8,7 @@ import { goBack } from '../navigation/RootNavigation';
 export default function Header() {
   return (
     <>
-      {Platform.OS !== 'ios' && <StatusBar backgroundColor="#FFC21C" />}
+      <StatusBar backgroundColor="#FFC21C" translucent={false} />
 
       <Appbar.Header
         dark

components/HomeHeader.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { StatusBar, Platform } from 'react-native';
+import { Platform } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
 import Constants from 'expo-constants';
 import { Appbar, Menu } from 'react-native-paper';
 import { useBoolean } from '@umijs/hooks';
@@ -20,11 +21,10 @@ export default function Header() {
 
   return (
     <>
-      {Platform.OS !== 'ios' && <StatusBar backgroundColor="#fff" />}
+      <StatusBar backgroundColor="#fff" translucent={false} />
 
       <Appbar.Header
         theme={{ colors: { primary: '#fff' } }}
-        statusBarHeight={Platform.OS === 'ios' ? Constants.statusBarHeight : 0}
         style={{
           elevation: 0,
           shadowOffset: {

navigation/BaseNavigator.jsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Login from '../screens/Login';
+import Detail from '../screens/Detail';
 import InitAppScreen from '../screens/InitAppScreen';
 
 export default function BasicScreens(Screen) {
@@ -8,6 +9,7 @@ export default function BasicScreens(Screen) {
       <Screen name="InitApp" component={InitAppScreen} />
       {/* 登录路由 */}
       {Login(Screen)}
+      {Detail(Screen)}
     </>
   );
 }

package-lock.json

@@ -4866,6 +4866,11 @@
         "lodash": "^4.17.15"
       }
     },
+    "expo-status-bar": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.0.0.tgz",
+      "integrity": "sha512-WxFqFk0AlPcfKFwJxYboUvo4D+WWyeGKU2XeIq3eMC6+IN4esBMvQ6VaR3u3oJCkOcjWyS7WPCeCLeCRZnwmmg=="
+    },
     "expo-web-browser": {
       "version": "8.2.1",
       "resolved": "https://registry.npmjs.org/expo-web-browser/-/expo-web-browser-8.2.1.tgz",

package.json

@@ -37,6 +37,7 @@
     "expo-linking": "~1.0.1",
     "expo-localization": "~8.1.0",
     "expo-splash-screen": "^0.2.3",
+    "expo-status-bar": "^1.0.0",
     "expo-web-browser": "~8.2.1",
     "flooks": "^3.0.0",
     "i18n-js": "^3.7.0",

screens/Detail/MerchantDetail.jsx

@@ -1,9 +0,0 @@
-import * as WebBrowser from 'expo-web-browser'
-import * as React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-export default function LinksScreen() {
-	return <View />
-}
-
-const styles = StyleSheet.create({})

screens/Detail/MerchantDetailScreen.jsx

@@ -0,0 +1,16 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import Text from '../../components/Text';
+import DetailHeader from '../../components/DetailHeader';
+
+export default function MerchantDetail() {
+  return (
+    <>
+      <DetailHeader />
+      <Text>1122</Text>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({});

screens/Detail/index.js

@@ -1,13 +1,13 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
-import MerchantDetail from './MerchantDetail';
+import MerchantDetailScreen from './MerchantDetailScreen';
 
 export default function Bank(Screen) {
   return (
     <>
       <Screen
         name="MerchantDetail"
-        component={MerchantDetail}
+        component={MerchantDetailScreen}
         initialParams={{ merchantId: 189 }}
       />
     </>