首页
学习
活动
专区
工具
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中的真正的原生iOS和Android 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.4K10

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

这些React-Native组件映射到渲染到App中的真正的原生iOS和Android 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组件。

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

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

    9.9K30

    React Native 混合开发(iOS篇)

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

    8.3K50

    『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.7K20

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

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

    5.7K20

    在React Native中构建启动屏

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

    63210

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

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

    7.3K41

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

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

    2K40

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

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

    6.4K40

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

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

    4.1K20

    React Native JSBundle拆包之原理篇

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

    3.1K30

    React Native 混合开发(Android篇)

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

    4K30

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

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

    4K10

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

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

    7.3K30

    从Android到React Native开发(四、打包流程解析和发布为Maven库)

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

    2.1K40
    领券