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. BZOJ4919 大根堆(树形dp+线段树合并)

    用 multiset 启发式合并贪心维护 LIS 的做法就不多说了,网上题解一大堆,着重讲一下线段树合并维护 \(dp\). \(O(n^2)\) 的 \(dp\) 非常显然.离散化后,设 \(dp[ ...

  2. Spark详解(06) - SparkSQL

    Spark详解(06) - SparkSQL Spark SQL概述 什么是Spark SQL Spark SQL是Spark用于结构化数据(Structured Data)处理的Spark模块. ( ...

  3. [LeetCode]爬楼梯

    题目 假设你正在爬楼梯.需要 n 步你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: ...

  4. pip19.2.3升级到20.3.3版本升级失败问题

    2021-01-06 macOS版本:11.1 安装pip: sudo easy_install pip   话不多说,直接上问题   一行命令搞定 终端:sudo pip install --upg ...

  5. AIGC 很火,想微调个自己的模型试试看?(不是卖课的)

    去年,我们发布过一篇关于 DreamBooth 编程马拉松的活动通知,获得了全球社区的广泛关注和参与,中国社区的成员们也对这个活动有非常高的热情.同时我们也收到了后台留言反馈说参与活动需要使用的 Go ...

  6. py教学之列表

    列表是什么 list 是一些元素按照一定顺序排列的元素集合 序列是 Python 中最基本的数据结构. 序列中的每个值都有对应的位置值,称之为索引,第一个索引是 0,第二个索引是 1,依此类推. Py ...

  7. 炫酷科技感黑客感瀑布流html代码

    效果如下 代码如下 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" ...

  8. css之transform属性的使用

    1.定义:Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等. 2.常用的属性值: (1)translate(移动):   这个属性值里面含有三个参数,依次 ...

  9. 【随笔记】SiliconLabs Android aar 库使用

    一.导入库文件 1. 拷贝以下两个文件到工程的 libs 目录下 ble_mesh-android_api_high-release.aar ble_mesh-android_api_low-rele ...

  10. CF1466H Finding satisfactory solutions

    CF1466H Finding satisfactory solutions 这题厉害了! 先考虑已知 \(b\) 如何求合法的 \(a\).由于是排列,就想和置换环扯上关系.考虑将 \(i\) 与 ...