Geekly Articles each Day
📜 ⬆️ ⬇️

React Native - one JS is not enough

So, it's time to quickly plunge into the topic. To enhance the effect, I use different techniques for converting information into knowledge. In particular, I present a summary of the report by Alexey Androsov (senior interface developer, Yandex).


React Native is a framework for developing cross-platform applications for iOS and Android:



Is he first? Not!



Developer Tools



React Native: top view



React Native: An Inside Look



Write once, run everywhere? Not! Instead of the expected assumptions that the same code will be used repeatedly on different platforms. Learn once, write everywhere. Same application architecture (React for building the interface, Redux for the data cycle).

A little philosophy


Everything is native, so forget about the full cross-platform. The platforms are different, so the components are different. They have different logic and interaction mechanics. You can write everything on JS and throw out the concept of native, but you do not want it. Native is your advantage!


On the example of the Vine application in iOS. What do they do in iOS? At the bottom of the TabBar, it is customary to switch screens: main, profile, search. NavigationBar is on top, and it is customary to write the name and buttons on the left-right (usually the back is on the left, and some action on the right). And on Android, it's not like that. There is also a NavigationBar, but it is different, it’s not accepted to do buttons. There is a separate component for this, called ToolBar. In Android, it is customary to do SegmentedActivity - it is on top, very similar to iOS TabBar, but its mechanics are completely different. If we cannot swap screens in TabBar, we can do this in Android, and this is customary, and this is how it works.


Cross platform



What does an application consist of?



Components


The application is built from platform components - these are native modules wrapped in React components.




[This is what the real code looks like]


Interestingly, there are no buttons! For you, any button is just a stylized area that has a click handler. There is no button mechanics. And therefore, in React, there are these touchable elements, you wrap up anything and everything at you becomes a button in essence (there is an onPress handler). Scroll-s are a separate component. This is a segmented view. It renders only what is on the screen, and you need to work with it a little differently. Because ScrollView is also separate here. Separate mechanics if using a keyboard. Because there is a separate property - what to do with it. Separately property refreshControl. If someone knows how to develop on iOS, then this is very similar.



[This is what the text field looks like.]


Some properties coincide with the usual HTML input, while others do not.


CSS is not real - this is a polyfil




[CSS Example # 1]


The PixelRatio component converts the values ​​from density points to real pixels for different screens (Retina, etc.).



[CSS Example # 2]


Here is an example with flex. Enough minimum set to typeset.


Application pig




[Sample application code]



Has a number of problems:



In many ways, problems are solved with redux.



[Why is that bad?]


To launch some kind of a route, or make a back (rewind to another screen), you need to make a link to Navigator, and then get this link. And initially it will not be, because There is no Navigator yet.



[The interface looks like related components]



[And actually it looks like this]





In December 2015, Eric Vicenti organized the navigation-rfc project, with the help of the community, tried to solve the problems of Navigator. In February 2016, the project moved to the React Native master under the name NavigationExperimental and is now being developed by Facebook. And the old Navigation will no longer be supported.


NavigationExperimental - what's done




[Example Navigation Code]


Animations




[Sample animation code]


It works very smoothly, you can combine sequentially / in parallel, and do pretty crazy things.


Native modules


React Native implements the basic, but not all. If there is no module:



How to connect native modules


Use rnpm - React Native package manager:


$ rnpm link react-native react-native-google-analytics-bridge

Cross-platform component


The wrong way is to put everything into folders:



and connect them depending on the platform


The correct way is to put everything into folders:



For platform-dependent components (ComponentIOS, ComponentAndroid) it is convenient to put a dummy next to it, and not to experience problems that a component is not found on the platform.


How to write a native component



Final report, video from this place .


PS


A colleague threw a reference on Weex - two weeks ago, Alibaba handed over the Apache project.


And again inside Vue. Something it keeps getting under my feet all the time.


Only imbued with the ideas of React + Redux, I run with them like a madman with a chainsaw, trying to use them everywhere. And then what happens - unwrap the landing stage?


It will be very interesting to read the comparison, can anyone take - the topic on Habré is new.


')

Source: https://habr.com/ru/post/323214/

More articles:


All Articles