调整React Native的入口文件位置

前言
接上篇,由于引入typescript,会引发一个问题:
由于react native 生成的entry file是js格式, js里面没办法直接import ts module,而需要import ts生成的js文件.如果不调整rn现在的compile方式,要么我们将ts compile之后的js文件放在ts文件同级,保证我们import的路径一致,要么把ts compile之后的文件放在一个独立的目录下,index.js中的import ts compile目录下的js文件。这两种方式前者会让我们的开发文件结构变得很混乱,后者会让index.js import ts module做特殊处理,都会造成一定的麻烦.
为了解决这个问题于是有了这篇文章,目标效果:

  1. 将app.js 和index.js都换成ts,同时将app.ts 和index.ts都挪到src下面
  2. ts compile的结果统一扔在build目录下, native app 从build目录下读取entry file
Screen Shot 2018-05-08 at 5.39.07 PM.png

Part 1:调整react native文件

将index.js 和app.js 重命名为index.tsx 和app.tsx 并移到src目录下

Part 2:调整iOS配置

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  NSURL *jsCodeLocation;
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"build/index" fallbackResource:nil];
  ...
}

Part 3:调整Android配置

public class MainApplication extends Application implements ReactApplication {
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    ...
    @Override
    protected String getJSMainModuleName() {
      return "build/index";
    }
    ...
  };
  ...
}

你可能感兴趣的:(调整React Native的入口文件位置)