fix(DragDrawer):修复内容无 法滚动问题及文档更新 (#364)

Amber-Nan · 杨楠 · web-flow · commit 052ad86ebfec · 2022-01-05T11:22:27.000+08:00
* fix(Divider):优化 gutter属性不生效问题

* feat(Divider): 增加分割线标题的位置调整功能 &amp; 更新文档

* feat(Rating):增加自定义每项的提示信息 &amp; 更新文档

* feat(Rating):增加只读功能 &amp; 文档更新

* feat(Timeline): 增加改变时间轴内容相对位置功能 &amp; 文档更新

* style(Timeline):Update Readme.md img

* feat(Timeline):增加自定义图标 &amp; 文档更新

* feat(Timeline):优化自定义图标 &amp; 文档更新

* feat:新增Calendar 日历组件

* doc(website): Update Calendar  Readme.md

* feat(Calendar):增加农历及假期展示 &amp;&amp; 文档更新

* feat(Calendar):增加假日文字颜色

* feat(Calendar):左上角按钮增加自定义跳转功能&amp;文档更新

* feat(Calendar):优化农历假日及文字排版

* feat(Calendar):处理文字长度

* fix(Calendar):优化安卓文字排版

* feat(Calendar):增加农历详情展示 &amp; 文档更新

* feat(DragDrawer):新增DragDrawer 拖曳抽屉 &amp; 文档更新

* doc(website): 增加DragDrawer目录

* feat(DragDrawer):增加自定义图标 &amp; 文档更新

* feat(DragDrawer): 增加抽屉自定义样式 &amp; 文档更新

* feat(DragDrawer): 增加抽屉自定义样式 &amp; 文档更新

* feat(DragDrawer):自定义抽屉样式

* doc(website): Update ios打包Readme.md

* doc(website): Update TreeSelect Readme.md

* doc(website): Update Readme.md

* style(website): Update Readme.md

* feat(TextArea):增加多行输入框 &amp; 文档更新

* fix(DragDrawer):修改组件展示示例

* feat(TextArea):增加字数展示 &amp;&amp; 文档更新

* doc(website): Update Android(Mac) 打包 Readme.md

* fix(DragDrawer):修复内容无法滚动问题及文档更新

Co-authored-by: 杨楠 &lt;yangnan@nihaosi.com&gt;
diff --git a/example/examples/src/routes/DragDrawer/index.tsx b/example/examples/src/routes/DragDrawer/index.tsx
@@ -1,34 +1,39 @@
 import React, {useState, Fragment} from 'react';
-import {View, Text} from 'react-native';
-import {DragDrawer, Card, Icon} from '@uiw/react-native';
+import {View, Text, FlatList} from 'react-native';
+import {DragDrawer, Card, Icon, List} from '@uiw/react-native';
 import Layout, {Container} from '../../Layout';
 import {ComProps} from '../../routes';
 const {Header, Body, Footer} = Layout;
-
+const data = [];
+for (let i = 1; i < 21; i++) {
+  data.push(i);
+}
 export interface DragDrawerViewProps extends ComProps {}
 export default function DragDrawerView({route}: DragDrawerViewProps) {
   const description = route.params.description;
   const title = route.params.title;
+
+  const renderItem = ({item}) => (
+    <View style={{borderWidth: 0.5, padding: 10, borderColor: '#D9D9D9'}}>
+      <Text style={{fontSize: 20, textAlign: 'center'}}>{item}</Text>
+    </View>
+  );
   return (
     <Fragment>
       <DragDrawer
         drawerHeight={350}
         // drawerBackgroundColor='lightblue' //抽屉背景
         // icon={<Icon name="smile" fill="red" size={30} />} //自定义拖曳图标
       >
-        <View>
-          <Text>按住图标可上下拖曳抽屉</Text>
-        </View>
+        <FlatList
+          data={data}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+        />
       </DragDrawer>
       <Container>
         <Layout>
           <Header title={title} description={description} />
-          <Body>
-            <Card title="下边抽屉可上下拖曳">
-              <Text>下边抽屉可上下拖曳</Text>
-            </Card>
-          </Body>
-          <Footer />
         </Layout>
       </Container>
     </Fragment>
diff --git a/packages/core/src/DragDrawer/README.md b/packages/core/src/DragDrawer/README.md
@@ -9,42 +9,46 @@ DragDrawer 拖曳抽屉
 
 ```jsx
 import React, { useState, Fragment } from 'react';
-import { View, Text } from 'react-native';
-import { DragDrawer, Card, Icon } from '@uiw/react-native';
+import { View, Text, FlatList } from 'react-native';
+import { DragDrawer, Card, Icon, List } from '@uiw/react-native';
 import Layout, { Container } from '../../Layout';
 import { ComProps } from '../../routes';
 const { Header, Body, Footer } = Layout;
-
+const data = [];
+for (let i = 1; i < 21; i++) {
+  data.push(i);
+}
 export interface DragDrawerViewProps extends ComProps { }
 export default function DragDrawerView({ route }: DragDrawerViewProps) {
   const description = route.params.description;
   const title = route.params.title;
+
+  const renderItem = ({ item }) => (
+    <View style={{ borderWidth: 0.5, padding: 10, borderColor: '#D9D9D9' }}>
+      <Text style={{ fontSize: 20, textAlign: 'center' }}>{item}</Text>
+    </View>
+  )
   return (
     <Fragment>
       <DragDrawer
         drawerHeight={350}
       // drawerBackgroundColor='lightblue' //抽屉背景
       // icon={<Icon name="smile" fill="red" size={30} />} //自定义拖曳图标
       >
-        <View>
-          <Text>按住图标可上下拖曳抽屉</Text>
-        </View>
+        <FlatList
+          data={data}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+        />
       </DragDrawer>
       <Container>
         <Layout>
           <Header title={title} description={description} />
-          <Body>
-            <Card title="下边抽屉可上下拖曳">
-              <Text>下边抽屉可上下拖曳</Text>
-            </Card>
-          </Body>
-          <Footer />
         </Layout>
       </Container>
     </Fragment>
   );
 }
-
 ```
 
 ### props
diff --git a/packages/core/src/DragDrawer/index.tsx b/packages/core/src/DragDrawer/index.tsx
@@ -118,9 +118,8 @@ function DragDrawer(props: DragDrawerProps) {
   return (
     <Animated.View
       style={StyleSheet.flatten([styles.drawer, dynamicDrawerStyles, style, { height: animatedViewHeight }])}
-      {...panResponder.panHandlers}
     >
-      <Animated.View style={[styles.viewPosition]}>
+      <Animated.View style={[styles.viewPosition]} {...panResponder.panHandlers}>
         <TouchableOpacity activeOpacity={1}>
           <View style={[styles.homeContainer]}>{IconCustom(icon)}</View>
         </TouchableOpacity>
