前言
接上篇,由于引入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做特殊处理,都会造成一定的麻烦.
为了解决这个问题于是有了这篇文章,目标效果:
- 将app.js 和index.js都换成ts,同时将app.ts 和index.ts都挪到src下面
- ts compile的结果统一扔在build目录下, native app 从build目录下读取entry file
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";
}
...
};
...
}
网友评论