调整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";
    }
    ...
  };
  ...
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,569评论 25 709
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,345评论 7 110
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,183评论 19 139
  • 怎么办,还是喜欢文字。 这是现在一直在困惑的东西。 总是不同层次的感觉事与愿违。 已经有三个故事了《三妹》,《老高...
    贵哥的万万小姐阅读 1,508评论 0 0
  • 接孩子回家路上,一抬头路灯亮了,看了一下时间5:25分,天阴阴的,像一个寡寡欲欢的中年人,没了往日生气。空气中弥漫...
    山里的小米阅读 1,495评论 0 0

友情链接更多精彩内容