首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Android上的React Native中包含和读取源映射文件

在Android上的React Native中包含和读取源映射文件,可以通过以下步骤实现:

  1. 首先,确保你的React Native项目已经配置了源映射文件。源映射文件(source map)是一种用于将压缩后的代码映射回原始源代码的文件。它通常与压缩后的JavaScript文件一起生成。
  2. 在React Native项目的根目录下,找到android/app/build.gradle文件,并在android闭包内添加以下代码:
代码语言:txt
复制
project.ext.react = [
    entryFile: "index.js",
    bundleAssetName: "index.android.bundle",
    bundleInDebug: true, // 设置为true以在调试模式下包含源映射文件
    devDisabledInDebug: false, // 设置为false以在调试模式下启用开发者菜单
]

// 添加以下代码
def enableSeparateBuildPerCPUArchitecture = false

def enableProguardInReleaseBuilds = true

// ...

// 添加以下代码
project.ext.react = [
    bundleAssetName: "index.android.bundle",
    bundleInDebug: true,
    bundleInRelease: true,
    devDisabledInDebug: false,
    devDisabledInRelease: true, // 设置为true以在发布模式下禁用开发者菜单
    enableHermes: false, // 如果使用Hermes引擎,请将其设置为true
    enableSeparateBuildPerCPUArchitecture: enableSeparateBuildPerCPUArchitecture,
    hermesCommand: "../../node_modules/hermes-engine/%OS-BIN%/hermesc", // 如果使用Hermes引擎,请根据操作系统设置正确的路径
    jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
    jsBundleDirRelease: "$buildDir/intermediates/assets/release",
    jsBundleFile: "$buildDir/intermediates/assets/debug/index.android.bundle",
    jsBundleLoader: "com.facebook.react.bridge.JSBundleLoader$FileLoader",
    jsMainModuleName: "index",
    optimizeEnabled: enableProguardInReleaseBuilds,
    packageEncoding: "utf-8",
    packageObfuscationEnabled: enableProguardInReleaseBuilds,
    resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
    resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
    shrinkResources: enableProguardInReleaseBuilds,
    souceMapFile: "$buildDir/intermediates/assets/debug/index.android.bundle.map", // 设置源映射文件的路径
]
  1. 然后,在React Native项目的根目录下,找到android/app/src/main/java/com/[your-app-namespace]/MainApplication.java文件,并添加以下代码:
代码语言:txt
复制
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

// 添加以下代码
import com.facebook.react.modules.debug.SourceMapLoader;
import com.facebook.react.modules.debug.Systrace;
import com.facebook.react.modules.debug.interfaces.DeveloperSettings;
import com.facebook.react.modules.debug.interfaces.PackagerStatusCallback;
import com.facebook.react.packagerconnection.RequestHandler;
import com.facebook.react.packagerconnection.RequestHandlerRegistry;
import com.facebook.react.packagerconnection.Responder;
import com.facebook.react.shell.MainPackageConfig;
import com.facebook.react.shell.MainPackageConfig.AppBundleSupplier;
import com.facebook.react.shell.MainPackageConfig.Builder;
import com.facebook.react.shell.MainPackageConfig.Params;
import com.facebook.react.shell.MainPackageConfigProvider;
import com.facebook.react.shell.PackageConfig;
import com.facebook.react.shell.PackageConfigProvider;
import com.facebook.react.shell.PackageList;
import com.facebook.react.shell.ReactPackageLogger;
import com.facebook.react.shell.ReactPackageRegistry;
import com.facebook.react.shell.ReactPackageRegistry.Builder;
import com.facebook.react.shell.ReactPackageRegistryProvider;
import com.facebook.react.shell.ReactPackagesProvider;
import com.facebook.react.shell.ShellReactPackage;

