Merge branch 'dev'

uiwjs · Mar 20, 2023 · 60f3b63 · 60f3b63
2 parents d1af48c + a03d956
commit 60f3b63
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 37 deletions.
diff --git a/example/examples/src/routes/DatePicker/index.tsx b/example/examples/src/routes/DatePicker/index.tsx
@@ -30,7 +30,6 @@ export default class BadgeView extends React.Component<BadgeViewProps> {
               onOk={() => this.setState({visible: false})}
               onClosed={() => this.setState({visible: false})}
               precision="second"
-              max="2021-11-30 23:50:50"
             />
           </Body>
           <Footer />

diff --git a/packages/core/src/ImageViewer/index.tsx b/packages/core/src/ImageViewer/index.tsx
@@ -1,8 +1,9 @@
 import React, { useState, useMemo, useRef, useEffect } from 'react';
-import { StyleSheet, ViewProps, Dimensions, View, Image, Animated } from 'react-native';
+import { StyleSheet, ViewProps, Dimensions, View, Image, Animated, Text, TouchableOpacity } from 'react-native';
 import TransitionImage from '../TransitionImage';
 import MaskLayer from '../MaskLayer';
 import Swiper from '../Swiper';
+import Icon from '../Icon';
 import { ActivityIndicator } from 'react-native';
 export let ImageMainWidth = Dimensions.get('window').width;
 export let ImageMainHeight = Dimensions.get('window').height;
@@ -19,6 +20,7 @@ export interface ImageViewerDataSourceProps {
   url: string;
   [key: string]: any;
 }
+
 export interface ImageViewerProps extends ViewProps {
   /** 图片宽度 */
   width?: number;
@@ -40,6 +42,9 @@ function ImageViewer(props: ImageViewerProps) {
   const scale = useRef(new Animated.Value(1)).current; // 初始缩放比例为 1
   const lastScale = useRef(1); // 上一次的缩放比例
 
+  const rotateAngle = useRef(new Animated.Value(0)).current; // 初始化旋转角度为 0
+  const lastAngle = useRef(0); // 保存上次的旋转角度
+
   const onPinchGestureEvent = (event: PinchGestureHandlerGestureEvent) => {
     if (event.nativeEvent.scale) {
       // 更新缩放比例
@@ -55,6 +60,15 @@ function ImageViewer(props: ImageViewerProps) {
     }
   };
 
+  const onRotate = () => {
+    lastAngle.current += 90; // 旋转 90 度
+    Animated.timing(rotateAngle, {
+      useNativeDriver: true,
+      toValue: lastAngle.current,
+      duration: 250,
+    }).start();
+  };
+
   useEffect(() => {
     if (!visible) {
       fadeAnim.setValue(0);
@@ -74,17 +88,25 @@ function ImageViewer(props: ImageViewerProps) {
     return src;
   }, [src]);
 
-  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],
-    );
+  const PinchGestureHandlerChild = (url: string) => (
+    <PinchGestureHandler onGestureEvent={onPinchGestureEvent} onHandlerStateChange={onPinchHandlerStateChange}>
+      <Animated.View
+        style={[
+          {
+            transform: [
+              { scale },
+              { rotate: rotateAngle.interpolate({ inputRange: [0, 360], outputRange: ['0deg', '360deg'] }) },
+            ],
+          },
+          styles.imageContainer,
+        ]}
+      >
+        <Image style={styles.image} source={{ uri: url }} />
+      </Animated.View>
+    </PinchGestureHandler>
+  );
+
+  console.log('src', typeof src);
 
   return (
     <View style={{}}>
@@ -100,6 +122,15 @@ function ImageViewer(props: ImageViewerProps) {
         }}
       />
       <MaskLayer visible={visible} onDismiss={() => setVisible(false)} opacity={0.9}>
+        {typeof src === 'string' ? (
+          <View style={{ position: 'absolute', top: 50, right: 30 }}>
+            <TouchableOpacity onPress={onRotate}>
+              <Icon color="#fff" size={18} name="reload" />
+            </TouchableOpacity>
+          </View>
+        ) : (
+          <View />
+        )}
         <Animated.View style={[styles.content, { opacity: fadeAnim }]}>
           {Array.isArray(src) ? (
             <Swiper dataSource={src} height={200} autoplay={false} index={index} />
@@ -117,6 +148,16 @@ const styles = StyleSheet.create({
     marginTop: ImageMainHeight / 3 - 20,
     height: ImageMainHeight / 3 - 20,
   },
+  imageContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
 });
 
 export default ImageViewer;
diff --git a/packages/core/src/Modal/index.tsx b/packages/core/src/Modal/index.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';
-import { Animated, StyleSheet, LayoutChangeEvent, Dimensions, ViewStyle, LayoutAnimation } from 'react-native';
+import React, { useState, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, LayoutChangeEvent, Dimensions, ViewStyle } from 'react-native';
 import MaskLayer, { MaskLayerProps } from '../MaskLayer';
 
 let MainWidth = Dimensions.get('window').width;
@@ -23,9 +23,7 @@ const Modal = (props: ModalProps = {}) => {
   function onDismiss() {
     onClosed && onClosed();
   }
-
   function measureContainer(event: LayoutChangeEvent) {
-    LayoutAnimation.linear(); //加入该函数进行布局平滑过渡动画
     const { height, width } = event.nativeEvent.layout;
     if (!layoutHeight && isVertical) {
       setLayoutHeight(height);
@@ -35,7 +33,7 @@ const Modal = (props: ModalProps = {}) => {
     }
   }
 
-  useLayoutEffect(() => {
+  useMemo(() => {
     function getTransformSize() {
       if (placement === 'top') {
         return -layoutHeight;
@@ -110,7 +108,6 @@ const Modal = (props: ModalProps = {}) => {
       </Animated.View>
     </Animated.View>
   );
-
   return (
     <MaskLayer {...otherProps} visible={visible} onDismiss={onDismiss}>
       {child}

diff --git a/test-ci/src/__tests__/imageViewer.tsx b/test-ci/src/__tests__/imageViewer.tsx
diff --git a/website/src/pages/docs/phone-run/android-phone/README.md b/website/src/pages/docs/phone-run/android-phone/README.md
@@ -77,7 +77,22 @@ $ npx react-native run-android
 6. 输入你电脑的 `IP 地址和端口号`（譬如 10.0.1.1:8081）。`在 Mac 上`<!--rehype:style=color: red;background: #ffd2d2;-->，你可以在系统设置/网络里找查询你的 IP 地址。`在 Windows 上`<!--rehype:style=color: red;background: #ffd2d2;-->，打开命令提示符并输入`ipconfig`来查询你的 IP 地址。`在 Linux 上`<!--rehype:style=color: red;background: #ffd2d2;-->你可以在终端中输入`ifconfig`来查询你的 IP 地址。
 7. 回到`开发者菜单`<!--rehype:style=color: red;background: #ffd2d2;-->然后选择`Reload JS`。
 
-你现在可以从[开发者菜单](https://reactnative.cn/docs/debugging#accessing-the-in-app-developer-menu)启用实时重新加载。只要你的 JavaScript 代码发生更改，应用就会重新加载。
+你现在可以从开发者菜单启用实时重新加载。只要你的 JavaScript 代码发生更改，应用就会重新加载。
+## 开发模式弹出开发者菜单刷新应用
+
+命令行支持*打开开发者菜单*，和其它的一些操作
+
+- r - 重新加载应用
+- d - 打开开发者菜单
+- i - 在 iOS 上运行
+- a - 在 Android 上运行
+
+
+#### Android
+
+按两次 <kbd>R</kbd> 键或从开发者菜单(<kbd>⌘</kbd><kbd>M</kbd>)中选择重新加载(Reload)以预览您的更改。
+
+> 如果没有起作用可以在命令行使用 `adb shell input keyevent 82` 命令唤起**开发者菜单**
 
 ## 恭喜
 恭喜！ 你已经使用 React Native 构建了一个很棒的应用程序。
diff --git a/website/src/pages/docs/phone-run/ios-phone/README.md b/website/src/pages/docs/phone-run/ios-phone/README.md
@@ -59,6 +59,19 @@ iOS 真机运行
 
 打开`Report navigator`标签，选择最近的`Build`然后搜索`IP=`。搜索到的 `IP` 地址字符串应该和你电脑的 `IP` 地址一致。
 
+## 开发模式弹出开发者菜单刷新应用
+
+命令行支持*打开开发者菜单*，和其它的一些操作
+
+- r - 重新加载应用
+- d - 打开开发者菜单
+- i - 在 iOS 上运行
+- a - 在 Android 上运行
+
+#### iOS
+
+使用 <kbd>⌘</kbd><kbd>R</kbd> 让您的 IOS 模拟器重新加载本地项目，使用 <kbd>⌘</kbd><kbd>T</kbd> 弹出开发者菜单。
+
 ## 恭喜
 
 恭喜！您已经用 React Native 编译了一个伟大的 app