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. [R语言] R语言PCA分析教程 Principal Component Methods in R

    R语言PCA分析教程 Principal Component Methods in R(代码下载) 主成分分析Principal Component Methods(PCA)允许我们总结和可视化包含由 ...

  2. 《Effective C++》构造、析构、赋值运算

    Item 05:了解C++默默编写并调用了哪些函数 总结:编译器可以暗自为class创建default 构造函数.copy构造函数.copy assignment操作符,以及析构函数. (这一小节比较 ...

  3. 你知道这个提高 Java 单元测试效率的 IDEA 插件吗

    前言 2023年我们公司主抓代码质量,所以单元测试必不可少,而且都写到了年底的绩效目标中了.在考虑如何达成这个目标的过程中,我发现了一个关于单元测试的IDEA插件--SquareTest,它可以帮助我 ...

  4. Python3+Selenium3自动化测试-(七)

    在实际定位元素的过程中,发现有一种情况让人很是恼火,根据xpath路径定位,感觉像是没错哦,但是执行时就来一个报错信息--为什么呢? 多表单切换 例如我们登录网易邮箱时就会发现,定位登录框时,一个嵌套 ...

  5. Java基础1-1-4—java基础语法(循环+随机数)

    4.循环+随机数 4.1 循环语句-for循环 循环 特征:1.重复做某件事情 2.具有明确的开始和停止标志 for循环格式介绍 public static void main(String[] ar ...

  6. 一幅图像为f=[1 4 7;2 5 8;3 6 9],设kx=1.8,ky=1.3,试采用最邻近插值对其进行放大,写出新图像矩阵。

    一幅图像为f=[1 4 7;2 5 8;3 6 9],设kx=1.8,ky=1.3,试采用最邻近插值对其进行放大,写出新图像矩阵.(请写出解题步骤,并编写程序进行结果验证) 参考 matlab代码如下 ...

  7. http协议的请求方式

    协议 协议,就是通信双方去定义的一堆数据格式,并且共同遵守的标准. HTTP协议 HTTP是一个基于TCP/IP通信协议来传递数据,包括html文件.图像.结果等,即是一个客户端和服务器端请求和应答的 ...

  8. Spingboot 程序在linux 上发布

    1.Linux 安装JDK(略)参考之前的文章 2.创建springboot 程序 项目文件结构 注意 controller包要与Application 同一级 设置tomcat 端口 运行本机测试 ...

  9. 3分钟教你安装 Dropzone4 文件拖拽增强工具 中文破解版 亲测有效

    Dropzone下载 下载直通车:立即下载 安装教程 打开我给你提供的Dropzone4 安装包 鼠标选中第一个程序拖到第二个程序里 在启动台打开 会出现下面情况 不要慌 点击好  去访达找到对应的软 ...

  10. Seata分布式事务

    使用Seata版本:1.6.1(2023/2/6最新版)该版本存在很多坑,相较于1.0版本,配置上存在很多差别,如果你的版本不同,请不要参考本文. 1.6.1配置存在许多问题,比较难找,如果你使用1. ...