import java.io.File;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {
    // ...

    // 添加以下代码
    private static final String SOURCE_MAP_FILE_NAME = "index.android.bundle.map"; // 源映射文件的文件名

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // ...

        // 添加以下代码
        if (BuildConfig.DEBUG) {
            enableSourceMaps();
        }
    }

    private void enableSourceMaps() {
        try {
            String sourceMapFilePath = getFilesDir().getAbsolutePath() + File.separator + SOURCE_MAP_FILE_NAME;
            File sourceMapFile = new File(sourceMapFilePath);
            if (sourceMapFile.exists()) {
                ReactInstanceManager reactInstanceManager = getReactNativeHost().getReactInstanceManager();
                DeveloperSettings devSettings = reactInstanceManager.getDevSupportManager().getDevSettings();
                devSettings.setBundleDeltasEnabled(false);
                devSettings.setBundleSourceMapPath(sourceMapFilePath);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    // ...
}
  1. 最后,在React Native项目的根目录下,运行以下命令重新构建Android应用:
代码语言:txt
复制
cd android
./gradlew clean
./gradlew assembleDebug

这样,Android上的React Native应用就可以包含和读取源映射文件了。源映射文件对于调试和错误追踪非常有用,它可以将压缩后的代码映射回原始源代码,方便开发者定位和修复bug。

推荐的腾讯云相关产品:腾讯云移动应用托管(Mobile Application Hosting),详情请参考腾讯云移动应用托管产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ReactJS到React-Native,架构原理概述

这些React-Native组件映射到渲染到App真正原生iOSAndroid UI组件,意味着你不能重用之前使用ReactJS渲染HTML, SVG或Canvas任何库。...因为 React Native 底层为 React 框架,所以如果是 UI 层变更,那么就映射为虚拟 DOM 后进行 diff 算法,diff 算法计算出变动后 JSON 映射文件,最终由 Native...层将此 JSON 文件映射渲染到原生 App 页面元素,最终实现了在项目中只需要控制 state 以及 props 变更来引起 iOS 与 Android 平台 UI 变更。...为了给React-Native组件加上样式,你需要在JavaScript添加样式表。React 宿主平台之间桥接包含了一个缩减版CSS 子集实现。...通过这些function可以得到原生事件手势状态信息,所有的touch、位置以及滑动距离,速度触摸中心等。导航React-Native提供Navigator组件。

5.3K10

ReactJS到React-Native,架构原理概述

这些React-Native组件映射到渲染到App真正原生iOSAndroid UI组件,意味着你不能重用之前使用ReactJS渲染HTML, SVG或Canvas任何库。...因为 React Native 底层为 React 框架,所以如果是 UI 层变更,那么就映射为虚拟 DOM 后进行 diff 算法,diff 算法计算出变动后 JSON 映射文件,最终由 Native...层将此 JSON 文件映射渲染到原生 App 页面元素,最终实现了在项目中只需要控制 state 以及 props 变更来引起 iOS 与 Android 平台 UI 变更。...为了给React-Native组件加上样式,你需要在JavaScript添加样式表。React 宿主平台之间桥接包含了一个缩减版CSS 子集实现。...通过这些function可以得到原生事件手势状态信息,所有的touch、位置以及滑动距离,速度触摸中心等。导航React-Native提供Navigator组件。

5.6K10

扩大Android攻击面:React Native Android应用程序分析

React Native是一款移动端应用程序框架,由于该框架允许开发人员使用React原生平台功能,目前有很多AndroidiOS应用程序都是基于该框架进行开发。...在这个文件,找到一个名为“index.android.bundle”文件,这个文件包含所有的React JavaScript代码。...映射文件 如果你能找到一个名叫“index.android.bundle.map”文件,你就可以直接分析源代码了。map文件包含了源码映射关系,可以帮助我们映射出代码识别符。...如果你要逆向分析React Native应用程序assets文件拥有这个映射文件,你就可以在该目录创建一个名为“index.html”文件来利用这个映射文件了,“index.html”文件内容如下...接下来,打开开发者工具栏,点击“Source”标签,你就可以查看到映射JavaScript文件了: 敏感凭证与节点 React Native应用程序其中一种模式是它需要使用一种第三方数据库,例如Firebase

9.7K30

React Native 混合开发(iOS篇)

React Native混合开发教程我们分为上下两篇,上篇主要介绍如何在现有的Android应用上进行React Native混合开发,下篇主要介绍如何在现有的iOS应用上进行React Native...创建一个React Native项目 在做混合开发之前我们首先需要创建一个没有AndroidiOS模块React Native项目。...@16.3.1: npm install --save react@16.3.1 至此,一个不含AndroidiOS模块React Native项目便创建好了。...react-native init RNHybrid 上述命令会初始化一个完成名为RNHybridiOSReact Native项目,然后我们将里面的androidios目录删除,替换成已存在Android...将js bundle包图片资源导入到iOS项目中 这一步我们需要用到XCode,选择assets文件夹与main.jsbundle文件将其拖拽到XCode项目导航面板即可。 ?

8.2K50

React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南

initialLayout : 包含初始高度宽度可选对象可以被传递以防止react-native-tab-view呈现一个帧延迟; tabBarOptions: 配置TaBar下文会详细讲解;...paths: 提供routeName到path config映射,它覆盖routeConfigs设置路径。 backBehavior: 后退按钮是否会导致标签切换到初始tab?...ripple(仅支持 Android >= 5.0; pressOpacity -按下标签时不透明度(支持 iOS Android < 5.0); scrollEnabled -是否支持 选项卡滚动...大家在学习使用React Navigation3x过程遇到任何问题都可以在React Navigation3x视频教程寻找答案哈。...另外,也可以通过最新版React Native+Redux打造高质量上线App视频教程学习React Navigation开发更多实战经验技巧,以及优化思路。

12.6K20

新版React Native 混合开发(iOS篇)

React Native混合开发教程我们分为上下两篇,上篇主要介绍如何在现有的Android应用上进行React Native混合开发,下篇主要介绍如何在现有的iOS应用上进行React Native...创建一个React Native项目 在做混合开发之前我们首先需要创建一个没有AndroidiOS模块React Native项目。...npm install --save react 至此,一个不含AndroidiOS模块React Native项目便创建好了。...react-native init RNHybrid 上述命令会初始化一个完成名为RNHybridiOSReact Native项目,然后我们将里面的androidios目录删除,替换成已存在Android...将js bundle包图片资源导入到iOS项目中 这一步我们需要用到XCode,选择assets文件夹与main.jsbundle文件将其拖拽到XCode项目导航面板即可。 ?

5.6K20

React Native构建启动屏

在这个教程,我们将演示如何在React Native构建一个启动屏幕。我们将指导你如何使用 react-native-splash-screen 为iOSAndroid应用构建出色欢迎界面。...勾选 iOS Android,然后点击生成: 接下来,解压下载文件,并将 iOS Android 文件夹复制到你克隆启动项目的 assets 目录 assets 文件夹里: 在React...将内容模式设置为“aspect fit”,如下所示: 更改iOS启动屏幕颜色 你可能会问下一个问题是“我如何在 React Native 更改启动屏幕背景颜色?”...这两个文件包含了我们为不同手机密度提供启动画面图片。...请参考下面的截图: 构建一个Expo启动屏幕 到目前为止,我们已经探讨了如何在一个裸 React Native 应用构建启动屏幕。

33910

最火移动端跨平台方案盘点:React Native、weex、Flutter

JS端通过这个 key 组合 Dom ,最后Native端会解析这个 Dom ,得到对应Native控件渲染, Android 标签对应 ViewGroup 控件。...,双方通讯通过C++保存映射,最终实现两端交互。...而bundle文件只会打包js代码,自然不会包含图片等静态资源,所以打包后静态资源,其实是被拷贝到对应平台资源文件。...打包AndroidIOS,肯定需要相应平台项目存在,在 react-native init 时创建项目,就已经包含android ios 模版工程,打包完工程会加载bundle文件,然后启动项目...3.2 实现原理 react native一样——weex 所有的标签也不是真实控件,JS 代码中所生成存 dom,最后都是由 Native 端解析,再得到对应Native控件渲染, Android

5.8K41

逆袭Flutter? Facebook 发布全新跨平台引擎 Hermes!

Android 就是 APK 大小) 内存利用率 在 Google Pixel 运行 React Native 应用 MatterMost 性能指标,可反映印度等市场中流行智能手机表现。...字节码设计使其在运行时可以映射到内存并解释,而无需急切地读取整个文件。许多中低端移动设备性能较差闪存 I/O 显著增加了延迟,因此按需从闪存加载体积经过优化字节码会显著提升 TTI。...此外,由于内存以只读方式映射并由文件支持,因此不使用虚拟内存移动操作系统( Android)可以在内存不足时清除这些页面,进而减少了内存较少设备杀掉进程现象。...尽管压缩后字节码比压缩后 JavaScript 源代码略大,但由于 Hermes 原生代码体积较小,因此 Hermes 从整体减少了 Android React Native 应用体积。...为了优化引擎大小,我们选择不支持 React Native 应用程序似乎不常用到一些语言功能,例如代理本地 eval()。完整列表可以在我们 GitHub 查阅。

1.9K40

教你轻松在React Native中集成统计功能

在这篇文章我会向大家分享,在React Native中集成umeng统计方法及流程。...因为umeng官网有非常详细集成文档集成文档,在这里我会介绍在React NativeAndroidiOS如何集成统计功能,但不会长篇大论。...> 上述代码YOUR_APP_KEY为appkey 需要替换为您在友盟后台申请应用Appkey,Channel ID为推广渠道名称,这个可以根据需要进行自定义,:GooglePlay 最基本使用...如果大家想通过视频学习如何在React Native中集成统计功能,可以点这里查看 第三步:高级功能 在上文中我们已经完成了统计sdk集成、配置以及最基本使用(如果大家想通过视频学习如何在React...以上便是在React Native中集成umeng统计方法及流程,这样以来我们就可以在umeng后台管理查看这些统计数据了: ?

6.3K40

最火移动端跨平台方案盘点

JS端通过这个 key 组合 Dom ,最后Native端会解析这个 Dom ,得到对应Native控件渲染, Android 标签对应 ViewGroup 控件。 ?...,双方通讯通过C++保存映射,最终实现两端交互。...而bundle文件只会打包js代码,自然不会包含图片等静态资源,所以打包后静态资源,其实是被拷贝到对应平台资源文件。...打包AndroidIOS,肯定需要相应平台项目存在,在 react-native init 时创建项目,就已经包含android ios 模版工程,打包完工程会加载bundle文件,然后启动项目...3.2 实现原理 react native一样——weex 所有的标签也不是真实控件,JS 代码中所生成存 dom,最后都是由 Native 端解析,再得到对应Native控件渲染, Android

4K20

React Native JSBundle拆包之原理篇

不过,熟悉RN开发者也知道,早期RN版本打出来包都只有一个jsbundle,而这个jsbundle里面包含了所有代码(RN源码、第三方库代码自己业务代码)。...如果是纯RN代码倒没什么关系,但大部分大厂都是在原生应用内接入RN,而且一个RN包含许多不同业务,这些不同业务很可能是不同部门开发,这样一个库中就有许许多多重复RN代码第三方库代码。...拆包流派 moles-packer moles-packer 是由携程框架团队研发,与携程moles框架配套使用React Native 打包拆包工具,同时支持原生 React Native 项目...那么,RN编写页面又是如何在Android系统显示呢?那就得看看RNAndroid端源码了。...* 为了使JS堆栈跟踪能够正常工作并允许映射正确地对其进行符号化,需要提供正确下载bundlesourceURL。

2.7K30

React Native 混合开发(Android篇)

React Native混合开发教程我们分为上下两篇,上篇主要介绍如何在现有的Android应用上进行React Native混合开发,下篇主要介绍如何在现有的iOS应用上进行React Native...将React Native集成到现有的Android应用需要如下几个主要步骤: 首先,你需要有一个React Native项目; 为已存在Android应用添加React Native所需要依赖...创建一个React Native项目 在做混合开发之前我们首先需要创建一个没有AndroidiOS模块React Native项目。...@16.3.1: npm install --save react@16.3.1 至此,一个不含AndroidiOS模块React Native项目便创建好了。...react-native init RNHybrid 上述命令会初始化一个完成名为RNHybridReact Native项目,然后我们将里面的androidios目录删除,替换成已存在Android

3.9K30

React Native+React Navigation+Redux开发实用教程

为了帮助大家快速上手在React Native与Redux开发,在这本文中将向大家介绍如何在React Native中使用Redux?,以及一些必备基础以及高级知识。...那么如何在React Native中使用Reduxreact-navigation组合?呢?...在Redux+react-navigation场景处理 Android 物理返回键 在Redux+react-navigation场景处理Android物理返回键需要注意当前路由所以位置,...; 如何动态设置store,动态获取store(难点:storekey不固定); 如何实现可取消redux action:可参考SearchPage设计; 上述实战技巧可在新版React Native...; 并不是所有的state都适合放在store,这样会让store变得非常庞大,某个状态只被一个组件使用,不存在状态共享,可以不放在store; 参考 新版React Native+Redux打造高质量上线

3.9K10

新版React Native 混合开发(Android篇)

React Native混合开发教程我们分为上下两篇,上篇主要介绍如何在现有的Android应用上进行React Native混合开发,下篇主要介绍如何在现有的iOS应用上进行React Native...将React Native集成到现有的Android应用需要如下几个主要步骤: 首先,你需要有一个React Native项目; 为已存在Android应用添加React Native所需要依赖...创建一个React Native项目 在做混合开发之前我们首先需要创建一个没有AndroidiOS模块React Native项目。...npm install --save react 至此,一个不含AndroidiOS模块React Native项目便创建好了。...react-native init RNHybrid 上述命令会初始化一个完成名为RNHybridReact Native项目,然后我们将里面的androidios目录删除,替换成已存在Android

6.4K30

AndroidReact Native开发(四、打包流程解析发布为Maven库)

而手动针对Android添加过link应该熟悉,react-native link 实际是通过脚本,在 setting.gradle 文件引入模块在node_modules原生路径,然后在 app... 从上方代码可以看出,我们直接加载 assets 目录下bundle文件index.android.bundle(当然你可以从本地或者网络加载jsbundle文件也是可以),它生成拷贝是通过react-native...这个脚本会读取一些配置路径,然后执行命令行打包拷贝需要资源,所以appbuild.gradle文件一样,在rn-librarybuild.gradle文件顶部增加引入即可,打包后,默认生成bundle...这一切都是由react native脚本执行。不过默认情况下,生成拷贝bundle文件resources资源路径,是无法被打包到aar。...aar文件本身Apk一样,其实是一个zip压缩文件,其中包含文件如下所示: /**主要文件**/ classes.jar R.txt AndroidManifest.xml res/ /**其他文件

2K40
领券