RN Twins Effect
1. The technical system problems
React RN and a common abstraction layer, with respect to the front end, in fact closer to the Node RN operating environment
ReactNative =React +IOS +Android
When looking RN document, I would find that a piece of content Start Basics are React introduction of the Advanced chapter describes a lot of IOS and Android API
2. component design issues
Android and IOS some of the design components are not common, which means that the case had only returned a component on React, RN you may need to determine return the two versions of the platform components, why so? Because for many components, style differences between the two platforms is too great, it can only divide and rule.
3. static resources
RN general application and Web application there is a difference of some innate, RN application can be implanted in a predetermined static resources, that is, it does not require any time request, and can be used locally static resources, and Web applications trying to use this resource the need to go through at least one network requests and the cache, but the user may still be burned strong cleared caching operations.
This means that, when doing performance optimization may be able to start from a static resource, I read the following articles explore react native first screen rendering best practices
Learn a new way to optimize RN can map the fold through the static placeholder file. Of course, a lot of time thinking React optimization and RN are also common, for example,
- Pre-cached resources
- A long list of lazy loading, etc.
4. Label the entry into force
- <Div> can not use it, use <view>
- <P> tag does not take it, use <Text>
- No <img>, and replace it with <Image>
- Background, you can use this component ImageBackground
- The list can not be used ul / li friends, brothers with ListView component of it
- Various Input, you ~ can not use the input tag corresponding native controls, such TextInput, Picker, Switch, Slider
5. Events core issues
Web development, the click event is the core, and in the RN aimed at the mobile terminal, the position of the touch event is greatly enhanced, and in addition, also derived from the press events (JS I remember only double-click the event is not a long press event)
- onPressOut etc.
- onLongPress etc.
6.CSS3 property is limited, use animation effects completely changed
CSS / Animation I am not working, because the CSS has gone up, the underlying tone is to build a bridge with native UI
7. Virtual DOM to the evolution of virtual View
In React, we use virtual reality simulation DOM DOM node
In the RN, this object is replaced by virtual View, corresponds to the original view of life Taichung, because the RN has no DOM
8.UI presented changes
(Reference from the following: http://blog.ilibrary.me/2016/12/25/react-native-internal)
UI description and presentation of minutes left.
- html text description of what the page should function, css tells the browser that looks like.
- The browser engine by parsing html and css, translated into a number of pre-defined UI control column,
- Then call the operating system UI controls to the drawing instruction to draw the image presented to the user.
- Javascript dispensable, which is mainly used for a number of user events in response html, DOM operation, asynchronous network requests and some simple calculations.
In react native inside, 1 and 2 are the same, but also with html page description language which function, then stylesheet tells the browser engine for each control should look like. And and a browser with the same engine.
In step 3 there no longer UI controls browser built-in controls, but react native UI controls its own implementation of a (two, android set, iOS a), the handover is carried out in MessageQueque, and further You may find that they tag is not the same. Reference Links: http://blog.ilibrary.me/2016/12/25/react-native-internal
RN Grand View Garden
- IOS9 only supports https, http to load the network image resources is invalid
- React-native内置babel转换器和ES6的polypill
- RN使用的引擎是safari的引擎而我们一般调试的时候用的是Chrome的V8引擎
- 遇到频繁修改属性的场景，为了避免影响性能，建议使用setNativeProp直接修改属性，而不是走setState的流程
- 测试元素和包裹容器的距离，在普通场景中我们可能会考虑scrolltop，offsetTop等一堆属性，在RN中可以通过一个方法，叫measure和measureLayOut，能分别测以某个元素为参考点的相对位置和绝对位置
- RN相对于普通web应用，增加了一个属性叫hsl，可以指定：色度-饱和度-亮度，是不是感觉和rgba很类似的作用呀
- 如果访问的一些API，但是RN平台暂时没有做封装，就需要自己用Object-C或者Android实现
- 数据库： RN是移动端应用，那不就意味着可以用Android等的数据库或者文件系统了吗？ 在RN中这似乎被封装成了AsyncStroage,如果觉得API还不能满足的话，可以用社区里的一个高性能的RN库——realm
- 后台任务可以很方便的用了，就像web-worker一样
- 编写跨平台代码时候，RN专门提供了Platform对
- Plaform.OS: 返回平台名称，比如iOS或者android
- Plaform.Version: 返回版本
- Plaform.select: 方法，接收一个对象，可以分别指定ios和android环境下的返回值，酌情返回
12.导航有提供专门的模块：比如react-navigation和react-native-navigation
13.动画要用Animated控件，不能自己写CSS3的动画属性了，比如Animation和transition