This is my 8th time to participate in the August Challenge

1, the preface

Sometimes we might develop functional modules of the heart based on existing projects. So at this point I can choose to develop in RN. This has two advantages: one set of code can complete the development of a new module in a long time; At the same time, the performance is basically close to native.

2. Basic configuration

  1. Initialize an RN project
Name of the React-native init projectCopy the code
  1. Copy your Android native project into the Android directory of RN project
  2. inandroid\app\build.gradleAdd React Native and JSC engine dependencies to the file:
Dependencies {implementation "com. Android. Support: appcompat - v7:27.1.1"... implementation "com.facebook.react:react-native:+" // From node_modules implementation "org.webkit:android-jsc:+" }Copy the code
  1. inandroid\build.gradleThe path to adding maven sources for React Native and JSC engines must be in the “AllProjects” code block
allprojects { repositories { maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/.. /node_modules/react-native/android" } maven { // Android JSC is installed from npm url("$rootDir/.. /node_modules/jsc-android/dist") } ... }... }Copy the code
  1. Enable automatic linking of native modules
//settings.gradle apply from: file(".. /node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) //app/build.gradle apply from: file(".. /.. /node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)Copy the code
  1. Androidmanifest.xml configuration permissions
// Network permission<uses-permission android:name="android.permission.INTERNET" />// Developer menu permissions<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
Copy the code

3. Code writing

3.1 Code writing of RN layer

import React from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>Hello, World</Text> </View> ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center' }, hello: { fontSize: 20, textAlign: 'center', margin: 10 } }); // Register a component named MyReactNativeApp with ReactNative. Our Native uses this name to call RN components. AppRegistry.registerComponent( 'MyReactNativeApp', () => HelloWorld );Copy the code

3.2 Android native layer code writing

Create the myReactActivity.java file

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        SoLoader.init(this.false);

        mReactRootView = new ReactRootView(this);
        List<ReactPackage> packages = new PackageList(getApplication()).getPackages();
        // Some third parties may not be automatically linked. For these packages, we can manually add them as follows:
        // packages.add(new MyReactNativePackage());
        // You need to manually add them to both 'settings.gradle' and 'app/build.gradle' profiles.

        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackages(packages)
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                / /. SetInitialLifecycleState (LifecycleState RESUMED) that some might be an error
                / / reference https://blog.csdn.net/bearin/article/details/105681705
                .setInitialLifecycleState(LifecycleState.BEFORE_CREATE)
                .build();
         // Note that MyReactNativeApp must correspond to "index.js"
        / / "AppRegistry registerComponent ()" the first parameter
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp".null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed(a) {
        super.onBackPressed(); }}Copy the code

3.3 Register MyReactActivity in androidmanifest.xml

<activity
  android:name=".MyReactActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>
Copy the code

Set the RN page in 3.4 MinActivity

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Intent intent = new Intent(MainActivity.this, MyReactActivity.class);
        startActivity(intent);
    }
Copy the code

reference

Reactnative. Cn/docs/integr…

Blog.csdn.net/denghuizi/a…