fix: [#928] 修改nativebase库demo (#936)

Co-authored-by: [email protected] <[email protected]>
react-native-oh-library · Aug 22, 2024 · e5a72bd · e5a72bd
1 parent b0d1f6a
commit e5a72bd
Show file tree

Hide file tree

Showing 21 changed files with 562 additions and 268 deletions.
diff --git a/NativeBase/nativeBaseUiExample/KeyboardAvoidingView.tsx b/NativeBase/nativeBaseUiExample/KeyboardAvoidingView.tsx
@@ -35,6 +35,61 @@ export function KeyboardAvoidingViewExample() {
                 </VStack>
               </Center>
             </KeyboardAvoidingView>
+            <KeyboardAvoidingView
+              h={{
+                base: '400px',
+                lg: 'auto',
+              }}
+              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+              <Center>
+                <VStack flex="1" justifyContent="flex-end" w="100%" maxW="300">
+                  <Heading mb="3">Forgot Password</Heading>
+                  <Text color="muted.400">
+                    Not to worry! Enter email address associated with your
+                    account and we’ll send a link to reset your password.
+                  </Text>
+                  <Input placeholder="Email Address" mt="10" mb="4" />
+                  <Button mb="4">Proceed</Button>
+                </VStack>
+              </Center>
+            </KeyboardAvoidingView>
+            <KeyboardAvoidingView
+              h={{
+                base: '400px',
+                lg: 'auto',
+              }}
+              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+              <Center>
+                <VStack flex="1" justifyContent="flex-end" w="100%" maxW="300">
+                  <Heading mb="3">Forgot Password</Heading>
+                  <Text color="muted.400">
+                    Not to worry! Enter email address associated with your
+                    account and we’ll send a link to reset your password.
+                  </Text>
+                  <Input placeholder="Email Address" mt="10" mb="4" />
+                  <Button mb="4">Proceed</Button>
+                </VStack>
+              </Center>
+            </KeyboardAvoidingView>
+            <KeyboardAvoidingView
+              h={{
+                base: '400px',
+                lg: 'auto',
+              }}
+              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+              <Center>
+                <VStack flex="1" justifyContent="flex-end" w="100%" maxW="300">
+                  <Heading mb="3">Forgot Password</Heading>
+                  <Text color="muted.400">
+                    Not to worry! Enter email address associated with your
+                    account and we’ll send a link to reset your password.
+                  </Text>
+                  <Input placeholder="Email Address" mt="10" mb="4" />
+                  <Button mb="4">Proceed</Button>
+                </VStack>
+              </Center>
+            </KeyboardAvoidingView>
+
           </View>
         </View>
       </ScrollView>

diff --git a/NativeBase/nativeBaseUiTest/ActionSheet.tsx b/NativeBase/nativeBaseUiTest/ActionSheet.tsx
@@ -27,7 +27,7 @@ export function ActionSheetTest() {
                 <View style={styles.subSection}>
                   <Center>
                     <Button onPress={onOpen}>Actionsheet</Button>
-                    <Actionsheet isOpen={isOpen} onClose={onClose} size="full">
+                    <Actionsheet isOpen={isOpen} onClose={onClose} size="full" hideDragIndicator={true}>
                       <Actionsheet.Content>
                         <Box w="100%" h={60} px={4} justifyContent="center">
                           <Text

diff --git a/NativeBase/nativeBaseUiTest/AlertDialog.tsx b/NativeBase/nativeBaseUiTest/AlertDialog.tsx
@@ -9,6 +9,11 @@ export function AlertDialogTest() {
   const onClose = () => setIsOpen(false);
 
   const cancelRef = useRef(null);
+  const initialFocusRef = useRef(null);
+  const finalFocusRef = useRef(null);
+  console.log(cancelRef, 'cancelRef')
+  console.log(initialFocusRef, 'initialFocusRef')
+  console.log(finalFocusRef, 'finalFocusRef')
   return (
     <>
       <Tester>
@@ -26,7 +31,15 @@ export function AlertDialogTest() {
                     </Button>
                     <AlertDialog
                       leastDestructiveRef={cancelRef}
+                      initialFocusRef={initialFocusRef}
+                      finalFocusRef={finalFocusRef}
+                      size={30}
                       isOpen={isOpen}
+                      closeOnOverlayClick
+                      isKeyboardDismissable
+                      overlayVisible={true}
+                      backdropVisible={false}
+                      useRNModal={true}
                       onClose={onClose}>
                       <AlertDialog.Content>
                         <AlertDialog.CloseButton />

diff --git a/NativeBase/nativeBaseUiTest/Badge.tsx b/NativeBase/nativeBaseUiTest/Badge.tsx
@@ -10,6 +10,7 @@ import {
   CloseIcon,
 } from 'native-base';
 import {Tester, TestSuite, TestCase} from '@rnoh/testerino';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 function Example() {
   return (
@@ -69,8 +70,16 @@ export function BadgeTest() {
                       base: 'auto',
                       md: 0,
                     }}>
-                    <Badge colorScheme="success">SUCCESS</Badge>
-                    <Badge colorScheme="danger">DANGER</Badge>
+                    <Badge
+                      colorScheme="success"
+                      startIcon={<MaterialIcons name="mic" size={20} />}>
+                      SUCCESS
+                    </Badge>
+                    <Badge
+                      colorScheme="danger"
+                      endIcon={<MaterialIcons name="mic" size={20} />}>
+                      DANGER
+                    </Badge>
                     <Badge colorScheme="info">INFO</Badge>
                     <Badge colorScheme="coolGray">DARK</Badge>
                   </HStack>
@@ -93,18 +102,28 @@ export function BadgeTest() {
                       }}>
                       {['solid', 'outline', 'subtle'].map(key => (
                         <VStack key={key} space={4}>
-                          <Badge variant={key} alignSelf="center">
+                          <Badge
+                            variant={key}
+                            alignSelf="center"
+                            rightIcon={<MaterialIcons name="mic" size={20} />}>
                             DEFAULT
                           </Badge>
                           <Badge
                             colorScheme="success"
                             alignSelf="center"
+                            _text={{bg: 'amber.400'}}
                             variant={key}>
                             SUCCESS
                           </Badge>
                           <Badge
+                            leftIcon={<MaterialIcons name="mic" size={20} />}
                             colorScheme="error"
                             alignSelf="center"
+                            _icon={{
+                              as: {MaterialIcons},
+                              size: 100,
+                              color: 'amber.900',
+                            }}
                             variant={key}>
                             ERROR
                           </Badge>

diff --git a/NativeBase/nativeBaseUiTest/Box.tsx b/NativeBase/nativeBaseUiTest/Box.tsx
@@ -87,8 +87,9 @@ export function BoxTest() {
                 <TestSuite name='safeAreaProps'>
                     <TestCase
                         itShould="safeAreaProps"
+
                         children={(<View style={styles.section}>
-                            <Box style={styles.box} backgroundColor='#87CEFA' safeAreaProps={{ safeAreaTop: 10, safeAreaBottom: 10, safeAreaLeft: 20, safeAreaRight: 20 }}>
+                            <Box  style={styles.box} backgroundColor='#87CEFA' safeAreaProps={{ safeAreaTop: 10, safeAreaBottom: 10, safeAreaLeft: 20, safeAreaRight: 20 }}>
 
                             </Box>
                         </View>)}

diff --git a/NativeBase/nativeBaseUiTest/Divider.tsx b/NativeBase/nativeBaseUiTest/Divider.tsx
@@ -93,7 +93,7 @@ export function DividerTest() {
                       <Text>Easy</Text>
                       <Divider
                         bg="indigo.500"
-                        thickness="2"
+                        thickness="5"
                         mx="2"
                         orientation="vertical"
                       />

diff --git a/NativeBase/nativeBaseUiTest/Flex.tsx b/NativeBase/nativeBaseUiTest/Flex.tsx
@@ -5,7 +5,7 @@ import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
 export function FlexTest() {
     const getExampleFlex = (examplePara: Object) => {
         return (
-            <Flex {...examplePara} mb="2.5" mt="1.5">
+            <Flex {...examplePara} mb="2.5" mt="1.5" >
                 <Center size="16" bg="primary.100" _text={{
                     color: "coolGray.800"
                 }}>

diff --git a/NativeBase/nativeBaseUiTest/Heading.tsx b/NativeBase/nativeBaseUiTest/Heading.tsx
@@ -30,7 +30,7 @@ export function HeadingTest() {
                         itShould="isTruncated"
                         tags={['dev']}
                     >
-                        <Heading isTruncated>
+                        <Heading isTruncated underline strikeThrough italic bold>
                             NativeBase is a simple, modular and accessible component library that
                             gives you building blocks to build you React applications.
                         </Heading>;

diff --git a/NativeBase/nativeBaseUiTest/Icon.tsx b/NativeBase/nativeBaseUiTest/Icon.tsx
@@ -69,8 +69,9 @@ export function IconTest() {
             <TestCase itShould="add" tags={['dev']}>
               <Center>
                 <HStack space={3}>
-                  <Icon
-                    name="add"
+                    <Icon
+                    as={MaterialCommunityIcons}
+                    name="web"
                     color="coolGray.800"
                     _dark={{
                       color: 'warmGray.50',

diff --git a/NativeBase/nativeBaseUiTest/IconButton.tsx b/NativeBase/nativeBaseUiTest/IconButton.tsx
@@ -1,13 +1,8 @@
 import {View, StyleSheet, ScrollView, Text} from 'react-native';
-import {
-  IconButton,
-  Icon,
-  Box,
-  Center,
-  VStack,
-} from 'native-base';
+import {IconButton, Icon, Box, Center, VStack} from 'native-base';
 
 import {Tester, TestSuite, TestCase} from '@rnoh/testerino';
+import Entypo from 'react-native-vector-icons/Entypo';
 
 export function IconButtonTest() {
   // 官网给给的文档就是通过组件写样式做成了卡片的样子
@@ -23,7 +18,16 @@ export function IconButtonTest() {
                   <Box alignItems="center">
                     <IconButton
                       colorScheme="danger"
-                      icon={<Icon name="emoji-happy" />}
+                      icon={
+                        <Icon
+                          as={Entypo}
+                          name="app-store"
+                          color="coolGray.800"
+                          _dark={{
+                            color: 'warmGray.50',
+                          }}
+                        />
+                      }
                       borderRadius="full"
                       _icon={{
                         color: 'orange.500',
@@ -70,6 +74,16 @@ export function IconButtonTest() {
                             // as: MaterialIcons,
                             name: 'menu',
                           }}
+                          icon={
+                            <Icon
+                              as={Entypo}
+                              name="app-store"
+                              color="coolGray.800"
+                              _dark={{
+                                color: 'warmGray.50',
+                              }}
+                            />
+                          }
                         />
                       ))}
                     </VStack>
@@ -95,6 +109,16 @@ export function IconButtonTest() {
                             // as: AntDesign,
                             name: 'search1',
                           }}
+                          icon={
+                            <Icon
+                              as={Entypo}
+                              name="app-store"
+                              color="coolGray.800"
+                              _dark={{
+                                color: 'warmGray.50',
+                              }}
+                            />
+                          }
                         />
                       ))}
                     </VStack>

diff --git a/NativeBase/nativeBaseUiTest/KeyboardAvoidingView.tsx b/NativeBase/nativeBaseUiTest/KeyboardAvoidingView.tsx
@@ -47,6 +47,99 @@ export function KeyboardAvoidingViewTest() {
               </View>
             </TestCase>
           </TestSuite>
+          <TestSuite name="KeyboardAvoidingView">
+            <TestCase itShould="KeyboardAvoidingView" tags={['dev']}>
+              <View style={styles.section}>
+                <Text>KeyboardAvoidingView</Text>
+                <View style={styles.subSection}>
+                  <KeyboardAvoidingView
+                    h={{
+                      base: '400px',
+                      lg: 'auto',
+                    }}
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+                    <Center>
+                      <VStack
+                        flex="1"
+                        justifyContent="flex-end"
+                        w="100%"
+                        maxW="300">
+                        <Heading mb="3">Forgot Password</Heading>
+                        <Text color="muted.400">
+                          Not to worry! Enter email address associated with your
+                          account and we’ll send a link to reset your password.
+                        </Text>
+                        <Input placeholder="Email Address" mt="10" mb="4" />
+                        <Button mb="4">Proceed</Button>
+                      </VStack>
+                    </Center>
+                  </KeyboardAvoidingView>
+                </View>
+              </View>
+            </TestCase>
+          </TestSuite>
+          <TestSuite name="KeyboardAvoidingView">
+            <TestCase itShould="KeyboardAvoidingView" tags={['dev']}>
+              <View style={styles.section}>
+                <Text>KeyboardAvoidingView</Text>
+                <View style={styles.subSection}>
+                  <KeyboardAvoidingView
+                    h={{
+                      base: '400px',
+                      lg: 'auto',
+                    }}
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+                    <Center>
+                      <VStack
+                        flex="1"
+                        justifyContent="flex-end"
+                        w="100%"
+                        maxW="300">
+                        <Heading mb="3">Forgot Password</Heading>
+                        <Text color="muted.400">
+                          Not to worry! Enter email address associated with your
+                          account and we’ll send a link to reset your password.
+                        </Text>
+                        <Input placeholder="Email Address" mt="10" mb="4" />
+                        <Button mb="4">Proceed</Button>
+                      </VStack>
+                    </Center>
+                  </KeyboardAvoidingView>
+                </View>
+              </View>
+            </TestCase>
+          </TestSuite>
+          <TestSuite name="KeyboardAvoidingView">
+            <TestCase itShould="KeyboardAvoidingView" tags={['dev']}>
+              <View style={styles.section}>
+                <Text>KeyboardAvoidingView</Text>
+                <View style={styles.subSection}>
+                  <KeyboardAvoidingView
+                    h={{
+                      base: '400px',
+                      lg: 'auto',
+                    }}
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+                    <Center>
+                      <VStack
+                        flex="1"
+                        justifyContent="flex-end"
+                        w="100%"
+                        maxW="300">
+                        <Heading mb="3">Forgot Password</Heading>
+                        <Text color="muted.400">
+                          Not to worry! Enter email address associated with your
+                          account and we’ll send a link to reset your password.
+                        </Text>
+                        <Input placeholder="Email Address" mt="10" mb="4" />
+                        <Button mb="4">Proceed</Button>
+                      </VStack>
+                    </Center>
+                  </KeyboardAvoidingView>
+                </View>
+              </View>
+            </TestCase>
+          </TestSuite>
         </ScrollView>
       </Tester>
     </>