Will the cross-platform framework of mobile apps be Terminator? Come to visit React Native and facebookreact from Facebook

Will the cross-platform framework of mobile apps be Terminator? Come to visit React Native and facebookreact from Facebook

Initial Exploration of React Native use February 06 2015

Facebook allows all React Conf participants to get a taste of the source code of React Native-a method for writing Native mobile apps. This method applies all the powerful functions of React. js to native applications. You can write Javascript-based components by using their embedded basic elements. These components are supported by iOS and Android controls.

First of all, I know that Facebook has not fully opened up its open source, but they are currently moving towards open source. They are now removing Code related to the Facebook environment and are preparing to establish a process for developers to contribute to and participate in the open-source project. I think it is a good thing for them to push towards open source, which means they really care about the React community. I believe this project will soon be fully open-source.

In fact, I do not think that the slow steps of open source are a fundamental mistake. If you think so, I will be happy to discuss it with you, but please allow me to put it in another topic.

If you are interrupted by the discussion, you may miss the discussion about how to write Native mobile apps through React Native today. The biggest difference is that it is used more like writing a network application.

I have been a veteran of iOS application development for many years. Therefore, I have many experiences in native application development. After linking with React Native, I can only use the following expressions to express my mood:

I believe we have heard of various Javascript-driven cross-platform native application development frameworks, such as Titanium, PhoneGap, and various other projects that allow conversion between different levels and native environments. All these frameworks seem to be frustrating: Whether you want to package a web application in a WebView, or want to harden HTML & CSS, the technology that is hard to use to build mobile applications. For the latter, you face the native object almost all the time, which is doomed to be a failure in terms of performance. React Native is different. Its layout is actually running in an independent thread, therefore, the UI main thread can be as free as possible as usual to render the interface animation and so on (it also provides flexbox to simplify the layout, this is not available in all frameworks ).

Here, you just need to have a taste of the infinite potential hidden by React Native. It makes you feel as comfortable as network development. In fact, you are developing a real native application. In fact, you cannot tell the difference. On the UI Layer, there is actually no difference at all. We use native UIViews that are as dazzling as normal.

This is actually the credit of software engineering. At the same time, this completely proves that React. js is the correct way to build a cross-platform application. I can use this method to write a native application just like a network application. We can start to use DOM as an implementation detail from now on, just like UIViews.

I do not deny that I like network programming very much. However, if we carefully examine every mistake step by step, we can easily ignore some major problems. Writing applications through network programming is basically a strange thing: the chaos caused by HTML and CSS will create barriers for various frameworks rather than making them better. Maybe React Native will eventually be the right way to guide you back on the right path. I'm looking forward to seeing how it turns network programming into a better mobile application programming method. Instead of imagining it as something that is contrary to network programming, we need to think of it as a prototype from network programming to another direction.

Are you confused? I will show you how React Native works through examples! Of course, you can learn more about this aspect through video here and here.

React Native uses JavaScriptCore on iOS to run Javascript (Android and other platforms will support it in the future ). One important thing is that it runs Javascript on an independent thread (the same is true for other frameworks such as Titanium ). There is no big difference between writing a control using Javascript and using React. js, except for View and Text instead of div and. You will get all the advantages of using React to generate the UI component (conservatively speaking, this is awesome !!!). Remember that JavaScript is not only a language, but also a platform. There are a lot of excellent "JS conversion" tools for you to use.

React Native sends the UI you have written in Javascript in another thread to the main UI thread with a minimum amount of data to bridge it into a Native component. For example, convert a View to a UIView. The most amazing thing is that you don't need to worry about updating the main UI thread to implement the latest changes. You just need to declare that you will need to perform a bridge transformation on the UI based on a certain state, react uses a unique algorithm to send the minimum required changes to the bridge to reflect the changes in the UI (Tiandi Zhuhai sub-rudder note: if you know the concept of incremental storage, it will be easy to understand ).

Writing a native UI is never so simple, and it won't happen like playing an animation or freezing it, Because JS runs in a thread independent of the main UI thread. Playing the animation will be smoother than taking laxatives!

