fix(Tab): 修复在android手机上被遮挡

uiwjs · Mar 10, 2023 · 9e3b348 · 9e3b348
1 parent f400bdc
commit 9e3b348
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 24 deletions.
diff --git a/example/examples/src/routes/Tabs/index.tsx b/example/examples/src/routes/Tabs/index.tsx
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, Text} from 'react-native';
 import Layout, {Container} from '../../Layout';
 import {Tabs, IconsName} from '@uiw/react-native';
 import {ComProps} from '../../routes';
@@ -43,12 +43,36 @@ export default class Index extends Component<IndexProps, IndexState> {
           <Header title={title} description={description} />
           <Body>
             <Tabs value={this.state.flag} onChange={value => this.setState({flag: value})}>
-              <Tabs.Item title="喜欢" />
-              <Tabs.Item title="关注" />
-              <Tabs.Item title="兴趣" />
-              <Tabs.Item title="爱好" />
-              <Tabs.Item title="gitlabl" />
-              <Tabs.Item title="github" />
+              <Tabs.Item title="喜欢">
+                <View>
+                  <Text>喜欢</Text>
+                </View>
+              </Tabs.Item>
+              <Tabs.Item title="关注">
+                <View>
+                  <Text>关注</Text>
+                </View>
+              </Tabs.Item>
+              <Tabs.Item title="兴趣">
+                <View>
+                  <Text>喜欢</Text>
+                </View>
+              </Tabs.Item>
+              <Tabs.Item title="爱好">
+                <View>
+                  <Text>爱好</Text>
+                </View>
+              </Tabs.Item>
+              <Tabs.Item title="gitlabl">
+                <View>
+                  <Text>gitlabl</Text>
+                </View>
+              </Tabs.Item>
+              <Tabs.Item title="github">
+                <View>
+                  <Text>github</Text>
+                </View>
+              </Tabs.Item>
             </Tabs>
 
             <View style={styles.divider} />

diff --git a/packages/core/src/Tabs/TabsItem.tsx b/packages/core/src/Tabs/TabsItem.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useImperativeHandle } from 'react';
 import { View, StyleSheet, Text, TouchableOpacity, Animated } from 'react-native';
 
 import Icon, { IconsName } from '../Icon';
@@ -38,10 +38,11 @@ export interface TabsItemProps {
   onChange?: (value: number) => void;
   index?: number;
   defaultColor?: string;
+  children?: React.ReactNode;
 }
 
 function TabsItem(props: TabsItemProps) {
-  const { activeColor, icon, index, value, onChange, defaultColor } = props;
+  const { activeColor, icon, index, value, onChange, defaultColor, children } = props;
   const opacity = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -126,14 +127,16 @@ function TabsItem(props: TabsItemProps) {
   }, [value]);
 
   return (
-    <View style={styles.TabsItemContainer}>
-      <TouchableOpacity onPress={() => (index === 0 || index) && onChange?.(index)}>
-        <Animated.View style={[styles.titleBox, { ...style().titleBoxStyle }]}>
-          {IconDom}
-          <Text style={[styles.title, { ...style().titleStyle }]}>{props.title}</Text>
-        </Animated.View>
-        {BorderDom}
-      </TouchableOpacity>
+    <View>
+      <View style={styles.TabsItemContainer}>
+        <TouchableOpacity onPress={() => (index === 0 || index) && onChange?.(index)}>
+          <Animated.View style={[styles.titleBox, { ...style().titleBoxStyle }]}>
+            {IconDom}
+            <Text style={[styles.title, { ...style().titleStyle }]}>{props.title}</Text>
+          </Animated.View>
+          {BorderDom}
+        </TouchableOpacity>
+      </View>
     </View>
   );
 }

diff --git a/packages/core/src/Tabs/index.tsx b/packages/core/src/Tabs/index.tsx
@@ -37,7 +37,7 @@ function Tabs(props: TabsProps) {
   }
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView>
       <View style={[styles.TabsContainer, style]}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           {children &&
@@ -58,23 +58,27 @@ function Tabs(props: TabsProps) {
             })}
         </ScrollView>
       </View>
+      {children &&
+        React.Children.toArray(children).map((child, index) => {
+          if (!React.isValidElement(child)) {
+            return;
+          }
+          if (value === index) {
+            return child.props?.children;
+          }
+        })}
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
   TabsContainer: {
     backgroundColor: '#fff',
     maxWidth: 1 * MainWidth,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: 15,
-    paddingBottom: 20,
+    paddingVertical: 15,
   },
 });