Commit ccc3c542 authored by 郑云峰's avatar 郑云峰

feat: 编写我的页面

parent 991859dd
......@@ -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} />
......
......@@ -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>
......
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
......@@ -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> =
......
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>
)
}
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
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
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;
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment