初次嘗試使用typescript開發react-native

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

等待片刻後，進入剛剛新建的項目，建立一個名爲"tsconfig.json" 的文件。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"
    ]
}

在項目下新建一個目錄"src"，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<null, null>{
    render() {
        return (
            <Text>Hello world!</Text>
        );
    }
}

返回根目錄，編譯剛剛寫好的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 (
            <View style={styles.container}>
                <Hello />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

AppRegistry.registerComponent('ReactNativeApp', () => ReactNativeApp);

運行run-ios試試效果

react-native run-ios

運行效果：

---

做者信息
本文系Maxleap團隊_雲服務研發成員：xinghaidong 【原創】
MaxLeap博客首發：https://blog.maxleap.cn/archi...

相關推薦
ReactJS 開發過程當中的一些使用心得
使用 React Native 構建相似 Tinder 的加載器
React Native 中的 Android 原生模塊
歡迎掃一掃二維碼，關注咱們的微信訂閱號：