你用 TypeScript 语法写的 .ts .tsx 等后缀的程序是不能直接运行的，而是会被 tsconfig.json 配置中的 “target”:
“es6”, 这项配置转换为 es6 语法的 .js 文件。
TypeScript 中的 import 只会加载 .ts .tsx 后缀的文件，而 Javascript 中的 import 只能加载 .js
等后缀的文件，
所以，当 ReactNative 启动时，首先加载入口文件，如 index.android.js ,代码如下：
1
2
3
4
5
6
7
8
9
10
| import{ AppRegistry } from'react-native';
importIndexNavigator
from'./application/src/controller/navigator/IndexNavigator';
AppRegistry.registerComponent('mogudan', () = IndexNavigator);
|
其中 import IndexNavigator from … 这一行加载的不是 IndexNavigator.ts 而是编译后生成的
IndexNavigator.js 文件，下面对比两个文件的差异：
IndexNavigator.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| /**
* Created by ZHOUZ on 2016-08-26.
*/
import* as React from'react';
import{Navigator} from'react-native';
importIndexPage from'../page/IndexPage'
exportdefaultclassIndexNavigatorextendsReact.Component<any,any {
render() {
let defaultName ='IndexPage3311113';
let defaultComponent = IndexPage;
return(
<Navigator
initialRoute={{ name: defaultName, component:
defaultComponent }}
configureScene={(route) =
Navigator.SceneConfigs.VerticalDownSwipeJump }
renderScene={(route: any, navigator) = {
let Component =[route.component;](http://route.component%3B/)
return<Component {...route.params} navigator={navigator}
/
}}
/
);
}
}
|
IndexNavigator.js
为自动编译后生成的es6语法的 javascript 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
| "use strict";
var__assign = (this&&this.__assign) ||Object.assign ||function(t){
for(vars, i =1, n =arguments.length; i < n; i++) {
s =arguments[i];
for(varpins)if(Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
returnt;
};
/**
* Created by ZHOUZ on 2016-08-26.
*/
constReact =require('react');
constreact_native_1 =require('react-native');
constIndexPage_1 =require('../page/IndexPage');
classIndexNavigator extends[React.Component](http://react.component/){
render() {
letdefaultName ='IndexPage3311113';
letdefaultComponent = IndexPage_1.default;
return(React.createElement(react_native_1.Navigator, {initialRoute: {
name: defaultName, component: defaultComponent }, configureScene: (route) =
react_native_1.Navigator.SceneConfigs.VerticalDownSwipeJump, renderScene:
(route, navigator) = {
letComponent =[route.component;](http://route.component%3B/)
returnReact.createElement(Component, __assign({}, route.params,
{navigator: navigator}));
}}));
}
}
Object.defineProperty(exports,"__esModule", { value:true});
exports.default = IndexNavigator;
|
