feat: 添加 touchable组件

src/components/Touchable/Touchable.tsx

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { TouchableOpacity } from './TouchableOpacity';
+import { TouchableHighlight } from './TouchableHighlight';
+import type { ITouchable } from './types';
+
+export const Touchable: ITouchable = (props) => {
+  const { children, mode = 'opacity', disabled, onPress, style, ...others } = props;
+
+  const _style = useMemo(() => {
+    return disabled ? [style, { opacity: 0.5 }] : style;
+  }, [style, disabled]);
+
+  switch (mode) {
+    case 'none':
+      return (
+        <TouchableOpacity style={_style} disabled={disabled} activeOpacity={1} onPress={onPress} {...others}>
+          {children}
+        </TouchableOpacity>
+      );
+    case 'highlight':
+      return (
+        <TouchableHighlight style={_style} disabled={disabled} onPress={onPress} {...others}>
+          {children}
+        </TouchableHighlight>
+      );
+    default:
+      return (
+        <TouchableOpacity style={_style} disabled={disabled} onPress={onPress} {...others}>
+          {children}
+        </TouchableOpacity>
+      );
+  }
+};

src/components/Touchable/TouchableHighlight.tsx

@@ -1,6 +1,6 @@
 import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native';
 
-const TouchableHighlight = (props: TouchableHighlightProps) => {
+export const TouchableHighlight = (props: TouchableHighlightProps) => {
   const { children, ...others } = props;
   return <RNTouchableHighlight {...others}>{children}</RNTouchableHighlight>;
 };
@@ -10,4 +10,3 @@ TouchableHighlight.defaultProps = {
   activeOpacity: 0.8,
   underlayColor: '#f5f5f5',
 };
-export default TouchableHighlight;

src/components/Touchable/TouchableOpacity.tsx

@@ -1,6 +1,6 @@
 import { TouchableOpacity as RNTouchableOpacity, TouchableOpacityProps } from 'react-native';
 
-const TouchableOpacity = (props: TouchableOpacityProps) => {
+export const TouchableOpacity = (props: TouchableOpacityProps) => {
   const { children, ...others } = props;
   return <RNTouchableOpacity {...others}>{children}</RNTouchableOpacity>;
 };
@@ -9,5 +9,3 @@ TouchableOpacity.displayName = 'TouchableOpacity';
 TouchableOpacity.defaultProps = {
   activeOpacity: 0.6,
 };
-
-export default TouchableOpacity;

src/components/Touchable/index.tsx

@@ -1,28 +1,2 @@
-import { View } from 'react-native';
-import TouchableOpacity from './TouchableOpacity';
-// import { useThrottleFn } from '../../../hooks';
-import type { ITouchable } from './types';
-
-export const Touchable: ITouchable = (props) => {
-  const { children, mode = 'opacity', disabled, onPress, ...others } = props;
-
-  const childElement = disabled ? <View style={{ opacity: 0.5 }}>{children}</View> : children;
-
-  switch (mode) {
-    // 先放在这里, 目前用不到highlight这种模式 统一opacity就可以
-    case 'none':
-      return (
-        <TouchableOpacity disabled={disabled} activeOpacity={1} onPress={onPress} {...others}>
-          {childElement}
-        </TouchableOpacity>
-      );
-    default:
-      return (
-        <TouchableOpacity disabled={disabled} onPress={onPress} {...others}>
-          {childElement}
-        </TouchableOpacity>
-      );
-  }
-};
-
-export default Touchable;
+export * from './Touchable';
+export * from './types';

src/components/Touchable/types.ts

@@ -1,24 +1,23 @@
 import { ReactElement } from 'react';
 import { TouchableOpacityProps, TouchableHighlightProps } from 'react-native';
 
-// 交互统一的场景,highlight暂时用不到, 所以没有在ITouchable定义,
-interface ITouchableHighlightProps extends TouchableOpacityProps {
+interface TDTouchableHighlightProps extends TouchableOpacityProps {
   mode?: 'highlight';
   // throttleTime?: number;
   onPress?: () => void;
 }
-interface ITouchableNoneProps extends TouchableOpacityProps {
+interface TDTouchableNoneProps extends TouchableOpacityProps {
   mode?: 'none';
   // throttleTime?: number;
   onPress?: () => void;
 }
 
-interface ITouchableOpacityProps extends TouchableHighlightProps {
+interface TDTouchableOpacityProps extends TouchableHighlightProps {
   mode?: 'opacity';
   // throttleTime?: number;
   onPress?: () => void;
 }
 
-type ITouchable = (props: ITouchableOpacityProps | ITouchableNoneProps) => ReactElement;
+type ITouchable = (props: TDTouchableOpacityProps | TDTouchableNoneProps | TDTouchableHighlightProps) => ReactElement;
 
-export type { ITouchableHighlightProps, ITouchableOpacityProps, ITouchable };
+export type { TDTouchableHighlightProps, TDTouchableOpacityProps, ITouchable };

src/components/index.ts

@@ -1,2 +1,3 @@
-export { View, Text, ScrollView, Image, TextInput, WrapperComponent } from './Base';
-export { Button } from './Button';
+export * from './Base';
+export * from './Button';
+export * from './Touchable';