Writing cross-platform apps with react native

Writing cross-platform apps with react native

React Native is a framework for writing applications that are rendered in real-time, native components of iOS and Android platforms. It is based on the React,facebook JavaScript library, in order to build the user interface, rather than the browser as the goal, it is the mobile platform for the purpose. In other words, if you're a web developer, you can use react native to write a clean, fast mobile app, and get a sense of the familiar framework and the code base of a single JavaScript.

Before that, we've heard the promise of using apps such as Cordova or titanium frameworks, so what happens if you use react native to develop apps? In this article, we will explore what react native is and how it works. Then we'll cover how the app using react native to write iOS and Android, and at the end, you'll see why react native is one of the most recommended options for your next mobile project development.

What is react Native?

Before we're ready to focus on the developer's experience, let's start by explaining what react native is and slightly designing how react native works.

It's just react.

React native is a library of JavaScript for writing user interface. is typically used on the web. Developed by Facebook and open source in 2013. React has witnessed a wide range of uses. The use of react in the field is relatively narrow, it only focuses on itself, by rendering the interface of the user interaction of your application. It is a rival to the general large MVC style library.

For a series of reasons, developers have been flocking to react. It is lightweight, and it provides a compelling behavior, especially for fast-changing data. And because of its own component structure, it encourages you to write more modular, reusable code.

But for the mobile side, React native is really just React. Here are some differences: you should use a view component instead of a div component, you should use an image tag, rather than an IMG tag, the vast majority of developers are kept almost the same, of course, if you have a certain objective-c or Java language knowledge, That would be better. For mobile developers, there are such wary considerations (am I doing multi-machine adaptation?). Has my touch point been set to large enough? However, React native will feel completely familiar and comfortable, of course, for developers who have learned how to develop in a browser with React.

It's really react.

The first, let a person to react native produce amazing feeling is react native is indeed native. The rest of the JavaScript engine for the mobile side is to package your JavaScript code into an optimized webview, perhaps these webview also implement interfaces for the behavior of some localized UI, such as animations, but ultimately, You are still writing a web app.

In react, a component describes its own features; React handles rendering for you. A clean abstraction layer separates the two functions. For the web side, in order to render components, react uses the standard HTML tags, this same abstraction layer, generally understood as "Bridge", can make react native to trigger the iOS and Android above the rendering API, which means that, in iOS, Your react native components draw a real UI view, but on Android they will draw native view.

You'll be writing code that looks pretty bad, similar to standard JavaScript, CSS, and HTML. Instead of just compiling the cost code down, React Native get your application, run it with the JavaScript engine of the hosting platform, and not block the main UI thread, so you'll get the effect of the native app's operation, animation, and experience. Instead of having to write code in the form of objective-c or Java. Other cross-platform app development patterns, such as Cordova or titanium, do not reach the same level of consistency as native experience or performance.

The experience of a better developer

React Native offers a more powerful developer experience than standard Android or iOS development, because your application is almost entirely JavaScript-based, and you will gain the benefits of a series of web development such as being able to instantly refresh your app to see the changes in your code. React native feels like a godsend compared to spending a long time waiting to build a traditional mobile app.

Working with multiple platforms

Thankfully, React native supports multiple platforms. The vast majority of React native APIs are cross-platform, so you just need to write a React native component that will work seamlessly on iOS and Android platforms. Facebook has advertised that their ad Manager application 87% code is reused in two platforms, but I've written a flashcard application that doesn't have a bit of platform-related code. If you really want to use some platform-related code – because of the different interactions between iOS and Android two platforms, for example, or the benefits of the API you want to reuse for a platform – it's also easy, React native allows you to specify a specific platform version, For each component, you can then integrate them into your react native version of the application.

Use react native to develop

Using a simple JavaScript code base to write a real iOS or Android native app looks like a mindless thing to do. So what is the work done with react native?

Begin

To start developing react native applications, you need to install some generic dependencies for iOS and Android platforms in addition to react native. Specific can be queried react native's website. Building react native is simple, if you have installed a new version of node, then you can use NPM install-g react-native-cli to install react native.

