初次尝试使用typescript开发react-native

Hwg 发布于2019-08-21 15:12 / 953人阅读

摘要：搭建开发环境安装和命令行工具是提供的替代的工具，可以加速模块的下载。的命令行工具用于执行创建初始化更新项目运行打包服务等任务。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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