美文网首页React Native
调整React Native的入口文件位置

调整React Native的入口文件位置

作者: shuangyu1989 | 来源:发表于2018-05-08 17:47 被阅读0次

    前言
    接上篇,由于引入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的入口文件位置

        本文链接:https://www.haomeiwen.com/subject/mvywrftx.html