关于React Native的详细介绍我就不叙述了，他是使用js构建原生app的开发框架。一次编码多平台运行，非常强大。但是个人不喜欢js的过于灵活（弱类型）的语法。强大的强类型语言Typescript(简称TS)是我的首选，他可以编译成JavaScript，编译成的JavaScript代码可读性很好，但是这不是关键，关键是TS开发和调试效率极高。
但是React Native官方是使用js的开发的,如果如果使用TS开发React Native的关键是transformer。
eact-native结合的关键是使用转换器

初始化项目

react-native init YahuiApp
cd YahuiApp
yarn add --dev react-native-typescript-transformer typescript @types/react @types/react-native

用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",
    "test": "jest"
}, -->

编写代码

在 src文件夹里新建main.tsc文件
代码为：

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

    interface Props {

    }

    interface State {

    }

    export default class App extends Component<Props, State> {
        render() {
            return (
                <View style={styles.container}>
                    <Text style={styles.text}>
                        Welcome to React Native!
                    </Text>
                </View>
            );
        }
    }

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "#F5FCFF",
        } as React.ViewStyle,

        text: {
            fontSize: 20,
            textAlign: "center",
            margin: 10,
        } as React.TextStyle,
    });
AppRegistry
    import {
        AppRegistry,
    } from 'react-native';
    import App from "./src/main";

    AppRegistry.registerComponent('YahuiApp', () => App);

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

最终代码在：https://github.com/YahuiWong/react-native-typescript 如果觉得有用，请Star

转载请注明出处：https://blog.yahui.wang/2017/08/26/react-native-typescript-init-debug/