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

Source: Internet
Author: User

(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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.