React-Native开发鸿蒙NEXT-本地与沙盒加载bundle

来晚了来晚了，不是想偷懒，实在是一个图片问题没搞定导致效果出不来，今天刚靠工具查出了原因。

RN的加载无非本地加载与沙盒加载两种方式。之所以用RN开发，想节省一点原生的开发人力是一方面，另一方面肯定绕不过希望借助bundle天生的可下载优势，来搞个远程更新。通过下载bundle到沙盒环境再加载，达到近似于热更新的效果。对于加载了n个bundle的应用来说这点尤为重要，毕竟不能因为某个bundle的更新就让用户去频繁更新app。

应用之前的加载方式是本地加载，bundle和图片资源都放在了代码的资源文件下。先来看看如何通过沙盒加载。artTS中，加载沙盒bundle和加载本地bundle可以分别调用不同api来实现。

沙盒，利用FileJSBundleProvider加载

ArkTS 复制代码

provider = new FileJSBundleProvider(bundle.bundlePath);

本地，利用ResourceJSBundleProvider加载

ArkTS 复制代码

provider = new ResourceJSBundleProvider(rnohCoreContext.uiAbilityContext.resourceManager, bundle.bundlePath);

下一步来看看如何把资源从远程服务器下载到沙盒。在RN中，可以使用react-native-fs+eact-native-zip-archive来实现下载与解压缩。两个依赖的安装可以参考官方文档简单给个示例，只是展示下载与解压缩，实际应用还得考虑断点续传等细节。

typescript 复制代码

// 下载并解压缩
const download = async (downloadUrl = '远程下载地址.zip', unzipPath = '') =>{
    try {
        // 下载
        const zipPath = `${RNFS.DocumentDirectoryPath}/harmony.zip`;
        console.log('zipPath' + zipPath);
        const downloadResult = await RNFS.downloadFile({
          fromUrl: downloadUrl,
          toFile: zipPath,
          progress: (res) => {
            console.log(`下载进度: ${Math.floor((res.bytesWritten / res.contentLength) * 100)}%`);
          }
        }).promise;
    
        if (downloadResult.statusCode !== 200) {
            console.log('下载失败');
          throw new Error('下载失败');
        }
    
        // 解压缩
        const targetDir = `${RNFS.DocumentDirectoryPath}/metro`;
        await unzip(zipPath, targetDir);
        console.log('解压完成，路径:', targetDir);
    
        return targetDir;
      } catch (error) {
        console.error('流程失败:', error.message);
        return null;
      }
}

加载的bundle，是一个简单的demo页面，仅仅把demo的header组件改成了一张自定义的图片。

typescript 复制代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */
import React, {useEffect} from 'react';
import type {PropsWithChildren} from 'react';
import SplashScreen from 'react-native-splash-screen';
import versionUtil from './versionUtil';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Image,
} from 'react-native';
import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
const Tab = createBottomTabNavigator();
type SectionProps = PropsWithChildren<{
  title: string;
}>;
function Section({children, title}: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  /**
   * 模拟componentDidMount，即只运行一次该函数
   */
  useEffect(() => {
    SplashScreen.hide();
    versionUtil
      .download()
      .then(result => {
        console.log('下载成功，路径:', result);
      })
      .catch(error => {});
    return () => {};
  }, []);
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}
function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        {/* <Header /> */}
        {/* 换成一张自定义图片 */}
        <Image style={{width: '100%', height: 200}} source={require('./assets/banner.png')}/>
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});
export default App;