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. 如何使用 Blackbox Exporter 监控 URL?

    前言 监控域名和 URL 是可观察性的一个重要方面,主要用于诊断可用性问题.接下来会详细介绍如何使用 Blackbox Exporter 和 Prometheus 在 Kubernetes 中实现 U ...

  2. centos更新glibc-2.28

    vps安装alist时提示glibc版本太老,找了一圈教程,就这个解决了问题. 原文: https://www.cnblogs.com/FengZeng666/p/15989106.html

  3. AcWing第85场周赛

    这场周赛是手速局hh 死或生 某国正在以投票的方式决定 2 名死刑犯(编号 1∼2)的生死. 共有 n 组人员(编号 1∼n)参与投票,每组 10 人. 每组成员只参与一名死刑犯的投票,其中第 i 组 ...

  4. nodejs 升级后, vue+webpack 项目 node-sass 报错的解决方法

    1.npm i node-sass -D 在错误提示里有给出了方案,重新构建 node-sass,命令如下: npm rebuild node-sass --force 如果执行完成后不报错,就可以了 ...

  5. 【Redis场景3】缓存穿透、击穿问题

    场景问题及原因 缓存穿透: 原因:客户端请求的数据在缓存和数据库中不存在,这样缓存永远不会生效,请求全部打入数据库,造成数据库连接异常. 解决思路: 缓存空对象 对于不存在的数据也在Redis建立缓存 ...

  6. 默认方法:negate-集合信息筛选

    默认方法:negate "与"."或"已经了解了,剩下的"非"(取反)也会简单.默认方法negate的JDK源代码为︰ 集合信息筛选 数组当 ...

  7. 找了几个 Solon 的商业落地项目案例!

    Solon 是啥?是一个高效的 Java 应用开发框架:更快.更小.更简单.(代码仓库:https://gitee.com/noear/solon) 提倡: 克制.简洁.开放.生态 启动快 5 - 1 ...

  8. NetCoreWebApi3.0-------MiniProfiler使用教程

    参考博客:ASP.NET Core WebAPI中的分析工具MiniProfiler - LamondLu - 博客园 (cnblogs.com) 注意事项: 1.不要盲目copy别人的代码 var ...

  9. 第九周总结-MySQL、前端

    多表查询的两种方式 1.连表操作: 1.1: inner join:内连接,将两张表共同的部分连接在一起生成一张新表.凭借顺序是把后面的表拼在前面表的后面,如果颠倒位置结果不同. select * f ...

  10. 学习ASP.NET Core Blazor编程系列二十五——登录(4)

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...