Skip to content

Commit cc695e7

Browse files
author
tingyuan
committed
chore
1 parent 5bb9ddc commit cc695e7

File tree

3 files changed

+128
-116
lines changed

3 files changed

+128
-116
lines changed

‎app.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"expo": {
33
"name": "Hotsou",
44
"slug": "hotsou",
5-
"version": "1.4.2",
5+
"version": "1.5.0",
66
"orientation": "portrait",
77
"icon": "./assets/images/icon.png",
88
"scheme": "hotsou",

‎components/WebView/InfoModal.tsx‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import * as Clipboard from 'expo-clipboard'
2+
import React from 'react'
3+
import {
4+
Linking,
5+
Modal,
6+
ScrollView,
7+
Share,
8+
StyleSheet,
9+
ToastAndroid,
10+
TouchableOpacity,
11+
View,
12+
} from 'react-native'
13+
14+
import { useColorScheme } from '@/hooks/useColorScheme'
15+
16+
// import { FloatingButton } from '../FloatingButton'
17+
import { ThemedButton } from '../ThemedButton'
18+
import { ThemedText } from '../ThemedText'
19+
import { ThemedView } from '../ThemedView'
20+
21+
export default function InfoModal(props: {
22+
visible: boolean
23+
title: string
24+
url: string
25+
closeModal: () => void
26+
}) {
27+
const colorScheme = useColorScheme()
28+
return (
29+
<Modal
30+
animationType="fade"
31+
transparent={true}
32+
visible={props.visible}
33+
statusBarTranslucent={true}
34+
onRequestClose={() => {
35+
props.closeModal()
36+
}}
37+
>
38+
<View style={styles.centeredView}>
39+
<ThemedView
40+
style={[styles.modalView, { shadowColor: colorScheme === 'dark' ? 'white' : 'black' }]}
41+
>
42+
<ThemedText style={{ fontWeight: 'bold', fontSize: 18 }} selectable>
43+
{props.title || '当前页面'}
44+
</ThemedText>
45+
<ScrollView style={{ maxHeight: 120 }}>
46+
<ThemedText selectable style={{ opacity: 0.7 }}>
47+
{props.url}
48+
</ThemedText>
49+
</ScrollView>
50+
51+
<View
52+
style={{
53+
flexDirection: 'row',
54+
gap: 10,
55+
marginTop: 20,
56+
justifyContent: 'flex-end',
57+
flexWrap: 'wrap',
58+
}}
59+
>
60+
<ThemedButton
61+
title="浏览器打开"
62+
onPress={() => {
63+
Linking.openURL(props.url)
64+
props.closeModal()
65+
}}
66+
/>
67+
<ThemedButton
68+
title="分享"
69+
type="primary"
70+
onPress={() => {
71+
Share.share({
72+
title: props.title,
73+
message: props.title + '\n' + props.url,
74+
url: props.url,
75+
})
76+
props.closeModal()
77+
}}
78+
/>
79+
<ThemedButton
80+
title="复制链接"
81+
type="secondary"
82+
onPress={() => {
83+
Clipboard.setStringAsync(props.url).then(() => {
84+
ToastAndroid.show('已复制', ToastAndroid.SHORT)
85+
})
86+
props.closeModal()
87+
}}
88+
/>
89+
</View>
90+
<TouchableOpacity
91+
onPress={props.closeModal}
92+
style={{ position: 'absolute', top: 10, right: 10, padding: 5 }}
93+
hitSlop={10}
94+
>
95+
<ThemedText style={{ fontSize: 20, color: '#999' }}>✕</ThemedText>
96+
</TouchableOpacity>
97+
</ThemedView>
98+
</View>
99+
</Modal>
100+
)
101+
}
102+
103+
const styles = StyleSheet.create({
104+
centeredView: {
105+
flex: 1,
106+
justifyContent: 'center',
107+
alignItems: 'center',
108+
backgroundColor: 'rgba(0,0,0,0.5)',
109+
},
110+
modalView: {
111+
margin: 20,
112+
borderRadius: 10,
113+
paddingVertical: 25,
114+
paddingHorizontal: 20,
115+
width: '80%',
116+
shadowOffset: {
117+
width: 0,
118+
height: 2,
119+
},
120+
shadowOpacity: 0.25,
121+
shadowRadius: 4,
122+
elevation: 5,
123+
flexDirection: 'column',
124+
gap: 20,
125+
},
126+
})

‎components/WebView/index.tsx‎

Lines changed: 1 addition & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,26 @@
11
import { useFocusEffect } from '@react-navigation/native'
2-
import * as Clipboard from 'expo-clipboard'
32
import React, { useCallback, useEffect } from 'react'
43
import {
54
ActivityIndicator,
65
BackHandler,
76
Image,
87
Linking,
9-
Modal,
108
Platform,
11-
ScrollView,
129
Share,
13-
StyleSheet,
1410
Text,
1511
ToastAndroid,
16-
TouchableOpacity,
1712
View,
1813
} from 'react-native'
1914
import { WebView as RNWebView } from 'react-native-webview'
2015

21-
import { useColorScheme } from '@/hooks/useColorScheme'
2216
import { useStore } from '@/store'
2317
import { getPageIcon } from '@/utils'
2418

25-
// import { FloatingButton } from '../FloatingButton'
2619
import { ThemedButton } from '../ThemedButton'
27-
import { ThemedText } from '../ThemedText'
2820
import { ThemedView } from '../ThemedView'
21+
import InfoModal from './InfoModal'
2922
import { beforeLoadedInject } from './inject'
3023

31-
function InfoModal(props: {
32-
visible: boolean
33-
title: string
34-
url: string
35-
closeModal: () => void
36-
}) {
37-
const colorScheme = useColorScheme()
38-
return (
39-
<Modal
40-
animationType="fade"
41-
transparent={true}
42-
visible={props.visible}
43-
statusBarTranslucent={true}
44-
onRequestClose={() => {
45-
props.closeModal()
46-
}}
47-
>
48-
<View style={styles.centeredView}>
49-
<ThemedView
50-
style={[styles.modalView, { shadowColor: colorScheme === 'dark' ? 'white' : 'black' }]}
51-
>
52-
<ThemedText style={{ fontWeight: 'bold', fontSize: 18 }} selectable>
53-
{props.title || '当前页面'}
54-
</ThemedText>
55-
<ScrollView style={{ maxHeight: 120 }}>
56-
<ThemedText selectable style={{ opacity: 0.7 }}>
57-
{props.url}
58-
</ThemedText>
59-
</ScrollView>
60-
61-
<View
62-
style={{
63-
flexDirection: 'row',
64-
gap: 10,
65-
marginTop: 20,
66-
justifyContent: 'flex-end',
67-
flexWrap: 'wrap',
68-
}}
69-
>
70-
<ThemedButton
71-
title="浏览器打开"
72-
onPress={() => {
73-
Linking.openURL(props.url)
74-
props.closeModal()
75-
}}
76-
/>
77-
<ThemedButton
78-
title="分享"
79-
type="primary"
80-
onPress={() => {
81-
Share.share({
82-
title: props.title,
83-
message: props.title + '\n' + props.url,
84-
url: props.url,
85-
})
86-
props.closeModal()
87-
}}
88-
/>
89-
<ThemedButton
90-
title="复制链接"
91-
type="secondary"
92-
onPress={() => {
93-
Clipboard.setStringAsync(props.url).then(() => {
94-
ToastAndroid.show('已复制', ToastAndroid.SHORT)
95-
})
96-
props.closeModal()
97-
}}
98-
/>
99-
</View>
100-
<TouchableOpacity
101-
onPress={props.closeModal}
102-
style={{ position: 'absolute', top: 10, right: 10, padding: 5 }}
103-
hitSlop={10}
104-
>
105-
<ThemedText style={{ fontSize: 20, color: '#999' }}>✕</ThemedText>
106-
</TouchableOpacity>
107-
</ThemedView>
108-
</View>
109-
</Modal>
110-
)
111-
}
112-
11324
export default function WebView(props: {
11425
name: string
11526
url: string
@@ -403,28 +314,3 @@ export default function WebView(props: {
403314
</>
404315
)
405316
}
406-
407-
const styles = StyleSheet.create({
408-
centeredView: {
409-
flex: 1,
410-
justifyContent: 'center',
411-
alignItems: 'center',
412-
backgroundColor: 'rgba(0,0,0,0.5)',
413-
},
414-
modalView: {
415-
margin: 20,
416-
borderRadius: 10,
417-
paddingVertical: 25,
418-
paddingHorizontal: 20,
419-
width: '80%',
420-
shadowOffset: {
421-
width: 0,
422-
height: 2,
423-
},
424-
shadowOpacity: 0.25,
425-
shadowRadius: 4,
426-
elevation: 5,
427-
flexDirection: 'column',
428-
gap: 20,
429-
},
430-
})

0 commit comments

Comments
 (0)