Revize dfda8907
Přidáno uživatelem Schwobik před asi 2 roky(ů)
| App.tsx | ||
|---|---|---|
| 2 | 2 |
import { StyleSheet, Text, View } from 'react-native'
|
| 3 | 3 |
import { NativeBaseProvider, Box } from "native-base"
|
| 4 | 4 |
import LoginPage from './src/pages/LoginPage' |
| 5 |
import ScrollViewTest from "./src/pages/ScrollViewTest" |
|
| 5 | 6 |
|
| 6 | 7 |
export default function App() {
|
| 7 | 8 |
return ( |
| 8 | 9 |
<NativeBaseProvider> |
| 9 |
<LoginPage />
|
|
| 10 |
<ScrollViewTest />
|
|
| 10 | 11 |
</NativeBaseProvider> |
| 11 |
);
|
|
| 12 |
) |
|
| 12 | 13 |
} |
| 13 | 14 |
|
| 14 | 15 |
const styles = StyleSheet.create({
|
| src/pages/ScrollViewTest.tsx | ||
|---|---|---|
| 1 |
import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, ScrollView } from "native-base"
|
|
| 2 |
import { axiosInstance } from "../api/api"
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
const ScrollViewTest = () => {
|
|
| 7 |
const colors = ["red.200", "orange.200", "yellow.200", "green.200", "teal.200", "blue.200", "cyan.200", "purple.200", "pink.200"] |
|
| 8 |
|
|
| 9 |
return ( |
|
| 10 |
<ScrollView> |
|
| 11 |
<Center w="100%"> |
|
| 12 |
<Box safeArea p="2" py="8" w="90%" maxW="290"> |
|
| 13 |
<Heading size="lg" fontWeight="600" color="coolGray.800" _dark={{
|
|
| 14 |
color: "warmGray.50" |
|
| 15 |
}}> |
|
| 16 |
Welcome |
|
| 17 |
</Heading> |
|
| 18 |
<Heading mt="1" _dark={{
|
|
| 19 |
color: "warmGray.200" |
|
| 20 |
}} color="coolGray.600" fontWeight="medium" size="xs"> |
|
| 21 |
Sign in to continue! |
|
| 22 |
</Heading> |
|
| 23 |
|
|
| 24 |
<VStack space={3} mt="5">
|
|
| 25 |
<FormControl> |
|
| 26 |
<FormControl.Label>Email ID</FormControl.Label> |
|
| 27 |
<Input /> |
|
| 28 |
</FormControl> |
|
| 29 |
<FormControl> |
|
| 30 |
<FormControl.Label>Password</FormControl.Label> |
|
| 31 |
<Input type="password" /> |
|
| 32 |
<Link _text={{
|
|
| 33 |
fontSize: "xs", |
|
| 34 |
fontWeight: "500", |
|
| 35 |
color: "indigo.500" |
|
| 36 |
}} alignSelf="flex-end" mt="1"> |
|
| 37 |
Forget Password? |
|
| 38 |
</Link> |
|
| 39 |
</FormControl> |
|
| 40 |
<Button mt="2" colorScheme="indigo"> |
|
| 41 |
Sign in |
|
| 42 |
</Button> |
|
| 43 |
<HStack mt="6" justifyContent="center"> |
|
| 44 |
<Text fontSize="sm" color="coolGray.600" _dark={{
|
|
| 45 |
color: "warmGray.200" |
|
| 46 |
}}> |
|
| 47 |
I'm a new user.{" "}
|
|
| 48 |
</Text> |
|
| 49 |
<Link _text={{
|
|
| 50 |
color: "indigo.500", |
|
| 51 |
fontWeight: "medium", |
|
| 52 |
fontSize: "sm" |
|
| 53 |
}} href="#"> |
|
| 54 |
Sign Up |
|
| 55 |
</Link> |
|
| 56 |
</HStack> |
|
| 57 |
</VStack> |
|
| 58 |
</Box> |
|
| 59 |
<ScrollView horizontal={true}>
|
|
| 60 |
{colors.map((color, index) => (
|
|
| 61 |
<Box |
|
| 62 |
key={index}
|
|
| 63 |
bg={color}
|
|
| 64 |
w="150" |
|
| 65 |
h="150" |
|
| 66 |
marginX={5}
|
|
| 67 |
> |
|
| 68 |
</Box> |
|
| 69 |
))} |
|
| 70 |
</ScrollView> |
|
| 71 |
</Center> |
|
| 72 |
</ScrollView> |
|
| 73 |
) |
|
| 74 |
} |
|
| 75 |
|
|
| 76 |
export default ScrollViewTest |
|
Také k dispozici: Unified diff
Testing of scrollview