成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

初次嘗試使用typescript開發(fā)react-native

Hwg / 974人閱讀

摘要：搭建開發(fā)環(huán)境安裝和命令行工具是提供的替代的工具，可以加速模塊的下載。的命令行工具用于執(zhí)行創(chuàng)建初始化更新項(xiàng)目運(yùn)行打包服務(wù)等任務(wù)。

typescript是javascript的超集，在javascript的基礎(chǔ)上添加了可選的靜態(tài)類型，非常適合團(tuán)隊(duì)開，這次我們嘗試使用typescript來開發(fā)react-native應(yīng)用。

搭建react-native開發(fā)環(huán)境

安裝yarn和react-native命令行工具

npm install -g yarn react-native-cli

Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。

React Native目前需要Xcode 7.0 或更高版本。你可以通過App Store或是到Apple開發(fā)者官網(wǎng)上下載。這一步驟會(huì)同時(shí)安裝Xcode IDE和Xcode的命令行工具。

雖然一般來說命令行工具都是默認(rèn)安裝了，但你最好還是啟動(dòng)Xcode，并在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個(gè)版本的Command Line Tools。Xcode的命令行工具中也包含一些必須的工具，比如git等。

搭建typescript開發(fā)環(huán)境

先安裝typescript

npm install -g typescript

接下來安裝typings
typings是typescript的依賴管理器，如果你使用sublime text或者vscode，會(huì)非常方便的補(bǔ)全代碼

npm install -g typings
使用react-native命令行工具初始化react-native項(xiàng)目 
react-native init ReactNativeApp

等待片刻后，進(jìn)入剛剛新建的項(xiàng)目，創(chuàng)建一個(gè)名為"tsconfig.json" 的文件。tsconfig.json是一個(gè) typescript 項(xiàng)目的配置文件，可以通過讀取它來設(shè)置 ts 編譯器的編譯參數(shù)
內(nèi)容如下：

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

在項(xiàng)目下新建一個(gè)目錄"src"，typescripe源代碼就放在這里

現(xiàn)在安裝typings依賴

typings install npm~react --save
typings install dt~react-native --globals --save
編寫Hello world

在src目錄下新建myview.tsx，內(nèi)容如下

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);

運(yùn)行run-ios試試效果

react-native run-ios
運(yùn)行效果：

作者信息
本文系Maxleap團(tuán)隊(duì)_云服務(wù)研發(fā)成員：xinghaidong 【原創(chuàng)】
MaxLeap博客首發(fā)：https://blog.maxleap.cn/archi...

相關(guān)推薦
ReactJS 開發(fā)過程中的一些使用心得
使用 React Native 構(gòu)建類似 Tinder 的加載器
React Native 中的 Android 原生模塊
歡迎掃一掃二維碼，關(guān)注我們的微信訂閱號(hào)：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88128.html

相關(guān)文章

  • 初次接觸ReactNative，搭建環(huán)境、調(diào)試時(shí)遇到的報(bào)錯(cuò)們及解決方法

    摘要：初次搭建總會(huì)碰上各種報(bào)錯(cuò)以及紅黃屏報(bào)錯(cuò)如果尚未搭建環(huán)境，請(qǐng)轉(zhuǎn)至官網(wǎng)搭建紅屏是程序無法正常運(yùn)行，黃屏是程序可以運(yùn)行但是可能存在一些潛在問題首次使用命令行工具來創(chuàng)建一個(gè)名為的新項(xiàng)目后運(yùn)行后會(huì)報(bào)錯(cuò)，如圖解決方法到你的已有項(xiàng)目中復(fù)制一份文件到 初次搭建ReactNative總會(huì)碰上各種報(bào)錯(cuò)以及紅黃屏報(bào)錯(cuò)如果尚未搭建環(huán)境，請(qǐng)轉(zhuǎn)至官網(wǎng)搭建https://reactnative.cn/docs/g....

    elliott_hu 評(píng)論0 收藏0

  • 前端每周清單第 47 期：NPM 年度報(bào)告與 2018 展望，Airbnb React Router

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

    makeFoxPlay 評(píng)論0 收藏0

  • React的移動(dòng)端和PC端生態(tài)圈的使用匯總

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

    kun_jian 評(píng)論0 收藏0

  • React的移動(dòng)端和PC端生態(tài)圈的使用匯總

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

    J4ck_Chan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<