Skip to content

Commit 822602a

Browse files
bozaigaobozaigao
authored
react-native-pushy适配harmony (#461)
* init * update * udpate * update * update * update * add pushy build time logic
1 parent 1ad0926 commit 822602a

File tree

151 files changed

+25412
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

151 files changed

+25412
-3
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,4 @@ Example/testHotUpdate/.yarn
5050
android/bin
5151
Example/testHotUpdate/harmony
5252
Example/testHotUpdate/android/app/.cxx
53+
Example/harmony_use_pushy/libs

‎.gitmodules‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,9 @@
44
[submodule "android/jni/HDiffPatch"]
55
path = android/jni/HDiffPatch
66
url = https://github.com/sisong/HDiffPatch.git
7+
[submodule "harmony/src/main/cpp/HDiffPatch"]
8+
path = harmony/src/main/cpp/HDiffPatch
9+
url = https://github.com/sisong/HDiffPatch.git
10+
[submodule "harmony/src/main/cpp/lzma"]
11+
path = harmony/src/main/cpp/lzma
12+
url = https://github.com/sisong/lzma.git

‎Example/harmony_use_pushy/.bundle/config‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
BUNDLE_PATH: "vendor/bundle"
2+
BUNDLE_FORCE_RUBY_PLATFORM: 1

‎Example/harmony_use_pushy/.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native',
4+
};

‎Example/harmony_use_pushy/.prettierrc.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
arrowParens: 'avoid',
3+
bracketSameLine: true,
4+
bracketSpacing: false,
5+
singleQuote: true,
6+
trailingComma: 'all',
7+
};

‎Example/harmony_use_pushy/.watchmanconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎Example/harmony_use_pushy/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.harmony;
11+
12+
function App() {
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 Root() {
216+
return (
217+
<PushyProvider client={pushyClient}>
218+
<App />
219+
</PushyProvider>
220+
);
221+
}

‎Example/harmony_use_pushy/Gemfile‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
source 'https://rubygems.org'
2+
3+
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4+
ruby ">= 2.6.10"
5+
6+
gem 'cocoapods', '~> 1.12'

‎Example/harmony_use_pushy/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
## 运行harmony_use_pushy项目步骤
2+
3+
### 1.将项目克隆到本地后在项目根目录创建libs文件夹。
4+
5+
### 2.然后将[`rnoh`](https://github.com/bozaigao/rnoh)克隆到libs文件夹中。
6+
7+
说明：rnoh项目基于react-native 0.72.5版本适配，如果使用最新的RN版本可能会报错，项目适配RN新版本请关注[`gitee仓库`](https://gitee.com/openharmony-sig/ohos_react_native/tree/0.72.5-ohos-5.0-release/tester/harmony/react_native_openharmony/src/main)
8+
9+
### 3.进入rnoh项目执行下面命令对rnoh项目依赖的C++库进行初始化；
10+
```
11+
git submodule update --init --recursive
12+
```
13+
14+
### 4. 确保在react-native-update根目录已经执行过yarn submodule命令。
15+
说明：这个命令会在harmony/src/main/cpp目录生成HDiffPatch和lzma的C++模块依赖。
16+
17+
### 5. 在项目根目录执行下面命令安装第三方依赖。
18+
```
19+
yarn install
20+
```
21+
22+
### 6. 在项目根目录执行下面命令生成bundle包文件。
23+
```
24+
yarn build
25+
```
26+
说明：这个命令会在harmony/entry/src/main/resources/rawfile目录生成Hbundle.harmony.js和assets文件，同时会基于该内容在.pushy/output目录生成ppk包。
27+
28+
**注意⚠️**：在使用pushy bundle --platform harmony命令进行打包的默认bundle包名是Hbundle.harmony.js，不要随意修改包名，因为diff是匹配该包名进行生成的。
29+
30+
### 7. 使用DevEco Studio IDE打开harmony目录然后执行sync运行项目
31+
![image](./sync.png)
32+
33+
### 8 运行效果图
34+
![image](./demo.png)

0 commit comments

Comments
 (0)