Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to add ReactNative to Android native APP for mixed development". The content is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to add ReactNative to Android native APP for mixed development".

Integration steps

Refer to official documentation-> react native documentation

This article uses the development environment Android studio

Note that the SDK supported by * * React Native is 16 (android4.1).

Npm environment, friends install nodeJS by themselves. You can refer to the official documentation to install the environment. If you have any questions, you can send 411437734@qq.com to communicate.

Create an Android project (existing projects are skipped)

1. Open Android studio

two。 Enter the project name, select the project directory, and click next

By now, the project has been created (it should be noted that the React Native support for * * SDK version is 16 android4.1)

ReactNative is integrated into the ReactNativeAPPDemo we created above

Refer to Facebook react native documentation

1. Enter the project root directory and add JS to the project-click Terminal in Android studio (figure below)

Execute the statements separately

Npm init npm install-- save react react-native curl-o. Flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

Init mainly generates package.json files according to reminders.

Install-save react react-native installs React and React Native

Curl-o. Flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig download .flowconfig file

Reference picture

Check for node_modules in the project, indicating that the installation of react and react native is complete

Add. Flowconfig to the root of the project

Refer to the following figure

You can also manually create the content creation file by opening the https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig URL in the browser.

Content related to ReactNativeAppDemo configuration

1. Add "start": "node node_modules/react-native/local-cli/cli.js start" to the package.json file before the scripts tag is modified

After modification

two。 Add an index.android.js file to the project

'use strict'; import React from' react'; import {AppRegistry, StyleSheet, Text, View} from 'react-native' Class HelloWorld extends React.Component {render () {return (Hello, World)} var styles = StyleSheet.create ({container: {flex: 1, justifyContent: 'center',}, hello: {fontSize: 20, textAlign:' center', margin: 10,},}); AppRegistry.registerComponent ('HelloWorld', () = > HelloWorld)

At this point, the React native configuration is basically complete.

3.App build.gradle configuration

Dependencies {... Compile "com.facebook.react:react-native:+" / / From node_modules.}

Be careful not to use the one in maven here, because we are using the one from our local node_modules. Note that the version of * supports 23compatLay v7api 23.0.1, and there is no api for trial 24 yet.

Build.gradle configuration of the whole project

Allprojects {repositories {... Maven {/ / All of React Native (JS, Android binaries) is installed from npm url "$rootDir/node_modules/react-native/android"}}.}

Add to AndroidManifest.xml:

Determine External Libraries

Make sure it is *, for example, 0.34.1 instead of 0.20.1. If it appears, please check

Maven {`url "$rootDir/../node_modules/react-native/android" `/ / address is correct} modify url "$rootDir*/..*/node_modules/react-native/android" to url "$rootDir/node_modules/react-native/android"

Add native code

Officially given.

An easier way will be provided in the * version, which is, yes, inheritance.

Here we also need to customize an Application, otherwise the runtime will report an error. Unbelieving friends can give it a try.

So far, ReactNative integration into existing projects has been completed! Can't wait to run it!

Run npm start in Terminal, and the following figure indicates that the startup is successful.

The following error was found after running

React-native error: Could not get BatchedBridge, make sure your bundle is packaged correctly

Don't be nervous, this is because bundle is not packed. The compiled and packaged js file was not found. In fact, the default address of android studio to find js files is different from the address used by react-native 's own tools to compile.

Solution method

Method one

Enter the project and create a new assets directory under android/app/src/main. Execute the following command

$> react-native start > / dev/null 2 > & 1 & $> curl "http://localhost:8081/index.android.bundle?platform=android"-o > app/src/main/assets/index.android.bundle"

Execute under the project root directory

$> (cd project name / & &. / gradlew assembleDebug)

Install the created apk to the android device

Method two

Enter the project and create a new assets directory under android/app/src/main

Start the server

$> react-native start $> react-native bundle-platform android-- dev false-- entry-file index.android.js-- bundl

The index.android.bundle file is generated under the assets folder, and the created apk file is installed to the android device.

Method three

Enter the project and create a new assets directory under android/app/src/main

Configure the following code in package.json

"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start", "bundle-android": "react-native bundle--platform android-dev false-entry-file index.android.js-bundle-output app/src/main/assets/index.android.bundle-sourcemap-output app/src/main/assets/index.android.map-assets-dest android/app/src/main/res/"}

Personal recommendation method 3, method 3 can not solve the recommendation method 2 manual execution

Modify the package.json file just now

If the real machine (simulator) needs to execute

Adb reverse tcp:8081 tcp:8081

Be sure to connect to the network!

Happy to develop it!

Other problems that may be encountered

ReactNative is compatible with 64-bit Android phones.

Libgnustl_shared.so "is 32-bit instead of 64-bit similar error

Solution method

Add a line of android.useDeprecatedNdk=true to the gradle.properties in the root directory of the project.

Add the following code to the build.gradle file

Android {... DefaultConfig {... Ndk {abiFilters "armeabi-v7a", "x86"} packagingOptions {exclude "lib/arm64-v8abrealm-jni.so"}

The operation of the Genymotion simulator shows that it is not connected to the developement server, as shown in the following figure

Check to see if you are connected to the network first

Click the Menu menu in the simulator to pop up the following picture, and click Dev Settings

4. Click Debug Server host & port for device under Debugging to fill in the address and port

These are all the contents of the article "how to add ReactNative to Android Native APP for mixed Development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.