ELS之RN with TypeScript项目搭建

本项目主要实现一个建筑类在线学习系统（ELS）：模拟试卷，历年真题，章节练习（类似于驾考宝典）与在线直播视频，往期视频回顾（点播）等功能。公司内部项目，文章只记录在编写程序过程中所遇到的问题与自我学习过程。未经允许，请勿转载！！

项目初始化

react-native init ELS
cd ELS
yarn add --dev @types/react @types/react-native react-native-typescript-transformer typescript
touch tsconfig.json
touch tslint.json

用vscode打开 添加配置文件

配置Typescript

编辑tsconfig.json内容为

{
    "compilerOptions": {
        "module": "es2015",
        "target": "es2015",
        "moduleResolution": "node",
        "jsx": "react-native",
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "watch": true,
        "allowSyntheticDefaultImports": true
    },
    "filesGlob": [
        "src/**/*.ts",
        "src/**/*.tsx"
    ],
    "exclude": [
        "index.android.js",
        "index.ios.js",
        "build",
        "node_modules"
    ]
}

编辑文件 tslint.json 内容为

{
    "rules": {
        "class-name": false,
        "comment-format": [
            true,
            "check-space"
        ],
        "indent": [
            true,
            "spaces"
        ],
        "no-duplicate-variable": true,
        "no-eval": true,
        "no-internal-module": true,
        "no-trailing-whitespace": true,
        "no-unsafe-finally": true,
        "no-var-keyword": true,
        "one-line": [
            true,
            "check-open-brace",
            "check-whitespace"
        ],
        "quotemark": [
            true,
            "double"
        ],
        "semicolon": [
            true,
            "always"
        ],
        "triple-equals": [
            true,
            "allow-null-check"
        ],
        "typedef-whitespace": [
            true,
            {
                "call-signature": "nospace",
                "index-signature": "nospace",
                "parameter": "nospace",
                "property-declaration": "nospace",
                "variable-declaration": "nospace"
            }
        ],
        "variable-name": [
            true,
            "ban-keywords"
        ],
        "whitespace": [
            true,
            "check-branch",
            "check-decl",
            "check-operator",
            "check-separator",
            "check-type"
        ]
    }
}

配置React Native Packager

根目录新建rn-cli.config.js文件 内容为

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx']
  }
};
// 修改package.json 文件 的scripts start
"scripts": {
  "start": "react-native start --transformer node_modules/react-native-typescript-transformer/index.js --sourceExts ts,tsx"
}

编写代码

在 src文件夹里新建main.tsx文件

import * as React from "react";
import { Component } from "react";
import {
  StyleSheet,
  Text,
  View
} from "react-native";

interface Props {

}

interface State {

}

export default class App extends Component {
    render() {
        return (
            
                
                    Welcome to React Native!
                
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF",
    },
    text: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
    },
});

至此 使用TS开发React Native的项目环境搭建好了