chore(SpeedDial): 修复SpeedDial 悬浮标记在实例中拖拽困难 (#276)

cuilanxin · cuilanxin · commit 97bbf4385dd2 · 2021-10-09T16:24:48.000+08:00
diff --git a/example/examples/src/Layout/index.tsx b/example/examples/src/Layout/index.tsx
@@ -6,6 +6,7 @@ import {
   ViewStyle,
   SafeAreaView,
   ScrollView,
+  ScrollViewProps,
   Text,
   TextStyle,
   Image,
@@ -54,7 +55,7 @@ const Header = (props: HeaderProps) => {
   );
 };
 
-export interface BodyProps {
+export interface BodyProps extends ScrollViewProps {
   style?: StyleProp<ViewStyle>;
   children?: React.ReactNode;
   isScroll?: boolean;
@@ -141,15 +142,18 @@ const Card = (props: CardProps) => {
   );
 };
 
-export interface ContainerProps {
+export interface ContainerProps extends ScrollViewProps {
   children?: React.ReactNode;
   isScroll?: boolean;
 }
 
 export const Container = (props: ContainerProps) => {
+  const {children, ...others} = props;
   return (
-    <SafeAreaView style={{backgroundColor: '#ededed'}}>
-      <ScrollView style={{height: '100%'}}>{props.children}</ScrollView>
+    <SafeAreaView style={{backgroundColor: '#ededed'}} {...others}>
+      <ScrollView style={{height: '100%'}} {...others}>
+        {children}
+      </ScrollView>
     </SafeAreaView>
   );
 };
diff --git a/example/examples/src/routes/SpeedDial/index.tsx b/example/examples/src/routes/SpeedDial/index.tsx
@@ -27,12 +27,11 @@ export default class Index extends Component<IndexProps, IndexState> {
     const {route} = this.props;
     const description = route.params.description;
     const title = route.params.title;
-
     return (
-      <Container>
+      <Container scrollEnabled={false}>
         <Layout>
           <Header title={title} description={description} />
-          <Body>
+          <Body scrollEnabled={false}>
             <SpeedDial
               icon={['star-on', 'star-off']}
               isDrag={true}
diff --git a/packages/core/src/SpeedDial/SpeedDialItem.tsx b/packages/core/src/SpeedDial/SpeedDialItem.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { View, StyleSheet, Text, TouchableOpacity, ViewStyle } from 'react-native';
+import { View, StyleSheet, Text, TouchableOpacity, ViewStyle, GestureResponderHandlers } from 'react-native';
 import Icon, { IconsName } from '../Icon';
 import { TabsItemIconTypes } from '../Tabs/TabsItem';
 
@@ -16,6 +16,7 @@ export interface SpeedDialItemProps {
    * 点击右边时触发
    */
   onPress?: Function;
+  move?: GestureResponderHandlers;
 }
 
 function SpeedDialItem(props: SpeedDialItemProps) {
@@ -38,9 +39,8 @@ function SpeedDialItem(props: SpeedDialItemProps) {
   }, [icon]);
 
   return (
-    <View style={styles.speedDialItemContainer}>
+    <View style={styles.speedDialItemContainer} {...props.move}>
       <View style={[styles.speedDialItemTitle, { ...titleStyle }]}>{ChildTitle}</View>
-
       <TouchableOpacity
         onPress={() => {
           onPress && onPress();
diff --git a/packages/core/src/SpeedDial/index.tsx b/packages/core/src/SpeedDial/index.tsx
@@ -137,14 +137,8 @@ function SpeedDial(props: SpeedDialProps) {
   return (
     <View>
       <Animated.View
-        style={
-          isDrag
-            ? {
-                transform: [{ translateX: pan.x }, { translateY: pan.y }],
-              }
-            : {}
-        }
-        {...panResponder.panHandlers}
+        style={{ transform: [{ translateX: pan.x }, { translateY: pan.y }] }}
+        // {...panResponder.panHandlers}
       >
         <View style={[styles.viewPosition, { bottom: bottom - MainHeight, right: right }]}>
           {success &&
@@ -159,15 +153,16 @@ function SpeedDial(props: SpeedDialProps) {
                 ]}
                 key={i}
               >
-                <Item {...item} />
+                <Item {...item} move={panResponder.panHandlers} />
               </Animated.View>
             ))}
-
-          <TouchableOpacity activeOpacity={1} onPress={onOpenHome}>
-            <View style={[styles.homeContainer, { ...style }]} {...other}>
-              {iconName === 'plus' ? PlusDom : CloseDom}
-            </View>
-          </TouchableOpacity>
+          <View {...panResponder.panHandlers}>
+            <TouchableOpacity activeOpacity={1} onPress={onOpenHome}>
+              <View style={[styles.homeContainer, { ...style }]} {...other}>
+                {iconName === 'plus' ? PlusDom : CloseDom}
+              </View>
+            </TouchableOpacity>
+          </View>
         </View>
       </Animated.View>
     </View>
