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

Change entry file path of android and ios in react-native project

提问by Gabriel Henrique

After starting a new project with react-native init awesomeProject, i try to restructure my project, putting index.ios.jsand index.android.iosinside a common folder named src.

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

When i execute react-native run-android, i get the following error:

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

Where i have to change to react-native search for entry files in the right path?

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

回答by Michael Radionov

I've used the following steps on react-native 0.35

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

For development you need to open a file

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

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

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

and override a method of ReactNativeHostcalled getJSMainModuleName:

并覆盖一个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

  };

  // ...
}

This way the app will know where to fetch the module from a packager server.

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

For production, when you build your APK using cd android && ./gradlew assembleReleaseyou'll have to modify a file

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

MyProject/android/app/build.gradle

MyProject/android/app/build.gradle

and add custom build options, make sure to place them before apply from: "../../node_modules/react-native/react.gradle"line:

并添加自定义构建选项，确保将它们放在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"

Unfortunately I don't have iOS setup right now, I can't help you with that yet.

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

回答by gonglong

Thanks for Michael's info! I did the case for iOS and make the answer complete for both Android and iOS.

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

As the same as Android, the answers for development and production are different.

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

1. For Development (debug mode)

   go to AppDelegate.m

   set parameter jsBundleURLForBundleRootas the path of entry file and moduleNameas the component you registered in RN js. For example, if I want to change the entry js file to js/screen/LoginScreen.js and the component to LoginScreen, do the following:

   jsCodeLocation = [[RCTBundleURLProvider sharedSettings] 
       jsBundleURLForBundleRoot:@"js/screen/LoginScreen"
       fallbackResource:nil];
   rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                
       moduleName:@"LoginScreen"
       initialProperties:nil                                            
       launchOptions:launchOptions];
   

2. For Production (release mode)

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. 用于生产（发布模式）

for production mode, Xcode generates a jsbundle file while building. Besides what we did for debug mode, we need to tell Xcode the entry file of jsbundle.

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

go to the "Build Phases" tab of current target. in the "Bundle React Native code and images" phase, append your entry file to end of the shell

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

Info about how to run development/produc mode on iOS here

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