使用TypeScript开发ReactNative应用的简单示例

Posted 2020-08-05 蜗牛的专栏

最近小小尝试了下 ReactNative + TypeScript 开发APP，爬了无数坑之后总算弄出来个结果，重要的地方记录下，后面会附上示例代码：

1、开发工具的选择 
windows 平台我接触的开发工具主要三个， 
WebStorm，Intellij IDEA 2016.2 版本，https://www.jetbrains.com/ 
这两个我都试过，开发完全没问题的，还有phpStorm估计也行吧，没试过。 
另外还有一个是VisualStudioCode：https://code.visualstudio.com/b?utm_expid=101350005-27.GqBWbOBuSRqlazQC_nNSRg.1 
对与 ios 平台应该是不用选的就是 Nuclide 了吧，我是没用过哈，不知道怎么用，不过用过 Atom 感觉还是很酷的。 
平时习惯用 jetbrains 的 IDE ，每个都绝对神器，VisualCode 感觉实在太难用了，坚持了一段时间还是放弃了。 
下面示例都是用的 Intellij IDEA 2016.2 
预览下： 

经过一番配置后，import 等导入和代码提示等等都是没问题的

2、基础开发环境安装 
这个我就不说了，直接看这个网站就行了上面已经写得很完善了 http://reactnative.cn/ ，照着文档安装配置应该没什么问题的，文档看不懂的话网站的站长博客里面还有全套的视频讲解非常详细了，地址：http://reactnative.cn/post/759。

3、安装 TypeScript 开发环境

# 先 cd 到你的项目目录，如 myproject 目录下再执行下面命令
npm install -g typescript
npm install typescript
tsc --init

# 未安装 tsd 则先安装再进行项目初始化
npm install -g tsd

tsd init && tsd install react-native --save

　　

tsd 初始化安装后，会生成 tsconfig.json 文件，貌似 react-native 初始化新项目的时候就有这么个文件来着，忘了，如果tsd初始化之前已存在该文件可直接删除。

查看 tsconfig.json 文件

{
    "compilerOptions": {
        "target": "es6",
        "allowJs": true,
        "jsx": "react",
        //"outDir": "artifacts",
        //"rootDir": "src",
        "sourceMap": false,
        "noImplicitAny": false
    },
    "filesGlob": [
        "typings/**/*.d.ts",
        "src/**/*.ts",
        "src/**/*.tsx"
    ],
    "exclude": [
        "node_modules"
    ]
}

　　

个人建议是 outDir 参数建议不要设置，使用默认值就行，这样每次修改 .ts 文件后就会直接在当前目录下生成同名的 es6语法编译后 .js 文件，当 index.android.js 入口文件加载项目文件时则很方便，如下图：

以上配置完成就可以开始使用 TypeScript 开发了。

简单做了个 List 加载文章列表的功能，实现起来很简单方便，和原生Android开发比起来简直快了太多太多。

不过一开始遇到了很多坑，主要还是由于对 TypeScript 不太熟悉

如 style 的设置，总是提示类型错误：

Error:(20, 15) TS2322:Type ‘{ flex: number; flexDirection: string; }‘ is not assignable to type ‘ViewStyle‘.
  Types of property ‘flexDirection‘ are incompatible.
    Type ‘string‘ is not assignable to type ‘"row" | "column" | "row-reverse" | "column-reverse"‘.
      Type ‘string‘ is not assignable to type ‘"column-reverse"‘.

　　

类似上面这种错误，很是莫名其妙，搞了好半天才明白原来样式参数配置是需要进行类型转换，这也是 TypeScript很特色的地方啦

如下面这样：

4、TypeScript 跟 ReactNative 开发的关系 
最后说一下这两者是如何发生关系的，可能还有跟我一样的小白还没弄清楚，我就按照自己的理解来说啦， 
你用 TypeScript 语法写的 .ts .tsx 等后缀的程序是不能直接运行的，而是会被 tsconfig.json 配置中的 “target”: “es6”, 这项配置转换为 es6 语法的 .js 文件。 
TypeScript 中的 import 只会加载 .ts .tsx 后缀的文件，而 javascript 中的 import 只能加载 .js 等后缀的文件， 
所以，当 ReactNative 启动时，首先加载入口文件，如 index.android.js ,代码如下：

import { AppRegistry } from ‘react-native‘;
import IndexNavigator from ‘./application/src/controller/navigator/IndexNavigator‘;
AppRegistry.registerComponent(‘mogudan‘, () => IndexNavigator);

　　

其中 import IndexNavigator from … 这一行加载的不是 IndexNavigator.ts 而是编译后生成的 IndexNavigator.js 文件，下面对比两个文件的差异：

IndexNavigator.ts

/**
 * Created by ZHOUZ on 2016-08-26.
 */
import * as React from ‘react‘;
import {Navigator}  from ‘react-native‘;

import IndexPage from ‘../page/IndexPage‘

export default class IndexNavigator extends React.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;
                    return <Component {...route.params} navigator={navigator} />
                }}
            />
        );
    }
}

　　

IndexNavigator.js 
为自动编译后生成的es6语法的 javascript 代码

"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
/**
 * Created by ZHOUZ on 2016-08-26.
 */
const React = require(‘react‘);
const react_native_1 = require(‘react-native‘);
const IndexPage_1 = require(‘../page/IndexPage‘);
class IndexNavigator extends React.Component {
    render() {
        let defaultName = ‘IndexPage3311113‘;
        let defaultComponent = 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) => {
            let Component = route.component;
            return React.createElement(Component, __assign({}, route.params, {navigator: navigator}));
        }}));
    }
}
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = IndexNavigator;

　　

大概就是这样了，最最后放上我做的示例代码，只包含 application 目录下的文件，android，ios 目录都是 react-native 自动生成的大家都一样的。

文件下载地址： http://download.csdn.net/detail/zsjangel/9618350

补充一个问题，开发时使用 fetch 会遇到提示找不到的解决办法， 
http://blog.csdn.net/zhouzme/article/details/52390197