【问题标题】:Change entry file path of android and ios in react-native project在 react-native 项目中更改 android 和 ios 的入口文件路径
【发布时间】:2017-02-24 07:18:18
【问题描述】:

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

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

我必须在哪里更改为正确路径中的入口文件的本机搜索?

【问题讨论】:

标签: java android ios reactjs react-native


【解决方案1】:

我在 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

  };

  // ...
}

这样,应用程序将知道从打包服务器获取模块的位置。

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

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",。顺便说一句,效果很好!
【解决方案2】:

感谢迈克尔的信息! 我为 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 的入口文件。

转到当前目标的“构建阶段”标签。 在“Bundle React Native code and images”阶段,将你的入口文件附加到shell的末尾

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-07-11
    • 1970-01-01
    • 2018-07-08
    • 1970-01-01
    相关资源
    最近更新 更多