首次尝试运用typescript开辟reactnative

typescript是Javascript的超集，在Javascript的基础上添加了可选的静态范例，异常合适团队开，此次我们尝试运用typescript来开辟react-native运用。

搭建react-native开辟环境

装置yarn和react-native命令行东西

npm install -g yarn react-native-cli

Yarn是Facebook供应的替换npm的东西，能够加快node模块的下载。React Native的命令行东西用于实行建立、初始化、更新项目、运转打包效劳（packager）等使命。

React Native如今须要Xcode 7.0 或更高版本。你能够经由过程App Store或是到Apple开辟者官网上下载。这一步骤会同时装置Xcode IDE和Xcode的命令行东西。

虽然一般来说命令行东西都是默许装置了，但你最好照样启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是不是装有某个版本的Command Line Tools。Xcode的命令行东西中也包括一些必需的东西，比方git等。

搭建typescript开辟环境

先装置typescript

npm install -g typescript

接下来装置typings
typings是typescript的依靠管理器，假如你运用sublime text或许vscode，会异常轻易的补全代码

npm install -g typings

运用react-native命令行东西初始化react-native项目

react-native init ReactNativeApp

守候少焉后，进入方才新建的项目，建立一个名为&＃8221;tsconfig.json&＃8221; 的文件。tsconfig.json是一个 typescript 项目的配置文件，能够经由过程读取它来设置 ts 编译器的编译参数
内容以下：

{
"compilerOptions": {
"target": "es6",
"allowJs": true,
"jsx": "react",
"outDir": "./dist",
"sourceMap": true,
"noImplicitAny": false
},
"include": [
"typings/**/*.d.ts",
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules"
]
}

在项面前目今新建一个目次&＃8221;src&＃8221;，typescripe源代码就放在这里

如今装置typings依靠

typings install npm~react --save
typings install dt~react-native --globals --save

编写Hello world

在src目次下新建myview.tsx，内容以下

import * as React from "react"
import { Text } from 'react-native';
/**
* Hello
*/
export default class Hello extends React.Component{
render() {
return (
Hello world!
);
}
}

返回根目次，编译方才写好的tsx文件

tsc

修正index.ios.js

import React, { Component } from 'react';
import Hello from './dist/myview';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class ReactNativeApp extends Component {
render() {
return (
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('ReactNativeApp', () => ReactNativeApp);

运转run-ios尝尝结果

react-native run-ios

运转结果：

作者信息
本文系Maxleap团队_云效劳研发成员：xinghaidong 【原创】
MaxLeap博客首发：https://blog.maxleap.cn/archi&＃8230;

相干引荐
ReactJS 开辟过程当中的一些运用心得
运用 React Native 构建相似 Tinder 的加载器
React Native 中的 Android 原生模块
迎接扫一扫二维码，关注我们的微信定阅号：