React-native first Experience (Android)

This article mainly consists of two aspects, how to integrate the RN (React-native) project into the existing Android project starting from 0, as well as some pits we have encountered in the first RN's on-line project.

To do the RN project for the first time, we chose to do a logical and relatively simple internal help center project for the transfer app. The entire project has 4 pages with the RN, the other pages go is native provided by the system jump protocol, jump to the corresponding native page or H5 page.

Integration of RN into Android projects

The init instructions provided by the React-native CLI help us to create a project for RN, but in many scenarios the RN is ported into native Android or iOS. For example, what should be done, on the Android page, click on a button to enter the RN page?

The following is a concrete implementation process.

1. Create a new Android project

Note Minimum SDK chooses API23 above, all the way next after finish.

2. Add JS

Open the terminal window of studio and enter the following command:

NPM Init
Will let you enter some configuration information for initializing the Package.json, for example:

Follow the prompts to enter the line.
Once this is done, the Package.json file is generated at the root of the project and the next step is to enter:

NPM install [email protected]--save
NPM Install [email protected]^0.44.0--save

Note that priority must be given to installing react.

About a two-minute look (if you're stuck here and see if you've forgotten to configure the image at the time of installation), you'll have a Node_modules folder under your root directory, which contains the downloaded react and react Native. There are children's shoes that may question why react and react-native dependencies are not written directly into Package.json, and then directly npm install, if this is done, NPM run start will report the following error:

Next, paste the following command into the scripts tag under the Package.json file

"Start": "Node Node_modules/react-native/local-cli/cli.js start"

Next, create the Index.android.js file in the root directory and paste the following code into it:

The code is simple, centered to show a HelloWorld.

3. Project configuration (Android)

To open the project with Android Studio, modify the Gradle scripts Build.gradle (module:app) file under Android root to add the following content, Note that the following APPCOMPAT-V7 version is 25.2.0, and I removed the dependency on test related in dependencies, avoiding unnecessary bugs.

adding dependencies in Build.gradle (project:***)

Continue to the next step to add network access in Androidmanifest.xml

4. Create activity

The following steps do not install the official website to do, the official website is too cumbersome, and has not been updated for a long time.

1. Create a new activity, let it inherit reactactivity, and rewrite Getmaincomponentname () to return the HelloWorld component that we registered in Index.android.js.

Don't forget to add this activity to the App/manifests/androidmanifest.xml file.

2. Customize a application, inherit reactapplication, and write the following code:

Remember to quote in Androidmanifest.xml

Android:name= ". App "

3. Add the Activity_main.xml file to the directory res/layout as follows:

Launch our reactnativeactivity via the button in the Mainactivity

New Assets folder under 4.app/src/main

Run the following command

React-native start

Then directly in the Android Studio project, click on the "Run" button above the toolbar, it should be OK.
If the card is in this step:

It's okay, use the Explorer to open your project's root directory, rerun a command line in this directory and enter the following command in it

React-native Bundle--platform Android--dev false--entry-file index.android.js--bundle-output app/src/main/assets/i Ndex.android.bundle--assets-dest app/src/main/res/

After completion, the following two files are generated in the assets directory

Confirm that the react native service is running, then run your app properly, click Start, if it appears

Congratulations to you! You have successfully entered the pit, but the actual project is not so simple!

Project Combat Pit   1. Technology Stack

ES6 + redux + react-redux + redux-thunk + react-navigation

2. Project ExperienceThe most common area of this project is the use of react-navigation:

1, the same page parameters are different, multiple fallback always go to the same page:
For example, the details page a/cateid/xy, when the different Cateid parameter "CD" to jump to the same detail page A/CATEID/CD, the page is normal change, but back to the time, the first time is to return to A/CATEID/CD, return to return is back to A/cateid /CD. The page render is not triggered.
Stacknavigator Navigation management of the page, when switching, not according to the Push,pop form of the stack, but by moving the pointer to the corresponding page, while marking this page is active.

The solution is through componentwillreceiveprops,shouldcomponentupdate and Componentdidupdate, When the Params.cateid in Nextprops and the current Params.cateid are different, the render of the page is triggered.

2, realize the gesture swipe right slide back function:
Official document Introduction, react-navigation in the root component of the Navigationoptions settings to add gesturesenabled:true, you can implement the sliding switch to switch the page, but the test does not take effect on the real machine.
Read the source to understand that the react-navigation internal is through the introduction of RN Panresponder gesture recognition system to realize the sliding mechanism, only when the Onmoveshouldsetpanresponder return True, To perform the next gesture action. The following are the specific methods of implementation:

Because the gesture_response_distance_horizontal in the above code is too small to always return false, change this value from 20 to 60.

3. Achieve page Jump animation effect

Stacknavigator (Routeconfigs, stacknavigatorconfig);

In the second parameter Stacknavigatorconfig configuration, can pass in mode: ' card ', this parameter will get the default sliding effect on the native side, iOS default is the effect of left and right switch, but the default is the top and bottom switch effect on the Android side. In order to achieve a unified cut-off effect.
Fortunately, React-navigation provides a transitionconfig interface that allows you to customize the slide-screen effect. Don't know how to customize it? No matter, the source code has been in the iOS to help us implement, a little modification of the codes can be.

Flatlist questions:

1.listheadercomponent,listfootercomponent
When the flatlist has a side-by-side component, it will appear, the other side of the component position is fixed (similar to the position fixed in CSS), the page only flatlist area can be scrolled, in order to achieve the overall page can be scrolled, The components above the flatlist need to be added to the flatlist listheadercomponent attribute, and the components below are added to the listfootercomponent.

2. By using the Getitemlayout, set the height in advance, you can less than one RN calculate the height of the render.

  Picture question:

There are two sources of images in 1.RN: Native internal images, CDN pictures.
Native internal pictures, directly through the require image name to take, must not add. png suffix.
For example:

Of course, we can use the internal images that are introduced through relative paths when we pack,

For example:

By configuring the –asset-dest package into the native native directory res, it is important to note that the bundle of Rn that is called out is only placed in the Android Assets folder to take the images stored in the Res directory according to the relative path.

CDN Pictures, only the width of the specified image well paid can be displayed.

handling of interactions with native

1. Nativemodules:native exposed modules can be obtained by Nativemodules objects.

2. Some scenarios require native to pass certain parameters directly to the RN end, and iOS can be passed through the call Initwithbundleurl, in the initialproperties parameter, Android writes parameters to the returned bundle via Getlaunchoptions. The root file in the RN project (for example, App.js) is taken directly through the This.props.key (key is the attribute name).

If you like our articles, follow our public number and interact with us.

React-native first Experience (Android)