npm init初始化项目，初始之后项目根目录会出现package.json文件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"
}
}
官方的
yarn add react-native生成的node_modules没有jsc-android等一些文件。要使用npm install --save react react-native，如果报错，就删除package.json中的dependencies配置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增加
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
- 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()
}
}
- 编译
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再试试看。.
