1、为什么使用typeScript?

typeScript是JavaScript的超集

typeScript在编译期间就可以将错误抛出

增强代码的可阅读性和可维护性


2、案例的功能逻辑

切换职业

选择服务区域

选择服务品种

选择服务承诺


3、使用命令创建react Native的typescript

详情参考react Native中文官网https://reactnative.cn/docs/typescript#__docusaurus

react-native init MyAwesomeProject --template typescript

4、使用第三方库和声明文件

yarn add react-native-modal
yarn add react-native-vector-icons
yarn add --dev @types/react-native-vector-icons


5、使用样式

import {StyleSheet} from ''react-native;

const style = StyleSheet.create({
container:{
flexDirection:;'row';
}
})

6、使用图标

import Icon from "react-native-vector-icons/FontAwesome";

<Icon name='check' size={12}/>
react-native link react-native-vector-icons

PureComponent通过prop和state的浅比较来实现shouldComponentUpdate

react+Native使用typeScript的更多相关文章

  1. 使用Visual Studio Code和typescript 开发调试React Native项目

    关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...

  2. 使用TypeScript创建React Native

    ⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html ⒉安装React Native官方的脚手架工具 npm i ...

  3. React Native相关

    安装相关工具参考(视频):http://ninghao.net/course/3001?a=26 学习参考:http://reactnative.cn/ 学习参考:http://www.ruanyif ...

  4. Hybrid App 和 React Native 开发那点事

    简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...

  5. [翻译]Review——24 tips for React Native you probably want to know

    Post author: Albert Gao Post link: http://www.albertgao.xyz/2018/05/30/24-tips-for-react-native-you- ...

  6. 用 React 编写移动应用 React Native

    转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...

  7. React Native工程中TSLint静态检查工具的探索之路

    建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...

  8. React Native v0.4 发布,用 React 编写移动应用

    React Native v0.4 发布,自从 React Native 开源以来,包括超过 12.5k stars,1000 commits,500 issues,380 pull requests ...

  9. 我也开源... React Native Messager

    近期有空,玩转React Native. https://github.com/andyc365/ReactNativeMessager React Native Messager A React N ...

  10. Xamarin vs React Native vs Ionic vs NativeScript: Cross-platform Mobile Frameworks Comparison

    CONTENTS Reading time: 14 minutes Cross-platform mobile development has long been a viable alternati ...

随机推荐

  1. Springboot整合策略模式概念->使用场景->优缺点->企业级实战

    一.前言 策略模式可能是在工作中使用最多的,也是在面试中最常提到的,代码重构和优化的必备! 小编之前也是一直说,其实没有真正的实战:最近有了机会实战了一下,来分享一下使用心得和在企业级的使用! 二.策 ...

  2. 如何进行动态ip的域名解析设置?

    如何进行动态ip的域名解析设置?目前,有一部分域名客户出于节省成本.技术验证等因素,会把自己家里或是部门的电脑用来当做Web服务器.mail服务器或是ftp服务器.如果想提供给其他人长期浏览,一般都要 ...

  3. drf基础:1、web应用模式、API接口、接口测试工具

    drf入门 一.web应用模式 ​ web的应用模式共分为两种,前后端不分离.前后端分离 1.前后端混合 ​ 之前所写的bbs项目就是前后端不分离,后端人员在开发过程中使用模板语法,前后端都由一个人员 ...

  4. 华为云服务器8000通道映射到本地,本地浏览器访问jupyter

    首先你得有个华为云服务器(这不是废话) 第二你得开放它的端口(重点) 第三打开本地cmd 输入ssh -L [客户端IP或省略]:[客户端端口]:[服务器IP]:[服务器端口] [登陆服务器的用户名] ...

  5. Collection集合常用功能-Iterator接口介绍

    Collection集合常用功能 Collection是所有单列集合的父接口,因此在Collection中定义了单列集合(List和Set)通用的一些方法,这些方法可用于操作所有的单列集合.方法如下︰ ...

  6. java应用定位高cpu占用几步操作

    1.top获取高cpu占用的pid,如266202.查看pid的线程情况, top -H -p 266203.把cpu高占用的线程号转为16进制,printf "%x" 26652 ...

  7. python学习第四周总结

    异常常见类型 异常处理语法结构 异常补充处理 异常处理实战应用 生成器对象 自定义生成器range()功能 yield冷门用法 生成器表达式 模块简介 模块的分类 导入模块的两种句式 导入模块补充说明 ...

  8. 开源分布式支持超大规模数据分析型数据仓库Apache Kylin实践-上

    @ 目录 概述 定义 特性 术语 技术概念 架构和组件 生态圈 部署 Docker部署 基于hadoop环境安装 前置条件 安装 使用步骤 官方样例Cube说明 示例演示 准备演示数据 创建项目 选择 ...

  9. 快速入门API Explorer

    摘要:华为云API Explorer为开发者提供一站式API解决方案统一平台,集成华为云服务所有开放 API,支持全量快速检索.可视化调试.帮助文档.代码示例等能力,帮助开发者快速查找.学习API和使 ...

  10. RestTemplate的超全讲解(全)转

    RestTemplate的超全讲解(全)转 https://blog.csdn.net/weixin_47872288/article/details/121842374 (81条消息) RestTe ...