react-native项目更改android和ios的入口文件路径

IT技术 java android ios reactjs react-native
2021-04-19 01:51:13

使用react-native init awesomeProject开始一个新项目后,我尝试重构我的项目,将index.ios.jsindex.android.ios放在名为src的公共文件夹中

当我执行react-native run-android 时,出现以下错误:

安卓设备上的错误

我必须在哪里更改为对正确路径中的条目文件进行本机搜索?

2个回答

我在 react-native 0.35 上使用了以下步骤

对于开发,您需要打开一个文件

MyProject/android/app/src/main/java/com/MyProject/MainApplication.java

并覆盖一个ReactNativeHost被调用的方法getJSMainModuleName

package com.MyProject;

// ...

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    // ...

    // ADD THE LINES BELOW

    @Override
    protected String getJSMainModuleName() {
      return "src/index.android";
    }

    // ADD THE LINES ABOVE

  };

  // ...
}

通过这种方式,应用程序将知道从打包服务器中获取module的位置。

对于生产,当您使用构建 APK 时,cd android && ./gradlew assembleRelease您必须修改一个文件

MyProject/android/app/build.gradle

并添加自定义构建选项,确保将它们放在apply from: "../../node_modules/react-native/react.gradle"之前

apply plugin: "com.android.application"

import com.android.build.OutputFile

// ...

// ADD THE LINES BELOW

project.ext.react = [
    // the entry file for bundle generation
    entryFile: "src/index.android.js",
]

// ADD THE LINES ABOVE

// ...

apply from: "../../node_modules/react-native/react.gradle"

不幸的是,我现在没有 iOS 设置,我还不能帮你。

我合并index.android.jsindex.ios.js进入index.js. 对我来说是entryFile: "index.js",顺便说一句,工作得很好!
2021-05-25 01:51:13
在开发设置上工作得非常好。我现在不需要生产设置,但我认为在我需要时会起作用。太感谢了。
2021-05-31 01:51:13

感谢迈克尔的信息!我为 iOS 做了案例,并为 Android 和 iOS 提供了完整的答案。

与Android一样,开发和生产的答案是不同的。

  1. 用于开发(调试模式)

    AppDelegate.m

    将参数设置jsBundleURLForBundleRoot为入口文件的路径和moduleName您在RN js中注册的组件。比如我想把入口js文件改成js/screen/LoginScreen.js,组件改成LoginScreen,做如下操作:

    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] 
        jsBundleURLForBundleRoot:@"js/screen/LoginScreen"
        fallbackResource:nil];
    rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                
        moduleName:@"LoginScreen"
        initialProperties:nil                                            
        launchOptions:launchOptions];
    
  2. 用于生产(发布模式)

对于生产模式,Xcode 在构建时生成一个 jsbundle 文件。除了我们为调试模式所做的,我们还需要告诉 Xcode jsbundle 的入口文件。

转到当前目标的“构建阶段”选项卡。在“捆绑 React Native 代码和图像”阶段,将您的入口文件附加到 shell 的末尾

在此处输入图片说明

关于如何在 iOS 上运行开发/生产模式的信息在这里