Skip to content

Commit 60f3b63

Browse files
ChenlingasMxChenlingasMx
committed
Merge branch 'dev'
2 parents d1af48c + a03d956 commit 60f3b63

File tree

6 files changed

+85
-37
lines changed

6 files changed

+85
-37
lines changed

‎example/examples/src/routes/DatePicker/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export default class BadgeView extends React.Component<BadgeViewProps> {
3030
onOk={() => this.setState({visible: false})}
3131
onClosed={() => this.setState({visible: false})}
3232
precision="second"
33-
max="2021-11-30 23:50:50"
3433
/>
3534
</Body>
3635
<Footer />

‎packages/core/src/ImageViewer/index.tsx

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { useState, useMemo, useRef, useEffect } from 'react';
2-
import { StyleSheet, ViewProps, Dimensions, View, Image, Animated } from 'react-native';
2+
import { StyleSheet, ViewProps, Dimensions, View, Image, Animated, Text, TouchableOpacity } from 'react-native';
33
import TransitionImage from '../TransitionImage';
44
import MaskLayer from '../MaskLayer';
55
import Swiper from '../Swiper';
6+
import Icon from '../Icon';
67
import { ActivityIndicator } from 'react-native';
78
export let ImageMainWidth = Dimensions.get('window').width;
89
export let ImageMainHeight = Dimensions.get('window').height;
@@ -19,6 +20,7 @@ export interface ImageViewerDataSourceProps {
1920
url: string;
2021
[key: string]: any;
2122
}
23+
2224
export interface ImageViewerProps extends ViewProps {
2325
/** 图片宽度 */
2426
width?: number;
@@ -40,6 +42,9 @@ function ImageViewer(props: ImageViewerProps) {
4042
const scale = useRef(new Animated.Value(1)).current; // 初始缩放比例为 1
4143
const lastScale = useRef(1); // 上一次的缩放比例
4244

45+
const rotateAngle = useRef(new Animated.Value(0)).current; // 初始化旋转角度为 0
46+
const lastAngle = useRef(0); // 保存上次的旋转角度
47+
4348
const onPinchGestureEvent = (event: PinchGestureHandlerGestureEvent) => {
4449
if (event.nativeEvent.scale) {
4550
// 更新缩放比例
@@ -55,6 +60,15 @@ function ImageViewer(props: ImageViewerProps) {
5560
}
5661
};
5762

63+
const onRotate = () => {
64+
lastAngle.current += 90; // 旋转 90 度
65+
Animated.timing(rotateAngle, {
66+
useNativeDriver: true,
67+
toValue: lastAngle.current,
68+
duration: 250,
69+
}).start();
70+
};
71+
5872
useEffect(() => {
5973
if (!visible) {
6074
fadeAnim.setValue(0);
@@ -74,17 +88,25 @@ function ImageViewer(props: ImageViewerProps) {
7488
return src;
7589
}, [src]);
7690

77-
const PinchGestureHandlerChild = (url: string) =>
78-
useMemo(
79-
() => (
80-
<PinchGestureHandler onGestureEvent={onPinchGestureEvent} onHandlerStateChange={onPinchHandlerStateChange}>
81-
<Animated.View style={[{ transform: [{ scale }] }]}>
82-
<Image style={{ width: '100%', height: '100%', resizeMode: 'contain' }} source={{ uri: url }} />
83-
</Animated.View>
84-
</PinchGestureHandler>
85-
),
86-
[src, scale],
87-
);
91+
const PinchGestureHandlerChild = (url: string) => (
92+
<PinchGestureHandler onGestureEvent={onPinchGestureEvent} onHandlerStateChange={onPinchHandlerStateChange}>
93+
<Animated.View
94+
style={[
95+
{
96+
transform: [
97+
{ scale },
98+
{ rotate: rotateAngle.interpolate({ inputRange: [0, 360], outputRange: ['0deg', '360deg'] }) },
99+
],
100+
},
101+
styles.imageContainer,
102+
]}
103+
>
104+
<Image style={styles.image} source={{ uri: url }} />
105+
</Animated.View>
106+
</PinchGestureHandler>
107+
);
108+
109+
console.log('src', typeof src);
88110

89111
return (
90112
<View style={{}}>
@@ -100,6 +122,15 @@ function ImageViewer(props: ImageViewerProps) {
100122
}}
101123
/>
102124
<MaskLayer visible={visible} onDismiss={() => setVisible(false)} opacity={0.9}>
125+
{typeof src === 'string' ? (
126+
<View style={{ position: 'absolute', top: 50, right: 30 }}>
127+
<TouchableOpacity onPress={onRotate}>
128+
<Icon color="#fff" size={18} name="reload" />
129+
</TouchableOpacity>
130+
</View>
131+
) : (
132+
<View />
133+
)}
103134
<Animated.View style={[styles.content, { opacity: fadeAnim }]}>
104135
{Array.isArray(src) ? (
105136
<Swiper dataSource={src} height={200} autoplay={false} index={index} />
@@ -117,6 +148,16 @@ const styles = StyleSheet.create({
117148
marginTop: ImageMainHeight / 3 - 20,
118149
height: ImageMainHeight / 3 - 20,
119150
},
151+
imageContainer: {
152+
flex: 1,
153+
justifyContent: 'center',
154+
alignItems: 'center',
155+
},
156+
image: {
157+
width: '100%',
158+
height: '100%',
159+
resizeMode: 'contain',
160+
},
120161
});
121162

122163
export default ImageViewer;

‎packages/core/src/Modal/index.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';
2-
import { Animated, StyleSheet, LayoutChangeEvent, Dimensions, ViewStyle, LayoutAnimation } from 'react-native';
1+
import React, { useState, useMemo, useRef } from 'react';
2+
import { Animated, StyleSheet, LayoutChangeEvent, Dimensions, ViewStyle } from 'react-native';
33
import MaskLayer, { MaskLayerProps } from '../MaskLayer';
44

55
let MainWidth = Dimensions.get('window').width;
@@ -23,9 +23,7 @@ const Modal = (props: ModalProps = {}) => {
2323
function onDismiss() {
2424
onClosed && onClosed();
2525
}
26-
2726
function measureContainer(event: LayoutChangeEvent) {
28-
LayoutAnimation.linear(); //加入该函数进行布局平滑过渡动画
2927
const { height, width } = event.nativeEvent.layout;
3028
if (!layoutHeight && isVertical) {
3129
setLayoutHeight(height);
@@ -35,7 +33,7 @@ const Modal = (props: ModalProps = {}) => {
3533
}
3634
}
3735

38-
useLayoutEffect(() => {
36+
useMemo(() => {
3937
function getTransformSize() {
4038
if (placement === 'top') {
4139
return -layoutHeight;
@@ -110,7 +108,6 @@ const Modal = (props: ModalProps = {}) => {
110108
</Animated.View>
111109
</Animated.View>
112110
);
113-
114111
return (
115112
<MaskLayer {...otherProps} visible={visible} onDismiss={onDismiss}>
116113
{child}

‎test-ci/src/__tests__/imageViewer.tsx

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎website/src/pages/docs/phone-run/android-phone/README.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,22 @@ $ npx react-native run-android
7777
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 地址。
7878
7. 回到`开发者菜单`<!--rehype:style=color: red;background: #ffd2d2;-->然后选择`Reload JS`。
7979

80-
你现在可以从[开发者菜单](https://reactnative.cn/docs/debugging#accessing-the-in-app-developer-menu)启用实时重新加载。只要你的 JavaScript 代码发生更改，应用就会重新加载。
80+
你现在可以从开发者菜单启用实时重新加载。只要你的 JavaScript 代码发生更改，应用就会重新加载。
81+
## 开发模式弹出开发者菜单刷新应用
82+
83+
命令行支持*打开开发者菜单*，和其它的一些操作
84+
85+
- r - 重新加载应用
86+
- d - 打开开发者菜单
87+
- i - 在 iOS 上运行
88+
- a - 在 Android 上运行
89+
90+
91+
#### Android
92+
93+
按两次 <kbd>R</kbd> 键或从开发者菜单(<kbd>⌘</kbd><kbd>M</kbd>)中选择重新加载(Reload)以预览您的更改。
94+
95+
> 如果没有起作用可以在命令行使用 `adb shell input keyevent 82` 命令唤起**开发者菜单**
8196
8297
## 恭喜
8398
恭喜！ 你已经使用 React Native 构建了一个很棒的应用程序。

‎website/src/pages/docs/phone-run/ios-phone/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,19 @@ iOS 真机运行
5959

6060
打开`Report navigator`标签，选择最近的`Build`然后搜索`IP=`。搜索到的 `IP` 地址字符串应该和你电脑的 `IP` 地址一致。
6161

62+
## 开发模式弹出开发者菜单刷新应用
63+
64+
命令行支持*打开开发者菜单*，和其它的一些操作
65+
66+
- r - 重新加载应用
67+
- d - 打开开发者菜单
68+
- i - 在 iOS 上运行
69+
- a - 在 Android 上运行
70+
71+
#### iOS
72+
73+
使用 <kbd>⌘</kbd><kbd>R</kbd> 让您的 IOS 模拟器重新加载本地项目，使用 <kbd>⌘</kbd><kbd>T</kbd> 弹出开发者菜单。
74+
6275
## 恭喜
6376

6477
恭喜！您已经用 React Native 编译了一个伟大的 app

0 commit comments

Comments
 (0)