React Native:react-native-code-push报错的解决

 更新时间:2022年10月24日 09:51:12   作者:伍什kay  
这篇文章主要介绍了React Native:react-native-code-push报错的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

问题描述

react-native-code-push 安装后项目启动就报错。

查找原因

原以为是插件版本与RN版本不匹配导致,所以查了一下不同版本所对应的code-push插件:

项目中的RN是0.66.3,但是并没有于此相匹配的版本,索性查看下所有版本吧,

执行命令:

npm view react-native-code-push versions

有点儿意外。。并没有更高的版本

问题解决

1、修改 android\settings.gradle 文件

rootProject.name = 'GitHub_RN'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app',':trackshare',':react-native-code-push'

project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

2、修改 android\app\src\main\java\com\github_rn\MainApplication.java

package com.github_rn;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import com.microsoft.codepush.react.CodePush; // 1、在此添加

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        // 2、在此添加
        @Override
        protected String getJSBundleFile() {
          return CodePush.getJSBundleFile();
        }

        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.github_rn.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

3、修改 android\app\src\main\res\values\strings.xml

<resources>
    <string name="app_name">Demo</string>
    <string moduleConfig="true" name="CodePushDeploymentKey">xxxxxxx(这里添加你的key)</string>
</resources>

最后重新启动,运行成功。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • React如何实现视频旋转缩放

    React如何实现视频旋转缩放

    这篇文章主要为大家详细介绍了React如何实现视频旋转缩放功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • 如何不使用eject修改create-react-app的配置

    如何不使用eject修改create-react-app的配置

    许多刚开始接触create-react-app框架的同学,不免都会有个疑问:如何在不执行eject操作的同时,修改create-react-app的配置。
    2021-04-04
  • 使用React和Redux Toolkit实现用户登录功能

    使用React和Redux Toolkit实现用户登录功能

    在React中,用户登录功能是一个常见的需求,为了实现该功能,需要对用户输入的用户名和密码进行验证,并将验证结果保存到应用程序状态中,在React中,可以使用Redux Toolkit来管理应用程序状态,从而实现用户登录功能,需要详细了解可以参考下文
    2023-05-05
  • react组件实例属性state详解

    react组件实例属性state详解

    这篇文章主要介绍了react组件实例属性state,有状态state的组件称作复杂组件,没有状态的组件称为简单组件,状态里存储数据,数据的改变驱动页面的展示,本文结合实例代码给大家详细讲解,需要的朋友可以参考下
    2023-02-02
  • React引入antd-mobile+postcss搭建移动端

    React引入antd-mobile+postcss搭建移动端

    本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧
    2021-06-06
  • ReactRouterV6如何获取当前路由参数

    ReactRouterV6如何获取当前路由参数

    这篇文章主要介绍了ReactRouterV6如何获取当前路由参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

    D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

    散点图(Scatter Chart),通常是一横一竖两个坐标轴,数据是一组二维坐标,分别对应两个坐标轴,与坐标轴对应的地方打上点。由此可以猜到,需要的元素包括circle(圆)和axis(坐标轴),接下来通过本文大家分享D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本) ,一起看看
    2019-05-05
  • react antd如何防止一份数据多次提交

    react antd如何防止一份数据多次提交

    这篇文章主要介绍了react antd如何防止一份数据多次提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • React中嵌套组件与被嵌套组件的通信过程

    React中嵌套组件与被嵌套组件的通信过程

    这篇文章主要介绍了React中嵌套组件与被嵌套组件的通信过程,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • React项目配置prettier和eslint的方法

    React项目配置prettier和eslint的方法

    这篇文章主要介绍了React项目配置prettier和eslint的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06

最新评论