Skip to content

Commit 9683f2e

Browse files
panbibipanbibi
authored
fix:调整底部tab栏路由配置 (#233)
* chore(uiw/react-native): 版本升级4.0.1和明暗主题适配 * fix:调整底部tab栏路由配置
1 parent 003d810 commit 9683f2e

File tree

12 files changed

+181
-120
lines changed

12 files changed

+181
-120
lines changed

‎HelloWorld/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"@rematch/core": "2.2.0",
2626
"@rematch/loading": "2.1.2",
2727
"@uiw/formatter": "~1.3.3",
28-
"@uiw/react-native": "^4.0.1",
28+
"@uiw/react-native": "^4.0.2",
2929
"react": "18.1.0",
3030
"react-native": "0.70.6",
3131
"react-native-device-info": "~10.0.2",

‎HelloWorld/src/hooks/users.js‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,66 @@
1-
import { Alert } from 'react-native';
1+
import {Alert} from 'react-native';
22
import AsyncStorage from '@react-native-async-storage/async-storage';
3-
import { userLogin, userAuth } from '../services/users';
4-
import { useQuery, useMutation } from 'react-query'
3+
import {userLogin, userAuth} from '../services/users';
4+
import {useQuery, useMutation} from 'react-query';
55
import Global from '../global';
66

77
// 登录
8-
export const login = ({ config = {}, update, formData, remember }) => {
8+
export const login = ({config = {}, update, formData, remember}) => {
99
const mutation = useMutation({
1010
mutationFn: userLogin,
11-
onSuccess: async (data) => {
11+
onSuccess: async data => {
1212
if (data?.token && data?.data) {
1313
await AsyncStorage.setItem('token', data.token);
1414
if (remember) {
1515
await AsyncStorage.setItem('cachLoginName', formData.loginName);
1616
await AsyncStorage.setItem('cachPassword', formData.password);
1717
}
1818
await AsyncStorage.setItem('userData', JSON.stringify(data.data));
19-
update({ token: data.token, userData: data.data });
19+
update({token: data.token, userData: data.data});
2020
if (Global.navigation) {
21-
Global.navigation.replace('Home');
21+
Global.navigation.replace('Tab');
2222
}
2323
} else if (data && data.message) {
2424
Alert.alert(`Login failed - ${data.error}`, data.message);
2525
}
2626
},
27-
...config
28-
})
29-
return mutation
30-
}
27+
...config,
28+
});
29+
return mutation;
30+
};
3131

3232
// 验证token
33-
export const useAuthToken = ({ token, update }) => {
33+
export const useAuthToken = ({token, update}) => {
3434
const mutation = useMutation({
3535
mutationFn: userAuth,
3636
onMutate: async () => {
3737
let host = await AsyncStorage.getItem('apihost');
3838
if (!host && conf.hosts[0]) {
3939
await AsyncStorage.setItem('apihost', JSON.stringify(conf.hosts[0]));
40-
await update({ apihost: conf.hosts[0] });
40+
await update({apihost: conf.hosts[0]});
4141
}
4242
if (!token) {
4343
await AsyncStorage.removeItem('userData');
4444
await AsyncStorage.removeItem('token');
4545
}
4646
},
47-
onSuccess: async (data) => {
47+
onSuccess: async data => {
4848
if (data?.token) {
49-
await update({ authState: true, token: data.token });
49+
await update({authState: true, token: data.token});
5050
} else {
51-
await update({ authState: true, token: null });
51+
await update({authState: true, token: null});
5252
}
53-
}
54-
})
55-
return mutation
56-
}
53+
},
54+
});
55+
return mutation;
56+
};
5757

5858
// 退出
59-
export const logout = ({ update }) => {
59+
export const logout = ({update}) => {
6060
AsyncStorage.removeItem('token');
6161
AsyncStorage.removeItem('userData');
62-
update({ token: null, userData: null });
62+
update({token: null, userData: null});
6363
if (Global.navigation) {
6464
Global.navigation.navigate?.('SignIn');
6565
}
66-
}
67-
66+
};

‎HelloWorld/src/pages/Home/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import {StatusBar, useColorScheme} from 'react-native';
33
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
4-
import homeTabData from '../../routes/homeTab';
4+
import TabsScreen from '../../routes/tabs';
55

66
const BottomTabs = createBottomTabNavigator();
77

