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

发布时间:2019-06-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了初次尝试使用typescript开发react-native脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

tyPEscriptjavascript的超集,在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

运行效果:

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


作者信息
本文系Maxleap团队_服务研发成员:xinghaidong 【原创
MaxLeap博客首发:https://blog.maxleap.cn/archi...

相关推荐
ReactJS 开发过程中的一些使用心得
使用 React Native 构建类似 Tinder 的加载器
React Native 中的 Android 原生模块
欢迎扫一扫二维码,关注我们的微信订阅号

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

脚本宝典总结

以上是脚本宝典为你收集整理的初次尝试使用typescript开发react-native全部内容,希望文章能够帮你解决初次尝试使用typescript开发react-native所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。