关于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文件

代码为:

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

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

使用Visual Studio Code和typescript 开发调试React Native项目的更多相关文章

  1. 使用Visual Studio Code搭建TypeScript开发环境

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  2. 基于Visual Studio Code搭建Golang开发调试环境【非转载】

    由于对Docker+kubernetes的使用及持续关注,要理解这个平台的原理,势必需要对golang有一定的理解,基于此开始利用业余时间学习go,基础语法看完之后,搭建开发环境肯定是第一步,虽然能g ...

  3. 新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows)

    原文出处:新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows) 这是我的文章备份  http://www.dotblogs.com.tw/ ...

  4. Visual Studio Code和Docker开发asp.net core和mysql应用

    Visual Studio Code和Docker开发asp.net core和mysql应用 .net猿遇到了小鲸鱼,觉得越来越兴奋.本来.net猿只是在透过家里那田子窗看外面的世界,但是看着海峡对 ...

  5. Windows下visual studio code搭建golang开发环境

    Windows下visual studio code搭建golang开发环境 序幕 其实环境搭建没什么难的,但是遇到一些问题,主要是有些网站资源访问不了(如:golang.org),导致一些包无法安装 ...

  6. Visual Studio Code配置GoLang开发环境

    Visual Studio Code配置GoLang开发环境 在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页: ...

  7. Visual Studio Code 做PHP开发

    Visual Studio Code 做PHP开发 1. 在Windows 10环境下安装PHP: 1. 下载自己中意的PHP版本:http://windows.php.net/download (我 ...

  8. visual studio code(vscode) 调试php(转)

    原文链接:http://www.cnblogs.com/CLR010/p/5276077.html visual studio code(vscode) 调试php   1.下载vscode (vis ...

  9. Visual Studio Code配置 HTML 开发环境

    Visual Studio Code配置 HTML 开发环境 https://v.qq.com/x/page/l0532svf47c.html?spm=a2h0k.11417342.searchres ...

随机推荐

  1. 虚拟机配置静态IP地址

    使用VMware配置虚拟机静态IP地址 一.安装好虚拟后在菜单栏选择编辑→ 虚拟网络编辑器,打开虚拟网络编辑器对话框,选择Vmnet8 Net网络连接方式,随意设置子网IP,点击NAT设置页面,查看子 ...

  2. git合并历史提交

    背景 以前一直觉得只要pull和push就够了,但合作中总会遇到各种非理想的情况.这时候才发现git其他命令的作用. 现在的情况是,repo是一个远程team维护的,我们需要增加新feature,那么 ...

  3. 深入分析Java的内置日志API(java.util.logging)(一)

    简介   任何的软件系统,日志都是非常重要的一部分.良好统一的日志规范会大大提高应用程序的可维护性.可靠性,并进而提高开发效率,指导业务.在早期,Java工程师往往都是利用 System.err.pr ...

  4. vim的tab键设定

    多在windows上编程的童鞋可能习惯于感受tab键为4个空格的长度,不过在linux系统中一般默认设定tab键为8个空格长度来显示.事实上tab也确实是8个空格的长度.不过由于习惯问题,某些童鞋还是 ...

  5. C++第四篇--重载_指针_引用

    C++第四篇--重载_指针_引用 1. 基础知识 重载:函数名相同,根据参数不同(类型.数量.顺序不同)调用同名函数 指针和引用:引用就是别名,引用时必须初始化,引用你定义的变量. int a; in ...

  6. bash脚本编程---循环

    bash为过程式编程语言 代码执行顺序: 1.顺序执行:逐条执行 2.选择执行:代码有一个分支,条件满足时才会执行                       两个或以上的分支,只会执行其中一个满足条 ...

  7. 快速了解cpu、核与线程

    作为一个后台开发人员,我想有必要了解这些基础知识.如果本文有不严谨或者疏忽的地方,请指正. cpu与核心 物理核 物理核数量=cpu数(机子上装的cpu的数量)*每个cpu的核心数 虚拟核 所谓的4核 ...

  8. ES6解构赋值

    前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...

  9. 替换Spring Boot 的EnableCaching注解

    SpringBoot 中可使用@Cacheable注解来更方便的使用redis,这个注解是通过拦截器工作的,使用了@Cacheable的方法执行时,执行到CglibAopProxy.java中的 Dy ...

  10. 关于javascript在OJ系统上编程的注意事项

    ① 牛客网输入流: var line=readline().split(' '); ② 赛码网输入流: var line=read_line().split(' '); ③ 输出流: print(); ...