ReactNative之View学习
[TOC]
概述作为创建 UI 时最基础的组件,View 是一个支持 Flexbox 布局、样式、一些触摸处理、和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。不论在什么平台上,View 都会直接对应一个平台的原生视图,无论它是 UIView、div还是 android.view.View。下面的例子创建了一个 View,包含了两个有颜色的方块和一个自定义的组件,并且设置了一个内边距:
1234567891011121314151617class ViewColoredBoxesWithText extends Component { render() { return ( <View style={{ flexDirection: "row", height: 100, padding: 20 }} > <View style= ...
定时器的使用
[TOC]
概述定时器是一个应用中非常重要的部分。React Native 实现了和浏览器一致的定时器 Timer。
定时器
setTimeout, clearTimeout
setInterval, clearInterval
setImmediate, clearImmediate
requestAnimationFrame, cancelAnimationFrame
requestAnimationFrame(fn)和setTimeout(fn, 0)不同,前者会在每帧刷新之后执行一次,而后者则会尽可能快的执行(在 iPhone5S 上有可能每秒 1000 次以上)。
setImmediate则会在当前 JavaScript 执行块结束的时候执行,就在将要发送批量响应数据到原生之前。注意如果你在setImmediate的回调函数中又执行了setImmediate,它会紧接着立刻执行,而不会在调用之前等待原生代码。
Promise的实现就使用了setImmediate来执行异步调用。
InteractionManager原生应用感觉如此流畅的一个重要原因就是在互动和动画的过程中避 ...
前端MVVM模式及其在Vue和React中的体现
[TOC]
概述文章参考:https://segmentfault.com/a/1190000016841537
MVVM相关概念1) MVVM典型特点是有四个概念:Model、View、ViewModel、绑定器。MVVM可以是单向绑定也可以是双向绑定甚至是不绑定
2) 绑定器:声明性的数据和命令,存在于ViewModel之中,让ViewModel和Model二者进行自动或手动通信,接下来的“MVVM在React中对应关系”小节有举例说明。
3) MVVM本质上是M- V-C-VM,它是在MVC的基础上增加了一层VM,只不过C变弱了,被并入到M概念中,VM用于分离V和M,并且让用户避免由于直接操作V层的DOM而带来的繁琐和效率低下,MVVM使开发更高效,结构更清晰,增加代码的复用性。
4) 在不同的GUI(图形用户界面)上进行展示时,Model、Controller、View-Model能够复用,只需把View层进行替换。
5) 在不同类型的UI(用户界面)上进行展示时,Model、Controller能够复用,只需把View-Model、View层进行替换。比如:假设我们开发的是一 ...
ReactNative开发环境搭建
[TOC]
在如今的 App 中,已经有成千上万的原生 UI 部件了——其中的一些是平台的一部分,另一些可能来自于一些第三方库,而且可能你自己还收藏了很多。React Native 已经封装了大部分最常见的组件,譬如ScrollView和TextInput,但不可能封装全部组件。而且,说不定你曾经为自己以前的 App 还封装过一些组件,React Native 肯定没法包含它们。幸运的是,在 React Naitve 应用程序中封装和植入已有的组件非常简单。
和原生模块向导一样,本向导也是一个相对高级的向导,我们假设你已经对 Android 编程颇有经验。本向导会引导你如何构建一个原生 UI 组件,带领你了解 React Native 核心库中ImageView组件的具体实现。
ImageView 示例在这个例子里,我们来看看为了让 JavaScript 中可以使用 ImageView,需要做哪些准备工作。
原生视图需要被一个ViewManager的派生类(或者更常见的,SimpleViewManager的派生类)创建和管理。一个SimpleViewManager可以用于这个场景,是因 ...
ReactNative开发环境搭建
[TOC]
文章参考:https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file
解决方法:增加tsConfig.json文件。至于tsConfig文件的格式,后续需要认真学习。
ReactNative开发环境搭建
[TOC]
概述具体原因:http://www.ojit.com/article/1310281
ReactNative开发环境搭建
[TOC]
概述文章参考:https://blog.csdn.net/qq_28978893/article/details/79107243
文章参考:https://blog.csdn.net/qq_21937107/article/details/91981921
文章参考:https://www.twblogs.net/a/5c7c1c98bd9eee339918c505/zh-cn
文章参考:https://blog.csdn.net/qq_38719039/article/details/79469634
社区版本的照相机:
官方git文档:https://github.com/react-native-community/react-native-camera
先看react-native-camera的集成步骤:https://react-native-community.github.io/react-native-camera/docs/installation
ReactNative开发环境搭建
[TOC]
概述TS1192: Module ‘“/Volumes/repos/tc-web-ts/node_modules/@types/react/index”‘ has no default export.
解决方法:把”allowSyntheticDefaultImports”: true添加到tsconfig.json
TS7016: Could not find a declaration file for module ‘../styledComponents/loginAndRegister’. ‘/Users/michealye/Desktop/myProduct/shebao520-mobile/src/components/styledComponents/loginAndRegister.jsx’ implicitly has an ‘any’ type.
解决方法:没有指定类型 Ed ...
ReactNative开发环境搭建
[TOC]
概述文章参考:https://github.com/styled-components/styled-components/issues/1642
我们通过安装node依赖:https://www.npmjs.com/package/@types/node
使用ts2339 property 'state' does not exist on type 的错误
[TOC]
概述文章参考:https://stackoverflow.com/questions/51090887/property-state-does-not-exist-on-type-fetchperiod
我们添加typescript的依赖:
12npm install --save-dev @types/react @types/react-dom