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. kafka详解(03) - kafka JAVA API

    kafka详解(03) - kafka JAVA API Producer (生产者)API 消息发送流程 Kafka的Producer发送消息采用的是异步发送的方式.在消息发送的过程中,涉及到了两个 ...

  2. [深度探索C++对象模型]关于成员初始化列表(member initiallization list)

    四种特殊情况: 1.当初始化一个reference member时. 2.当初始化一个const member时. 3.当初始化一个base class的constructor,而它拥有一组参数时. ...

  3. MAC中Flutter下载和安装

    Flutter官网 https://flutter.dev/docs/development/tools/sdk/releases?tab=macos   一.终端下配置系统环境变量和镜像 我的mac ...

  4. VUE assets里的scss没有引用会被打包进代码里,本地代码和打包后的代码样式不一致解决办法

    1.打包部署后,发现样式和本地运行时候代码不一致 经过排查发现 这个路径的文件被打包进去了,但是我并没有引用这个文件啊啊啊啊啊a~~~~ src\assets\webgl-assets\scss\st ...

  5. 基于NOSTR协议的“公有制”版本的Twitter,去中心化社交软件Damus用后感,一个极端走向另一个极端

    最近,一个幽灵,Web3的幽灵,在网络游荡,它叫Damus,这玩意诠释了什么叫做病毒式营销,滑稽的是,一个Web3产品却在Web2的产品链上疯狂传销,各方大佬纷纷为其背书,到底发生了什么?Damus的 ...

  6. C/C++内存对齐原则

    C/C++内存对齐 what && why 当用户自定义类型时(struct 或 class),编译器会自动计算该类型占用的字节数. C/C++ 为什么要内存对齐?我道行太浅,摘抄了网 ...

  7. Flex布局专题

    Flex布局专题 参照 https://www.runoob.com/w3cnote/flex-grammar.html 下面是自己看代码的一下 小结,和认识,加笔记,加原文 认识容器 flex布局需 ...

  8. UBUNTU18.04安装CUDA

    1.官方教程https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html#ubuntu-installation 2.在h ...

  9. 跟着廖雪峰学python 005

    ​ 函数的调用.定义.参数 ​编辑 #######命名关键字参数没完 abs()函数:绝对值 >>> abs(100) 100 >>> abs(-20) 20 ma ...

  10. 关于Powerlink和EtherCAT的对比

    https://www.amobbs.com/thread-5679636-1-2.html 转发自:http://book.2cto.com/201508/55093.html 这个问题经常会被人问 ...