feat: 编写我的页面

src/routers/BottomTabs.tsx

@@ -10,7 +10,9 @@ const Tab = createBottomTabNavigator<RootTabParamList>();
 
 const BottomTabs = () => {
   return (
-    <Tab.Navigator>
+    <Tab.Navigator screenOptions={{
+      headerTitleAlign: "center"
+    }}>
       <Tab.Screen name="Home" component={Home} />
       <Tab.Screen name="Customer" component={Customer} />
       <Tab.Screen name="PWAS" component={PWAS} />

src/routers/RootNavigationContainer.tsx

@@ -11,17 +11,15 @@ const SCREEN_NAMES = Object.keys(SCREEN) as (keyof typeof SCREEN)[];
 const RootNavigationContainer = () => {
   return (
     <NavigationContainer>
-      <RootStack.Navigator
-        screenOptions={{
-          headerShown: false,
-        }}
-      >
+      <RootStack.Navigator screenOptions={{
+         headerTitleAlign: "center"
+      }}>
         {SCREEN_NAMES.map((name) => (
           <RootStack.Screen
             key={name}
             name={name}
             getComponent={() => SCREEN[name].component as any}
-            options={{ title: SCREEN[name].title }}
+            options={{ title: SCREEN[name].title, headerShown: SCREEN[name].headerShown }}
           />
         ))}
       </RootStack.Navigator>

src/routers/routers.ts

 import BottomTabs from './BottomTabs';
 import TestDetailsScreen from '../views/Test/TestDetailsScreen';
+import AccountInfo from '../views/AccountInfo';
 
 export const ROUTERS = {
   BottomTabs: {
     title: '首页',
     component: BottomTabs,
+    headerShown: false
   },
   TestDetailsScreen: {
     title: '测试详情',
     component: TestDetailsScreen,
+    headerShown: true
   },
+  AccountInfo: {
+    title: '账号信息',
+    component: AccountInfo,
+    headerShown: true
+  }
 };
\ No newline at end of file

src/routers/types.ts

@@ -14,6 +14,7 @@ export type StackRouteType = React.ComponentProps<typeof Stack.Screen>;
 export type RootStackParamList = {
   BottomTabs: NavigatorScreenParams<RootTabParamList>;
   TestDetailsScreen: undefined;
+  AccountInfo: undefined;
 };
 
 export type RootStackScreenProps<Screen extends keyof RootStackParamList> = 

src/views/AccountInfo/ContentItem.tsx

+import React from "react"
+import { styles } from "./styles"
+import { View, Text } from 'react-native';
+
+export const ContentItem: React.FC<{ title: string, value: string }> = ({ title, value }) => {
+  return (
+    <View style={styles.itemBox}>
+      <View>
+        <Text>{title}</Text>
+      </View>
+      <View>
+        <Text>{value}</Text>
+      </View>
+    </View>
+  )
+}

src/views/AccountInfo/index.tsx

+import React from "react";
+import { View, Button } from 'react-native';
+import { RootStackScreenProps } from "../../routers/types";
+import useStores from "../../store/useStores";
+import { ContentItem } from "./ContentItem";
+import { styles } from "./styles";
+
+type TestDetailsScreenNavigationProp = RootStackScreenProps<'TestDetailsScreen'>;
+
+const accountInfo = [
+  { title: '姓名', value: '张三' },
+  { title: '账号', value: '13366778899' },
+  { title: '角色', value: '业务员' },
+  { title: '所属机构', value: '广东省-华南总部' },
+]
+
+const AccountInfo: React.FC<TestDetailsScreenNavigationProp> = ({ navigation }) => {
+  const { userStore } = useStores();
+
+  const loginOut = () => {
+    // removeUserInfo()
+    console.log(userStore);
+    
+    navigation.navigate('BottomTabs', {
+      screen: "PersonalCenter",
+    });
+  }
+
+  return (
+    <View style={styles.accountInfo}>
+      <View style={styles.content}>
+        {accountInfo.map((item) => <ContentItem key={item.title} title={item.title} value={item.value} />)}
+      </View>
+      <Button
+        title="退出登录"
+        onPress={loginOut}
+      />
+    </View>
+  )
+}
+
+export default AccountInfo
\ No newline at end of file

src/views/AccountInfo/styles.ts

+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  accountInfo: {
+    flex: 1,
+    padding: 8
+  },
+  content: {
+    padding: 10,
+    backgroundColor: "#fff",
+    marginBottom: 15,
+    borderRadius: 8
+  },
+  itemBox: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: 12,
+    paddingStart: 6,
+    paddingEnd: 6
+  },
+})
\ No newline at end of file

src/views/PersonalCenter/index.tsx

+import { CompositeScreenProps } from '@react-navigation/native';
+import { StackScreenProps } from '@react-navigation/stack';
 import React from 'react';
 import { View, Text } from 'react-native';
+import { RootTabScreenProps, RootStackParamList } from '../../routers/types';
+import { styles } from './styles';
 
-interface CustomerProps {
-  navigation: any
-}
+type PersonalCenterNavigationProp = 
+  CompositeScreenProps<
+    RootTabScreenProps<'PersonalCenter'>,
+    StackScreenProps<RootStackParamList>
+  >;
+
+const PersonalCenter: React.FC<PersonalCenterNavigationProp> = ({ navigation }) => {
+  const goAccountInfo = () => {
+    navigation.navigate("AccountInfo");
+  }
 
-const Customer: React.FC<CustomerProps> = ({ navigation }) => {
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>个人中心</Text>
+    <View style={styles.personalCenter}>
+      <View style={styles.userInfo}>
+        <Text style={styles.userInfoTitle}>张三</Text>
+        <Text style={styles.userInfoText}>15360830477</Text>
+        <Text style={styles.userInfoText}>杭州壹品慧贸易有限公司</Text>
+      </View>
+      <View style={styles.account}>
+        <View><Text>账号信息</Text></View>
+        <View style={{flex: 1}}><Text style={{flex: 1, textAlign: "right"}} onPress={goAccountInfo}>{`>`}</Text></View>
+      </View>
+      <View style={styles.version}>
+        <Text>当前版本</Text>
+        <Text>v1.0.0</Text>
+      </View>
     </View>
   );
 };
 
-export default Customer;
+export default PersonalCenter;

src/views/PersonalCenter/styles.ts

+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  personalCenter: {
+    paddingTop: 8,
+    flex: 1
+  },
+  userInfo: {
+    backgroundColor: "#fff",
+    padding: 10,
+  },
+  account: {
+    backgroundColor: "#fff",
+    padding: 10,
+    marginTop: 5,
+    flexDirection: 'row',
+    justifyContent: "space-between"
+  },
+  version: {
+    backgroundColor: "#fff",
+    padding: 10,
+    marginTop: 5,
+    flexDirection: 'row',
+    justifyContent: "space-between"
+  },
+  userInfoTitle: {
+    lineHeight: 30,
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  userInfoText: {
+    lineHeight: 20
+  }
+})
\ No newline at end of file