Skip to content

Commit 37849b1

Browse files
bozaigaobozaigao
authored
add expoUsePushy demo (#495)
* add expoUsePushy demo * update
1 parent c771672 commit 37849b1

File tree

16 files changed

+6182
-0
lines changed

16 files changed

+6182
-0
lines changed

‎Example/expoUsePushy/.gitignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
expo-env.d.ts
11+
12+
# Native
13+
*.orig.*
14+
*.jks
15+
*.p8
16+
*.p12
17+
*.key
18+
*.mobileprovision
19+
20+
# Metro
21+
.metro-health-check*
22+
23+
# debug
24+
npm-debug.*
25+
yarn-debug.*
26+
yarn-error.*
27+
28+
# macOS
29+
.DS_Store
30+
*.pem
31+
32+
# local env files
33+
.env*.local
34+
35+
# typescript
36+
*.tsbuildinfo

‎Example/expoUsePushy/App.tsx‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
/* eslint-disable react/no-unstable-nested-components */
2+
/* eslint-disable react-native/no-inline-styles */
3+
import React, {useState} from 'react';
4+
import {StyleSheet, Text, View, TouchableOpacity, Image} from 'react-native';
5+
6+
import TestConsole from './TestConsole';
7+
8+
import _updateConfig from './update.json';
9+
import {PushyProvider, Pushy, usePushy} from 'react-native-update';
10+
const {appKey} = _updateConfig.android;
11+
12+
function Home() {
13+
const {
14+
client,
15+
checkUpdate,
16+
downloadUpdate,
17+
switchVersionLater,
18+
switchVersion,
19+
updateInfo,
20+
packageVersion,
21+
currentHash,
22+
progress: {received, total} = {},
23+
} = usePushy();
24+
const [useDefaultAlert, setUseDefaultAlert] = useState(false);
25+
const [showTestConsole, setShowTestConsole] = useState(false);
26+
const [showUpdateBanner, setShowUpdateBanner] = useState(false);
27+
const [showUpdateSnackbar, setShowUpdateSnackbar] = useState(false);
28+
// if (updateInfo) {
29+
// updateInfo!.name = 'name';
30+
// updateInfo!.update = true;
31+
// }
32+
const snackbarVisible =
33+
!useDefaultAlert && showUpdateSnackbar && updateInfo?.update;
34+
35+
if (showTestConsole) {
36+
return (
37+
<TestConsole visible={true} onClose={() => setShowTestConsole(false)} />
38+
);
39+
}
40+
41+
return (
42+
<View style={styles.container}>
43+
<Text style={styles.welcome}>欢迎使用Pushy热更新服务</Text>
44+
{/* <Text style={styles.welcome}>😁hdiffFromAPP更新成功！！！</Text> */}
45+
{/* <Text style={styles.welcome}>😁hdiffFromPPk更新成功！！！</Text> */}
46+
<View style={{flexDirection: 'row'}}>
47+
<TouchableOpacity
48+
onPress={() => {
49+
client?.setOptions({
50+
updateStrategy: !useDefaultAlert ? null : 'alwaysAlert',
51+
});
52+
setShowUpdateSnackbar(useDefaultAlert);
53+
setUseDefaultAlert(!useDefaultAlert);
54+
}}
55+
style={{
56+
flexDirection: 'row',
57+
alignItems: 'center',
58+
}}>
59+
<View
60+
style={{
61+
width: 20,
62+
height: 20,
63+
borderWidth: 1,
64+
borderColor: '#999',
65+
backgroundColor: useDefaultAlert ? 'blue' : 'white',
66+
justifyContent: 'center',
67+
alignItems: 'center',
68+
}}>
69+
{useDefaultAlert && <Text style={{color: 'white'}}>✓</Text>}
70+
</View>
71+
<Text style={{marginLeft: 8}}>
72+
{' '}
73+
{useDefaultAlert ? '当前使用' : '当前不使用'}默认的alert更新提示
74+
</Text>
75+
</TouchableOpacity>
76+
</View>
77+
<Image
78+
resizeMode={'contain'}
79+
source={require('./assets/shezhi.png')}
80+
style={styles.image}
81+
/>
82+
<Text style={styles.instructions}>
83+
这是版本一 {'\n'}
84+
当前原生包版本号: {packageVersion}
85+
{'\n'}
86+
当前热更新版本Hash: {currentHash || '(空)'}
87+
{'\n'}
88+
</Text>
89+
<Text>
90+
下载进度：{received} / {total}
91+
</Text>
92+
<TouchableOpacity
93+
onPress={() => {
94+
checkUpdate();
95+
setShowUpdateSnackbar(true);
96+
}}>
97+
<Text style={styles.instructions}>点击这里检查更新</Text>
98+
</TouchableOpacity>
99+
100+
<TouchableOpacity
101+
testID="testcase"
102+
style={{marginTop: 15}}
103+
onPress={() => {
104+
setShowTestConsole(true);
105+
}}>
106+
<Text style={styles.instructions}>
107+
react-native-update版本：{client?.version}
108+
</Text>
109+
</TouchableOpacity>
110+
{snackbarVisible && (
111+
<View style={styles.overlay}>
112+
<View
113+
style={{
114+
width: '100%',
115+
backgroundColor: '#333',
116+
padding: 16,
117+
flexDirection: 'row',
118+
justifyContent: 'space-between',
119+
alignItems: 'center',
120+
}}>
121+
<Text style={{color: 'white'}}>
122+
有新版本({updateInfo.name})可用，是否更新？
123+
</Text>
124+
<View style={{flexDirection: 'row'}}>
125+
<TouchableOpacity
126+
onPress={() => setShowUpdateSnackbar(false)}
127+
style={{marginRight: 10}}>
128+
<Text style={{color: 'white'}}>取消</Text>
129+
</TouchableOpacity>
130+
<TouchableOpacity
131+
onPress={async () => {
132+
setShowUpdateSnackbar(false);
133+
await downloadUpdate();
134+
setShowUpdateBanner(true);
135+
}}>
136+
<Text style={{color: '#2196F3'}}>更新</Text>
137+
</TouchableOpacity>
138+
</View>
139+
</View>
140+
</View>
141+
)}
142+
{showUpdateBanner && (
143+
<View style={styles.overlay}>
144+
<View
145+
style={{
146+
width: '100%',
147+
backgroundColor: '#fff',
148+
padding: 16,
149+
borderBottomWidth: 1,
150+
borderBottomColor: '#eee',
151+
}}>
152+
<View style={{flexDirection: 'row', alignItems: 'center'}}>
153+
<Text>更新已完成，是否立即重启？</Text>
154+
</View>
155+
<View
156+
style={{
157+
flexDirection: 'row',
158+
justifyContent: 'flex-end',
159+
marginTop: 10,
160+
}}>
161+
<TouchableOpacity
162+
onPress={() => {
163+
switchVersionLater();
164+
setShowUpdateBanner(false);
165+
}}
166+
style={{marginRight: 20}}>
167+
<Text style={{color: '#2196F3'}}>下次再说</Text>
168+
</TouchableOpacity>
169+
<TouchableOpacity onPress={switchVersion}>
170+
<Text style={{color: '#2196F3'}}>立即重启</Text>
171+
</TouchableOpacity>
172+
</View>
173+
</View>
174+
</View>
175+
)}
176+
</View>
177+
);
178+
}
179+
180+
const styles = StyleSheet.create({
181+
overlay: {
182+
position: 'absolute',
183+
top: 0,
184+
left: 0,
185+
right: 0,
186+
bottom: 0,
187+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
188+
justifyContent: 'center',
189+
alignItems: 'center',
190+
},
191+
container: {
192+
flex: 1,
193+
justifyContent: 'center',
194+
alignItems: 'center',
195+
backgroundColor: '#F5FCFF',
196+
},
197+
welcome: {
198+
fontSize: 20,
199+
textAlign: 'center',
200+
margin: 10,
201+
},
202+
instructions: {
203+
textAlign: 'center',
204+
color: '#333333',
205+
marginBottom: 5,
206+
},
207+
image: {},
208+
});
209+
210+
const pushyClient = new Pushy({
211+
appKey,
212+
debug: true,
213+
});
214+
215+
export default function HomeScreen() {
216+
return (
217+
<PushyProvider client={pushyClient}>
218+
<Home />
219+
</PushyProvider>
220+
);
221+
}

0 commit comments

Comments
 (0)