关于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.tsc文件
代码为：
importReact, { Component }from"react";import{ StyleSheet, Text, View}from"react-native";interface Props {}interface State {}exportdefaultclassAppextendsComponent{ render() {return(Welcome to React Native!); }}conststyles = StyleSheet.create({container: {flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"#F5FCFF", }asReact.ViewStyle,text: {fontSize:20,textAlign:"center",margin:10, }asReact.TextStyle,});
AppRegistry
import{ AppRegistry,}from'react-native';importAppfrom"./src/main";AppRegistry.registerComponent('YahuiApp',()=>App);
至此 您的使用TS开发React Native的项目环境搭建好了
网友评论