Revize 5c86e446
Přidáno uživatelem Michal Schwob před téměř 2 roky(ů)
App.tsx | ||
---|---|---|
1 | 1 |
import { StatusBar } from 'expo-status-bar' |
2 | 2 |
import { StyleSheet, Text, View } from 'react-native' |
3 |
import { NativeBaseProvider, Box } from "native-base" |
|
3 | 4 |
import LoginPage from './src/pages/LoginPage' |
4 | 5 |
|
5 | 6 |
export default function App() { |
6 | 7 |
return ( |
7 |
<View style={styles.container}> |
|
8 |
<Text>Open up App.js to start working on your app!</Text> |
|
9 |
<StatusBar style="auto" /> |
|
10 |
<LoginPage /> |
|
11 |
</View> |
|
8 |
<NativeBaseProvider> |
|
9 |
<LoginPage /> |
|
10 |
</NativeBaseProvider> |
|
12 | 11 |
); |
13 | 12 |
} |
14 | 13 |
|
package.json | ||
---|---|---|
9 | 9 |
"web": "expo start --web" |
10 | 10 |
}, |
11 | 11 |
"dependencies": { |
12 |
"@reduxjs/toolkit": "^1.9.3", |
|
12 | 13 |
"axios": "^1.3.4", |
13 | 14 |
"expo": "~48.0.9", |
14 | 15 |
"expo-status-bar": "~1.4.4", |
16 |
"native-base": "^3.4.28", |
|
15 | 17 |
"react": "18.2.0", |
16 | 18 |
"react-native": "0.71.4", |
19 |
"react-native-safe-area-context": "4.5.0", |
|
20 |
"react-native-svg": "13.4.0", |
|
21 |
"redux": "^4.2.1", |
|
17 | 22 |
"typescript": "^4.9.4" |
18 | 23 |
}, |
19 | 24 |
"devDependencies": { |
src/pages/LoginPage.tsx | ||
---|---|---|
1 |
import {Fragment} from "react" |
|
2 |
import { Button } from "react-native/Libraries/Components/Button" |
|
3 |
import { Text } from "react-native/Libraries/Components/Text" |
|
1 |
import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text } from "native-base" |
|
4 | 2 |
import { axiosInstance } from "../api/api" |
5 | 3 |
|
6 | 4 |
let text: number = 199 |
7 | 5 |
const fakeLogin = async () => { |
6 |
text = 101 |
|
7 |
console.log("zmacknuto") |
|
8 | 8 |
axiosInstance.post( |
9 |
'/api/login', |
|
9 |
'/api/login/',
|
|
10 | 10 |
{"username": "viktorie", "password": "Golem123."} |
11 | 11 |
).then((response) => { |
12 | 12 |
text = response.status |
13 |
console.log(response) |
|
14 |
}) |
|
15 |
} |
|
16 |
|
|
17 |
const fakeRequest = async () => { |
|
18 |
text = 101 |
|
19 |
console.log("request") |
|
20 |
axiosInstance.get( |
|
21 |
'/api/users' |
|
22 |
).then((response) => { |
|
23 |
text = response.status |
|
24 |
console.log(response) |
|
13 | 25 |
}) |
14 | 26 |
} |
15 | 27 |
const LoginPage = () => { |
16 | 28 |
return ( |
17 |
<Fragment> |
|
18 |
<Button onPress={fakeLogin} title="Login" color="#841584" accessibilityLabel="Press to login"/> |
|
19 |
<Text>{text}</Text> |
|
20 |
</Fragment> |
|
21 |
) |
|
29 |
<Center w="100%"> |
|
30 |
<Box safeArea p="2" py="8" w="90%" maxW="290"> |
|
31 |
<Heading size="lg" fontWeight="600" color="coolGray.800" _dark={{ |
|
32 |
color: "warmGray.50" |
|
33 |
}}> |
|
34 |
Welcome |
|
35 |
</Heading> |
|
36 |
<Heading mt="1" _dark={{ |
|
37 |
color: "warmGray.200" |
|
38 |
}} color="coolGray.600" fontWeight="medium" size="xs"> |
|
39 |
Sign in to continue! |
|
40 |
</Heading> |
|
41 |
|
|
42 |
<VStack space={3} mt="5"> |
|
43 |
<FormControl> |
|
44 |
<FormControl.Label>Email ID</FormControl.Label> |
|
45 |
<Input /> |
|
46 |
</FormControl> |
|
47 |
<FormControl> |
|
48 |
<FormControl.Label>Password</FormControl.Label> |
|
49 |
<Input type="password" /> |
|
50 |
<Link _text={{ |
|
51 |
fontSize: "xs", |
|
52 |
fontWeight: "500", |
|
53 |
color: "indigo.500" |
|
54 |
}} alignSelf="flex-end" mt="1"> |
|
55 |
Forget Password? |
|
56 |
</Link> |
|
57 |
</FormControl> |
|
58 |
<Button mt="2" colorScheme="indigo"> |
|
59 |
Sign in |
|
60 |
</Button> |
|
61 |
<HStack mt="6" justifyContent="center"> |
|
62 |
<Text fontSize="sm" color="coolGray.600" _dark={{ |
|
63 |
color: "warmGray.200" |
|
64 |
}}> |
|
65 |
I'm a new user.{" "} |
|
66 |
</Text> |
|
67 |
<Link _text={{ |
|
68 |
color: "indigo.500", |
|
69 |
fontWeight: "medium", |
|
70 |
fontSize: "sm" |
|
71 |
}} href="#"> |
|
72 |
Sign Up |
|
73 |
</Link> |
|
74 |
</HStack> |
|
75 |
</VStack> |
|
76 |
</Box> |
|
77 |
</Center> |
|
78 |
) |
|
22 | 79 |
} |
23 | 80 |
|
24 | 81 |
export default LoginPage |
Také k dispozici: Unified diff
Login page base