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

Hwg 發布于2019-08-21 15:12 / 954人閱讀

摘要：搭建開發環境安裝和命令行工具是提供的替代的工具，可以加速模塊的下載。的命令行工具用于執行創建初始化更新項目運行打包服務等任務。

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{
    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 (
            
                
            
        );
    }
}

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 原生模塊
歡迎掃一掃二維碼，關注我們的微信訂閱號：

云服務器 GPU云服務器服務器初次使用方法 TypeScript react-native typescript javascript

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88128.html

初次接觸ReactNative，搭建環境、調試時遇到的報錯們及解決方法

摘要：初次搭建總會碰上各種報錯以及紅黃屏報錯如果尚未搭建環境，請轉至官網搭建紅屏是程序無法正常運行，黃屏是程序可以運行但是可能存在一些潛在問題首次使用命令行工具來創建一個名為的新項目后運行后會報錯，如圖解決方法到你的已有項目中復制一份文件到初次搭建ReactNative總會碰上各種報錯以及紅黃屏報錯如果尚未搭建環境，請轉至官網搭建https://reactnative.cn/docs/g....

elliott_hu 2019-08-23 12:25 評論0 收藏0
前端每周清單第 47 期：NPM 年度報告與 2018 展望，Airbnb React Router

摘要：確定新的包命名規則為了盡可能避免包的誤植域名現象，將不會再允許使用相似的包命名不過會進一步鼓勵開發者使用自己的命名空間來發布包。本文是對其幾十年來技術之路的回顧與展望，也是一代技術人的青春回憶。 showImg(https://segmentfault.com/img/remote/1460000012846628); 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了...

makeFoxPlay 2019-08-22 13:50 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

kun_jian 2019-08-02 15:28 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

J4ck_Chan 2019-08-23 18:32 評論0 收藏0