(React-Native 7) Rn hybrid development -- the Activity directly references the React native component,

(React-Native 7) Rn hybrid development -- the Activity directly references the React native component,
Introduction:

During the hybrid development of Activity and ReactNative, we sometimes need to directly introduce the already written reactNative js component. In this case, we need to understand how the Activity References ReactNative. This article describes how to directly apply a written ReactNative component to an Activity.

Step 1: Create a project in AndroidStudio:

1.1 run the following command to enter the project root directory:

> npm init> npm install react react-native --save

Generated as follows: node_noudle and package. json

1.2 package. json:
// Add command:
// Add the dependency. If no dependency is generated, add the preceding command and execute npm install or yarn install:

{  "name": "androidkissrn",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "node node_modules/react-native/local-cli/cli.js start"  },  "author": "zhaoq",  "license": "ISC",  "dependencies": {    "react": "^16.2.0",    "react-native": "^0.51.0"  }}

2. gradle Configuration:

// Project root directory gradleallprojects {repositories {jcenter () maven {url 'https: // maven.google.com '} // 2, configure the maven library to specify the node_modules module maven {// All of React Native (JS, Android binaries) is installed from npm url "$ rootDir/node_modules/react-native/android "}}}

// Configure dependencies in gradle in App moudle {// 3 and add gradle dependency: compile "com. facebook. react: react-native: +" // From node_modules .}

3. Code:

Permission check:

// 1. Check the permission: configure the permission so that the red screen error in Development correctly shows the permission to enable the floating window. if (Build. VERSION. SDK_INT> = Build. VERSION_CODES.M) {if (! Settings. canDrawOverlays (this) {Intent intent = new Intent (Settings. ACTION_MANAGE_OVERLAY_PERMISSION, Uri. parse ("package:" + getPackageName (); startActivityForResult (intent, 154 );}}

Index. js file:

Import React from 'react '; import {AppRegistry, StyleSheet, Text, View} from 'react-native'; class HelloWorld extends react. Component {render () {return (
         
  
   
Rn Interface
        
 )} Var styles = StyleSheet. create ({container: {flex: 1, justifyContent: 'center',}, hello: {fontSize: 20, textAlign: 'center', margin: 10 ,},}); appRegistry. registerComponent ('myreactnativeapp', () => HelloWorld );

Run the rn file and Path

Class Communicate1Activity extends AppCompatActivity implements extends {private ReactRootView mReactRootView; private ReactInstanceManager extends; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); mReactRootView = new ReactRootView (this); mReactInstanceManager = ReactInstanceManager. builder (). setApplication (getApplication ()). setBundleAssetName ("index. android. bundle "). setJSMainModuleName ("index "). addPackage (new MainReactPackage ()). setuseappssupport (BuildConfig. DEBUG ). setInitialLifecycleState (LifecycleState. RESUMED ). build (); // note that MyReactNativeApp must correspond to "index. android. // "AppRegistry. the first parameter of registerComponent () is mReactRootView. startReactApplication (mReactInstanceManager, "MyReactNativeApp", null); setContentView (mReactRootView);} @ Override public void invokeDefaultOnBackPressed () {super. onBackPressed ();}}

4. Generate the bundle file:

Run the following command to generate the bundle file to the assets Directory. If the directory does not exist, create a bundle file:

F:\androidStudioworkspace\AndroidKissReactNative> react-native bundle --platform android --dev false --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/Scanning folders for symlinks in F:\androidStudioworkspace\AndroidKissReactNative\node_modules (30ms)Scanning folders for symlinks in F:\androidStudioworkspace\AndroidKissReactNative\node_modules (33ms)Loading dependency graph, done.bundle: startbundle: finishbundle: Writing bundle output to: app/src/main/assets/index.android.bundlebundle: Done writing bundle output

Run the App: The activity directly references the Rn component. Now we can use Rn to write our interface happily.

Need source code please move github: https://github.com/zqHero/AndroidKissReactNative