Once you have these dependent components installed, running react Native initializes the project name and will automatically generate a template for the React Native project.

General React components

Once your development environment is ready, it's time to write some real applications. As mentioned before, React native is really just React, but there are a few differences. The React native component looks more like a React component for a browser, but your basic building blocks have changed, such as a Div, IMG, or a label like P. React Native provides you with basic components such as text or view, and in the following example, the basic components ScrollView, touchablehighliht, and text components are used, all of which will be mapped to the Android and iOS-specified view. Using them to create a scrolling view, along with the appropriate touch processing, is straightforward:

var React = require (' react-native ');
var {ScrollView, touchablehighlight, Text} = React;
var Touchdemo = React.createclass ({
Render:function () {
return (
<ScrollView>
<touchabl Ehighlight onpress={() = Console.log (' pressed ')}>
<text>proper Touch handling</text>
</ touchablehighlight>
</ScrollView>
);
},
});

If you have not handled the syntax of HTML and JavaScript, it seems a bit confusing, react strongly suggest you use JSX, for react Native, you have no choice. The decoration of your rendering, which is used in conjunction with JavaScript to control its behavior, is often subject to strong opposition from the novice. But I strongly suggest you give it a chance.

Because the react native component is very similar to the react component, it is also very easy to convert react to react native.

Style sheet

To make drawing easier and more efficient, and to encourage easy-to-manage styling styles, React Native implements a strict subset of CSS. That means you don't have to learn to design your view in the way you specify the platform, but it will take you a little time to learn how to use the React native style.

The biggest difference is that you don't have to worry about the specified rules, because the inheritance of the styles is fairly streamlined, and react native uses the syntax of the inline style.

Here is an example of how a style sheet is created in react native:

var styles = StyleSheet.create({  container: {    flex: 1,    marginTop: 30  }});

Using the inline syntax, this style is used in this way:
<View style={styles.container}>
...
</View>

Start the development of the mobile end

React native a more complex area is the building of the development environment. When using react native for development, you need all the tools necessary for mobile development, as well as JavaScript editing tools: A text editor, and Chrome's Debugging tools.

For iOS, this means that Xcode is turned on and includes an iOS emulator. For Android, not Android Studio, you will use the command line tool. Eventually, you will also need to run the react native package. You can choose your favorite text editor to use to edit your JavaScript code.

The result is that you need to have a lot of tools around you. Sometimes it feels like there are too many tools, desktop clutter, too many desktop forms open is really annoying. On the other hand, at least react native does not hide the standard app development process for you.

Move to local code

React Native by providing a JavaScript interface to an already existing platform API, which means you can write to the general React code, and React Native "Bridge" will be responsible for heavy conversion work, But what happens when the bridge is not perfect?

Inevitably, with a new framework, such as react Native, there will be some APIs that will not be invoked, in which case the native code can be written and communicated between the host platform and the JavaScript code. Like what:

"RCTBridgeModule.h"@interface MyCustomModule : NSObject <RCTBridgeModule>@end@implementation MyCustomModuleRCT_EXPORT_MODULE();// Available as NativeModules.MyCustomModule.processStringRCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback){  callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"]]);}@end

Then, use your native module from the JavaScript module, including it as you would with another library:

varReact =require(' react-native ');var{nativemodules, Text} = React;varMessage = React.createclass ({getinitialstate () {return{text:' Goodbye world. '}; }, Componentdidmount () {NativeModules.MyCustomModule.processString (this. State.text, (text) = = {this. setState ({text});  }); }, render: function() { return (<text>{.  text}</text>); }});

You might use this, when an API you need is not supported, if you want to integrate existing OC code or Java code with react native, or you want to write some high-action functions to handle some intensive graphics processing. Happily, React native gives a very flexible way of writing code, using the native module when you need it, and this is straightforward. Even if you've never dealt with OC or Java before, writing a bridging code is a great exercise to get a pleasant feel in the development of the native mobile app.

Writing cross-platform apps with react native