Merge branch 'dev'

Author: ChenlingasMx

example/examples/src/routes/TextArea/index.tsx

@@ -15,6 +15,7 @@ export default class TextAreaView extends Component<TextAreaProps> {
     value3: '自定义输入框样式',
     value4: '',
     value5: '',
+    value6: '',
   };
 
   render() {
@@ -65,6 +66,16 @@ export default class TextAreaView extends Component<TextAreaProps> {
                 value={this.state.value1}
               />
             </Card>
+            <Card title="允许拖拽" style={styles.card}>
+              <TextArea
+                showWords={true}
+                onChange={(value6: string) => {
+                  this.setState({value6});
+                }}
+                value={this.state.value6}
+                draggable
+              />
+            </Card>
             <Card title="自定义输入框样式" style={styles.card}>
               <TextArea
                 height={150}

packages/core/src/ImageViewer/README.md

@@ -8,7 +8,7 @@ ImageViewer 图片查看
 
 ### 基础示例
 
-```jsx mdx:preview&background=#bebebe29
+```jsx
 import React, { Component } from 'react';
 import { ImageViewer } from '@uiw/react-native';
 
@@ -22,7 +22,7 @@ export default Demo
 
 ### 指定图片地址
 
-```jsx mdx:preview&background=#bebebe29
+```jsx
 import React from 'react';
 import { ImageViewer } from '@uiw/react-native';
 
@@ -40,7 +40,7 @@ export default Demo
 
 ### 展示多张图片
 
-```jsx mdx:preview&background=#bebebe29
+```jsx
 import React from 'react';
 import { ImageViewer } from '@uiw/react-native';
 

packages/core/src/ImageViewer/index.tsx

@@ -1,11 +1,17 @@
-import React, { useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { StyleSheet, ViewProps, Dimensions, View, Image, Animated } from 'react-native';
-import TransitionImage, { ImageProps } from '../TransitionImage';
-import MaskLayer, { MaskLayerProps } from '../MaskLayer';
+import TransitionImage from '../TransitionImage';
+import MaskLayer from '../MaskLayer';
 import Swiper from '../Swiper';
 import { ActivityIndicator } from 'react-native';
 export let ImageMainWidth = Dimensions.get('window').width;
 export let ImageMainHeight = Dimensions.get('window').height;
+import {
+  PinchGestureHandler,
+  PinchGestureHandlerGestureEvent,
+  HandlerStateChangeEvent,
+  PinchGestureHandlerEventPayload,
+} from 'react-native-gesture-handler';
 
 const defaultImage = 'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg';
 
@@ -25,12 +31,31 @@ export interface ImageViewerProps extends ViewProps {
 }
 
 function ImageViewer(props: ImageViewerProps) {
-  const { width = 150, height = 150, src = defaultImage, defaultIndex = 0, ...others } = props;
-  const [visible, setVisible] = useState(false);
+  const { width = 150, height = 150, src = defaultImage, defaultIndex = 0 } = props;
   const [index, setIndex] = useState<number>(0);
+  const [visible, setVisible] = useState(false);
+  const [canVisible, setCanVisible] = useState(true);
   const fadeAnim = useRef(new Animated.Value(0)).current;
 
-  useMemo(() => {
+  const scale = useRef(new Animated.Value(1)).current; // 初始缩放比例为 1
+  const lastScale = useRef(1); // 上一次的缩放比例
+
+  const onPinchGestureEvent = (event: PinchGestureHandlerGestureEvent) => {
+    if (event.nativeEvent.scale) {
+      // 更新缩放比例
+      scale.setValue(lastScale.current * event.nativeEvent.scale);
+    }
+  };
+
+  const onPinchHandlerStateChange = (event: HandlerStateChangeEvent<PinchGestureHandlerEventPayload>) => {
+    if (event.nativeEvent.oldState === 4 && event.nativeEvent.state === 5) {
+      // 手势结束后，保存缩放比例
+      lastScale.current *= event.nativeEvent.scale;
+      scale.setValue(lastScale.current);
+    }
+  };
+
+  useEffect(() => {
     if (!visible) {
       fadeAnim.setValue(0);
       return;
@@ -49,45 +74,37 @@ function ImageViewer(props: ImageViewerProps) {
     return src;
   }, [src]);
 
-  const onImgClick = (index: number) => {
-    setIndex(index);
-    setVisible(true);
-  };
+  const PinchGestureHandlerChild = (url: string) =>
+    useMemo(
+      () => (
+        <PinchGestureHandler onGestureEvent={onPinchGestureEvent} onHandlerStateChange={onPinchHandlerStateChange}>
+          <Animated.View style={[{ transform: [{ scale }] }]}>
+            <Image style={{ width: '100%', height: '100%', resizeMode: 'contain' }} source={{ uri: url }} />
+          </Animated.View>
+        </PinchGestureHandler>
+      ),
+      [src, scale],
+    );
 
   return (
     <View style={{}}>
-      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-        {Array.isArray(src) ? (
-          src.map((item: ImageViewerDataSourceProps, index: number) => {
-            return (
-              <TransitionImage
-                key={index}
-                style={{ width: width, height: height, flex: 1 }}
-                onPress={() => onImgClick(index)}
-                source={{ uri: item.url }}
-                PlaceholderContent={<ActivityIndicator />}
-                transition={true}
-                transitionDuration={500}
-              />
-            );
-          })
-        ) : (
-          <TransitionImage
-            style={{ width: width, height: height }}
-            onPress={() => setVisible(true)}
-            source={{ uri: imgUrl }}
-            PlaceholderContent={<ActivityIndicator />}
-            transition={true}
-            transitionDuration={500}
-          />
-        )}
-      </View>
+      <TransitionImage
+        style={{ width: width, height: height }}
+        onPress={() => canVisible && setVisible(true)}
+        source={{ uri: imgUrl }}
+        PlaceholderContent={<ActivityIndicator />}
+        transition={true}
+        transitionDuration={500}
+        onError={(e) => {
+          if (e?.nativeEvent?.error) setCanVisible(false);
+        }}
+      />
       <MaskLayer visible={visible} onDismiss={() => setVisible(false)} opacity={0.9}>
         <Animated.View style={[styles.content, { opacity: fadeAnim }]}>
           {Array.isArray(src) ? (
             <Swiper dataSource={src} height={200} autoplay={false} index={index} />
           ) : (
-            <Image style={{ width: '100%', height: '100%', resizeMode: 'contain' }} source={{ uri: src }} />
+            PinchGestureHandlerChild(imgUrl)
           )}
         </Animated.View>
       </MaskLayer>

packages/core/src/TextArea/README.md

@@ -116,31 +116,6 @@ function Demo() {
 
 export default Demo
 ```
-
-### 根据内容自动调整高度
-
-```jsx mdx:preview&background=#bebebe29
-import React, { useState } from 'react';
-import TextArea from '@uiw/react-native/lib/TextArea';
-
-function Demo() {
-  const [value, setValue] = useState('')
-
-  return (
-    <TextArea
-      value={value}
-      onChange={(value) => {
-        setValue(value);
-      }}
-      fontStyle={{ color:'#aaa' }}
-      placeholder='请输入'
-      autoSize
-    />
-  )
-}
-export default Demo
-```
-
 ### 自定义输入框样式
 ```jsx mdx:preview&background=#bebebe29
 import React, { useState } from 'react';

packages/core/src/TextArea/index.tsx

@@ -15,11 +15,8 @@ import {
   TextInputContentSizeChangeEventData,
   PanResponder,
   PanResponderInstance,
-  LayoutChangeEvent,
 } from 'react-native';
 
-import Icon, { IconsName } from '../Icon';
-
 export interface TextAreaProps extends ViewProps {
   /** 文本位置 */
   textAlignVertical?: 'top' | 'center' | 'auto' | 'bottom' | undefined;
@@ -92,13 +89,13 @@ function TextArea(props: TextAreaProps) {
 
   const onChangeValue = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
     if (autoSize) {
-      setDefaultText(event.nativeEvent.text);
+      setDefaultText(event?.nativeEvent?.text);
     }
   };
 
   const onContentSizeChange = (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
     if (autoSize) {
-      setHeight(event.nativeEvent.contentSize.height + 20);
+      setHeight(event?.nativeEvent?.contentSize?.height + 20);
     }
   };
 

website/src/pages/docs/environment-setup/android-phone/README.md renamed to website/src/pages/docs/phone-run/android-phone/README.md

@@ -1,4 +1,4 @@
-Android 真机环境安装
+Android 真机运行
 ===
 
 本文档将指导你通过必须的步骤在设备上运行 React Native app，为生产做准备 。

website/src/pages/docs/environment-setup/ios-phone/index.tsx renamed to website/src/pages/docs/phone-run/android-phone/index.tsx

@@ -11,7 +11,7 @@ const DEMO = () => (
   <Preview
     {...md}
     transformImageUri={transformImageUri}
-    path="website/src/pages/docs/environment-setup/ios-phone/README.md"
+    path="website/src/pages/docs/phone-run/android-phone/README.md"
   />
 );
 export default DEMO;