A React Native-based OpenGL Application

My first React Native application is actually not a traditional application: I wrote a demo application of the object model before the wave. I personally have always been interested in game development, but I am very disgusted with writing native UIS. React Native just gave me a solution to compile the Native UI using the webpage UI.

I promise that you will see a lot of traditional app demonstrations such as native navigation and animation. I think it is cool to easily put React Native on OpenGL controls to do the corresponding work.

Integrating React Native into your project is actually a very simple task. You only need to create an RCTRootView in your controller type, and then tell it where your JS is, and add it to the window. In my attempt, I first created an OpenGL control and added the RCTRootView to the control as a sub-control. The integration process is completely painless. Oh, sorry, it is a completely painless process. (Tiandi Zhuhai sub-rudder Note: Recently, the TV and roadside advertisements have become dizzy, and advertisements such as painless people are everywhere. Seeing the word "Painless", the neural reflex immediately contacts the painless people)

You can press Cmd + R to immediately refresh your UI to implement any updates you have modified. Here, only the RCTRootView will be updated, so I can easily modify the ui and refresh the ui to get the most recent changes, without the need to reload the OpenGL layer.

The following is an example of a control that lists available files and loads a grid of ObjList controls after one of them is clicked. Here, we will use a ListView control that is the same as any other native application that is used only for scrolling display within the control. However, it is extremely simple to use it here.

var ObjList = React.createClass({  // a few methods clipped....  selectModel: function(file) {    controller.loadMesh(file);  },  renderRow: function(file) {    return View(      null,      TouchableHighlight(        { onPress: () => this.selectModel(file),          underlayColor: 'rgba(0, 0, 0, .6)' },        Text({ style: { height: 30, color: 'white' }}, file)      )    );  },  render: function() {    var source = this.getDataSource(this.props.files);    return ListView({      style: { flex: 1 },      renderRow: this.renderRow,      dataSource: source    });  }});

In my App Control, I have a handlSearch method to change the corresponding text input. Here, I made some changes to the control's status, while allowing the application and the ObjList control to receive the latest status changes to display the latest file list.

handleSearch: function(e) {  var text = e.nativeEvent.text;  var files = allFiles.filter(x => x.indexOf(text.toLowerCase()) !== -1);  this.setState({ files: files });}

Note the call of controller. loadMesh () in the ObjList control. This is actually a method of Objective-C. Here I have made it an export identifier, so that the bridge will find it and make it available in JS. Collaboration with bridging is actually a very simple task and will become simpler and simpler. The following is the implementation code of loadMesh:

- (void)loadMesh:(NSString *)path {    RCT_EXPORT();    dispatch_async(dispatch_get_main_queue(), ^{        teapotNode_.material.diffuse = [self randomColor];        teapotNode_.wavefrontMeshA = [REMeshCache meshNamed:path];        [self reset];    });}

RCT_EXPORT () identifies this method as an export method (in fact, there is a little more work to instantiate this class in other places ). These methods will be called in an independent thread, but what I need here is to load the mesh in the main thread (because this will load the data into OpenGL ), so here I queued up a piece of code running in the main thread in the network queue.

The following video will give you a more complete Demo: https://www.youtube.com/embed/OPFf53fdUmQ

In the declaration process, it is very powerful to build our UI control and implement corresponding capabilities for events generated by simple state changes. React. js must prove this. So far, we suddenly have to perform the same processing on the native application. "One-time learning and multi-platform writing" is what React developers advocate. For more information, see Facebook.

------------------

Repost, please respect originality/Translation	Public Account	CSDN
Tiandihui Zhuhai sub-Rudder	Service No.: TechGoGoGo	Http://blog.csdn.net/zhubaitian
Excellent resource recommendation	Address	Comments
DoctorQ blog	Http://testerhome.com/doctorq/topics	Talented in the android automation field, Pioneer in technology sharing,

Http://jlongster.com/First-Impressions-using-React-Native