使用Visual Studio Code和typescript 开发调试React Native项目
2017-08-27 12:29
886 查看
关于
但是
eact-native结合的关键是使用转换器
cd YahuiApp
yarn add --dev react-native-typescript-transformer typescript @types/react @types/react-native
新建文件
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"
},
代码为:
import React, { Component } from "react";
import {
StyleSheet,
Text,
View
} from "react-native";
AppRegistry
import {
AppRegistry,
} from 'react-native';
import App from "./src/main";
至此 您的使用TS开发React Native的项目环境搭建好了
React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架。一次变编码多平台运行,非常强大。但是个人不喜欢js的过于
灵活(弱类型)的语法。强大的强类型语言
Typescript(简称TS)是我的首选,他可以编译成
JavaScript,编译成的JavaScript代码可读性很好,但是这不是关键,关键是
TS开发和调试效率极高。
但是
React Native官方是使用
js的开发的,如果如果使用TS开发React Native的关键是
transformer。
eact-native结合的关键是使用转换器
初始化项目
react-native init YahuiAppcd 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的项目环境搭建好了
相关文章推荐
- 如何使用Visual Studio Code开发Django项目
- Nodejs创建Express4项目以及使用Visual Studio Code编辑器配置Nodejs开发环境
- 在Mac上使用Visual Studio Code开发/调试.NET Core代码
- 使用Visual Studio Code编写react-native插件介绍
- 使用Visual Studio Code + Node.js搭建TypeScript开发环境
- 使用Visual Studio Code搭建TypeScript开发环境
- React-Native的开发神器 Visual Studio Code
- 如何使用vscode [Visual Studio Code]开发工具来搭建一套TypeScript的开发环境
- Mac上使用Visual Studio Code开发/调试.NET Core代码
- 使用VsCode开发React-Native[debug调试+智能提示]
- 【学习笔记】使用Visual Studio Code来开发TypeScript的环境记事
- 使用Visual Studio Code编译、调试Apollo项目
- 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(九)-- 单元测试
- 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(七)-- 结构化配置
- 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(二)-- Web Api Demo
- Windows下使用AndroidStudio+ReactNative开发Android应用
- 使用 Visual Studio .NET 开发 Web 项目的远程服务器配置
- 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(八)-- 多环境开发
- 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(十)-- 发布(Windows)
- 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(二)-- Web Api Demo