关于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' ] } };

 

编写代码

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

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的项目环境搭建好了