@@ -16,7 +16,7 @@ const DashboardScreen = props => {
1616
tabBarActiveTintColor: '#035bb6',
1717
tabBarInactiveTintColor: 'gray',
1818
}}>
19-
{homeTabData({iconColor}).map((props, idx) => {
19+
{TabsScreen({iconColor}).map((props, idx) => {
2020
return <BottomTabs.Screen key={idx} {...props} />;
2121
})}
2222
</BottomTabs.Navigator>

‎HelloWorld/src/routes/homeTab.js‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎HelloWorld/src/routes/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import Home from '../pages/Home';
22
import SignIn from '../pages/SignIn';
33
import DevOptions from '../pages/DevOptions';
44
import MyHomeSetting from '../pages/MyHome/Setting';
5+
import TabsScreen from './tabs';
56

67
export const stackPageData = [
78
{
8-
name: 'Home',
9-
component: Home,
9+
name: 'Tab',
10+
component: TabsScreen,
1011
options: {
1112
headerShown: false,
12-
header: () => null,
13+
title: '首页',
1314
},
1415
},
1516
{

‎HelloWorld/src/routes/tabs.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import {StatusBar} from 'react-native';
3+
import {useTheme, Text, Icon} from '@uiw/react-native';
4+
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
5+
import MyHome from '../pages/MyHome';
6+
import OrderHome from '../pages/OrderHome';
7+
import TransportHome from '../pages/TransportHome';
8+
9+
const BottomTabs = createBottomTabNavigator();
10+
const tabs = [
11+
{
12+
name: 'TransportHome',
13+
component: TransportHome,
14+
label: '发货',
15+
icon: 'inbox',
16+
},
17+
{
18+
name: 'OrderHome',
19+
component: OrderHome,
20+
label: '订单',
21+
icon: 'file-text',
22+
},
23+
{
24+
name: 'MyHome',
25+
component: MyHome,
26+
label: '我的',
27+
icon: 'user',
28+
},
29+
];
30+
const TabsScreen = props => {
31+
const theme = useTheme();
32+
return (
33+
<React.Fragment>
34+
<StatusBar barStyle="light-content" />
35+
<BottomTabs.Navigator
36+
screenOptions={{
37+
tabBarActiveTintColor: '#035bb6',
38+
tabBarInactiveTintColor: 'gray',
39+
}}>
40+
{tabs.map((item, idx) => {
41+
return (
42+
<BottomTabs.Screen
43+
key={idx}
44+
name={item.name}
45+
component={item.component}
46+
options={{
47+
title: item.label,
48+
headerStyle: {backgroundColor: theme.colors.primary_background},
49+
headerTintColor: '#fff',
50+
// eslint-disable-next-line react/no-unstable-nested-components
51+
tabBarLabel: ({focused}) => (
52+
<Text
53+
style={{
54+
color: focused ? theme.colors.primary_background : theme.colors.gray300,
55+
fontSize: 12,
56+
}}>
57+
{item?.label}
58+
</Text>
59+
),
60+
// eslint-disable-next-line react/no-unstable-nested-components
61+
tabBarIcon: ({focused}) => <Icon name={item.icon} size={20} color={focused ? theme.colors.primary_background : theme.colors.gray300} />,
62+
}}
63+
/>
64+
);
65+
})}
66+
</BottomTabs.Navigator>
67+
</React.Fragment>
68+
);
69+
};
70+
71+
export default TabsScreen;

‎template/template/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"@rematch/core": "2.2.0",
2626
"@rematch/loading": "2.1.2",
2727
"@uiw/formatter": "~1.3.3",
28-
"@uiw/react-native": "^4.0.1",
28+
"@uiw/react-native": "^4.0.2",
2929
"react": "18.1.0",
3030
"react-native": "0.70.6",
3131
"react-native-device-info": "~10.0.2",
@@ -39,7 +39,7 @@
3939
"react-query": "~3.39.2",
4040
"@kkt/doc": "^1.0.0",
4141
"@uiw/react-native-doc": "^3.0.7",
42-
"@shopify/restyle":"2.4.2"
42+
"@shopify/restyle": "2.4.2"
4343
},
4444
"devDependencies": {
4545
"@babel/core": "~7.18.9",

‎template/template/src/hooks/users.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const useLogin = ({ config = {}, update, formData, remember }) => {
1818
await AsyncStorage.setItem('userData', JSON.stringify(data.data));
1919
update({ token: data.token, userData: data.data });
2020
if (Global.navigation) {
21-
Global.navigation.replace('Home');
21+
Global.navigation.replace('Tab');
2222
}
2323
} else if (data && data.message) {
2424
Alert.alert(`Login failed - ${data.error}`, data.message);

‎template/template/src/pages/Home/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import {StatusBar, useColorScheme} from 'react-native';
33
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
4-
import homeTabData from '../../routes/homeTab';
4+
import TabsScreen from '../../routes/tabs';
55

66
const BottomTabs = createBottomTabNavigator();
77

@@ -16,7 +16,7 @@ const DashboardScreen = props => {
1616
tabBarActiveTintColor: '#035bb6',
1717
tabBarInactiveTintColor: 'gray',
1818
}}>
19-
{homeTabData({iconColor}).map((props, idx) => {
19+
{TabsScreen({iconColor}).map((props, idx) => {
2020
return <BottomTabs.Screen key={idx} {...props} />;
2121
})}
2222
</BottomTabs.Navigator>

‎template/template/src/routes/homeTab.js‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

0 commit comments

Comments
 (0)