将RN集成到现有Android项目，初踩坑记录

1. npm init 初始化项目，初始之后项目根目录会出现package.json文件

2. package.json配置

{
  "name": "com.example.myapplication",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "description": "介绍",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.0.0",
    "react-native": "^0.69.4"
  }
}

3. 官方的yarn add react-native生成的node_modules没有jsc-android等一些文件。要使用npm install --save react react-native ，如果报错，就删除package.json中的dependencies配置

4. Android项目配置

app的build.gradle添加RN依赖

   implementation "com.facebook.react:react-native:+"
   implementation "org.webkit:android-jsc:+"

项目的build.gradle添加配置

       maven {
            url "$rootDir/node_modules/react-native/android"
        }
        maven{
            url "$rootDir/node_modules/jsc-android/dist"
        }
        flatDir {
            dirs 'libs_aar'
        }

AndroidManifest.xml增加

6. RnActivity配置

class RnActivity : AppCompatActivity(), DefaultHardwareBackBtnHandler {
    private lateinit var mReactRootView: ReactRootView
    private var mReactInstanceManager: ReactInstanceManager? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mReactRootView = ReactRootView(this@RnActivity)
        mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(application)
            .setCurrentActivity(this@RnActivity)
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.BEFORE_CREATE)
            .build()
        //MyReactNativeApp是index.js中AppRegistry.registerComponent的第一个参数的值
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null)
        setContentView(mReactRootView)
    }

    override fun invokeDefaultOnBackPressed() {
        super.onBackPressed()
    }


    override fun onPause() {
        super.onPause()
        mReactInstanceManager?.onHostPause(this@RnActivity)
    }

    override fun onResume() {
        super.onResume()
        mReactInstanceManager?.onHostResume(this@RnActivity, this@RnActivity)
    }

    override fun onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager?.onBackPressed()
        } else
            super.onBackPressed()
    }

    override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
        return if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager?.showDevOptionsDialog();true
        } else
            super.onKeyDown(keyCode, event)
    }

    override fun onDestroy() {
        mReactInstanceManager?.onHostDestroy()
        super.onDestroy()
    }

}

7. 编译
   gradlew build 然后gradlew installDebug，然后需要在手机上设置电脑的IP地址以及端口号（端口固定8081），如果打开RN界面加载不出来，提示要npx react-native start，这个可能是因为没有index.android.bundle，先新建assets文件夹，然后使用命令：

npx react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res

生成index.android.bundle文件后将其复制到assets文件夹后重复执行gradlew build ,gradlew installDebug再试试看。.