文档章节

用react-native typescript redux 构建项目

sunshinewyf
 sunshinewyf
发布于 2016/12/18 22:36
字数 610
阅读 132
收藏 0

react-native现在是越来越火了,公司也在开始使用react-native构建项目了,就此将自己的踩坑经历记录于此


初始化项目

这里有详细的步骤,在此就不赘述了。按照步骤来应该不会有什么问题

这里主要介绍一下在react native中使用typescript的方法以及我在此过程中踩过的坑。

  • 安装typescript以及typings
  npm install -g typescript typings
  • 初始化 生成tsconfig.json
   tsc --init

tsconfig.json里面的配置项可以根据自己的具体项目来进行,有相关的文档可以进行查阅

  • 使用typings安装依赖
typings install dt~react --global --save

但是会一直报下面这个错误

message:Attempted to compile "react" as a global module, but it looks like an external module. You'll need to remove the global option to continue

在网上搜了半天也没有搜到,难道react-native默认安装的react依赖是模块化的而非全局化的吗? 就是因为这个导致react在setup.tsx中会报错:

import React,{ Component } from "react";
import { Component } from "react";
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

class Root extends React.Component<any, any>{
    render() {
        return (
            <Text>this is a test,wyf</Text>
        )
    }
}
export default () => Root

提示React module is not existed,一脸懵逼,然后搜索这个错误信息,找到如下的解决方案,将上面第一行改为:

import * as React from "react";

这样确实可以解决问题,但是之后问题又来了,由于react-native不是全局的,Text没有类型说明,所以又通不过,最终还是需要用typings全局安装react-native 最后尝试了终极办法:

  • 初始化typings
typings --init

就会在项目根目录生成typings.json,然后通过直接配置该文件

{
   "globalDependencies": {
    "react": "registry:dt/react#0.14.0+20161024223416",
    "react-native": "registry:dt/react-native#0.29.0+20160709063508",
  }
}
  • typings install

结果居然成功了。真是历尽千辛万苦啊

(2)使用gulp实时编译typescript

  • 安装gulp
npm install --global gulp
  • 作为项目安装依赖
npm install --save-dev gulp
  • 在项目根目录新建gulpfile.js文件,配置如下:
var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProj = ts.createProject('tsconfig.json');

gulp.task('tsc', function () {
    var tsResult = gulp.src('js/**/*.ts')
        .pipe(ts(tsProj))
        .pipe(gulp.dest('built/'));
});

gulp.task('tsc:w', ['tsc'], function () {
    gulp.watch('js/**/*.ts', ['tsc']);
});

其中src文件和built文件是指需要编译的文件目录和目标文件目录,具体可以参考这里

然后执行gulp tsc:w就可以实现实时编译了 菜鸟踩坑中,将自己的经验记录下来

这篇文章也很不错

© 著作权归作者所有

sunshinewyf
粉丝 17
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
ReactNative仿某租车软件

关于React-Native 循例都要介绍下React-Native,下面简称RN。 RN是让你使用Javascript编写的原生移动应用。它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。 中文...

YDJFE
2018/08/29
0
0
快速上手React+TypeScript+Redux技术栈

2018年的六一儿童节已到,特此一篇来献给小盆友们。此处应该有掌声.... 写在前面: 首先,什么是TypeScript? 官方原话:TypeScript is a typed superset of JavaScript that complies to plai...

黄二白
2018/05/30
0
0
复杂 React 应用中的TypeScript 3.0实践

复杂 React 应用中的TypeScript 3.0实践 $ cd my-ts && npm init -y$ yarn add typescript tslint tslint-react --dev $ yarn add #types/history #types/react #types/react-dom #types/re......

icepy
2018/08/16
0
0
React & Redux in TypeScript - 静态类型指南

翻译自 react-redux-typescript-guide,作者:Piotrek Witek 翻译自 TypeScriptでRedux Thunkを使う,作责:Yusuke Mori 参考文章 TypeScript 2.8下的终极React组件模式 概述:最近在学习 re...

FatGe
03/25
0
0
初次尝试使用typescript开发react-native

typescript是javascript的超集,在javascript的基础上添加了可选的静态类型,非常适合团队开,这次我们尝试使用typescript来开发react-native应用 搭建react-native开发环境 安装yarn和react...

力谱宿云
2017/02/16
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

分享一个 pycharm 专业版的永久使用方法

刚开始接触Python,首先要解决的就是Python开发环境的搭建。 目前比较好用的Python开发工具是PyCharm,他有社区办和专业版两个版本,但是社区版支持有限,我们既然想好好学python,那肯定得用...

上海小胖
30分钟前
4
0
Spring Cloud Alibaba 实战(二) - 关于Spring Boot你不可不知道的实情

0 相关源码 1 什么是Spring Boot 一个快速开发的脚手架 作用 快速创建独立的、生产级的基于Spring的应用程序 特性 无需部署WAR文件 提供starter简化配置 尽可能自动配置Spring以及第三方库 ...

JavaEdge
今天
7
0
TensorFlow 机器学习秘籍中文第二版(初稿)

TensorFlow 入门 介绍 TensorFlow 如何工作 声明变量和张量 使用占位符和变量 使用矩阵 声明操作符 实现激活函数 使用数据源 其他资源 TensorFlow 的方式 介绍 计算图中的操作 对嵌套操作分层...

ApacheCN_飞龙
今天
8
0
五、Java设计模式之迪米特原则

定义:一个对象应该对其他对象保持最小的了解,又叫最小知道原则 尽量降低类与类之间的耦合 优点:降低类之间的耦合 强调只和朋友交流,不和陌生人说话 朋友:出现在成员变量、方法的输入、输...

东风破2019
昨天
25
0
jvm虚拟机结构

1:jvm可操作数据类型分为原始类型和引用类型,因此存在原始值和引用值被应用在赋值,参数,返回和运算操作中,jvm希望在运行时 明确变量的类型,即编译器编译成class文件需要对变量进行类型...

xpp_ba
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部