现有Android项目 集成 React Native （一）

准备工作

1.Node.js (v20.15.1)

nodejs.org/zh-cn

2.JDK 17(exe)

www.oracle.com/java/techno…

3.Android Studio (Koala)

developer.android.com/studio?gad_…

开始集成

1.Android Studio 创建 空项目 RnApp（项目名）

2. RnApp项目 根目录 命令行执行 npm init

生成 package.json 文件

3.RnApp 项目根目录 命令行执行 npm add react-native

生成 node_modules 文件和package-lock.json 文件

4.RnApp 项目根目录 命令行执行 npm install @react-native/metro-config

（为了解决 此文件 丢失导致 error no Metro found PS D:\Android\react\RnApp>)）

5.RnApp 根目录 创建 metro.cofig.js 文件

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

6.RnApp 项目根目录 创建 react-native.config.js 文件

(解决项目启动 找不到默认 android路径 现有项目集成路径变了)

module.exports = {
  project: {
    android: {
      sourceDir: './',
    },
  },
};

7.RnApp 项目根目录 命令行执行 npm run start

（测试 是否可以启动服务 暂时不要run android 因为 app还没配置依赖）

8.RnApp 项目 setting.gradle.kts 配置阿里云仓库

（解决facebook 依赖包下载失败）

maven {
setUrl("https://maven.aliyun.com/repository/google")
}
maven {
setUrl("https://maven.aliyun.com/repository/public")
}
maven {
setUrl("https://maven.aliyun.com/repository/gradle-plugin")
}

9. RnApp 项目 app/build.gradle.kts 导入远程依赖 sync gradle

//加号是为了自动下载最新0.72的
implementation("com.facebook.react:react-native:+")
//hermes 解决lib so 缺失
implementation("com.facebook.react:hermes-android:0.71.8")

10. RnApp 根目录 创建 index.js

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

const HelloWorld = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.hello}>Hello, World</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent(
  'RnApp',
  () => HelloWorld,
);

（红框中的 就是 App项目 名字 注意大小写） js代码入口

11.RnApp项目 创建DemoActivity 继承 Reactivity

class DemoActivity : ReactActivity() {
    /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  override fun getMainComponentName(): String = "RnApp"

  /**
   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
   */
  override fun createReactActivityDelegate(): ReactActivityDelegate =
      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
}

创建 MyApplication

class MyApplication : Application(), ReactApplication {

    private val mReactNativeHost: ReactNativeHost = object : ReactNativeHost(this) {
        override fun getUseDeveloperSupport(): Boolean {
            return BuildConfig.DEBUG
        }

        override fun getPackages(): List<ReactPackage> {
            return Arrays.asList<ReactPackage>(
                MainReactPackage()
            )
        }
        override fun getJSMainModuleName(): String {
            return "index"
        }
    }

    override fun getReactNativeHost(): ReactNativeHost {
        return mReactNativeHost
    }

    override fun onCreate() {
        super.onCreate()
        SoLoader.init(this, false)
        /*if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
            // If you opted-in for the New Architecture, we load the native entry point for this app.
            load()
        }*/
    }
}

AndroidManifest.xml 声明权限

    <uses-permission android:name="android.permission.INTERNET" />

RnApp 项目 命令行 启动 npx react-native run-android

--over 简单的 现有项目集成 React-Native