准备工作
1.Node.js (v20.15.1)
https://nodejs.org/zh-cn
2.JDK 17(exe)
https://www.oracle.com/java/technologies/downloads/?er=221886#java17
3.Android Studio (Koala)
https://developer.android.com/studio?gad_source=1&gclid=CjwKCAjw4ri0BhAvEiwA8oo6F66pSQiL0bSisK_pQVEFjrIBuHOsjZ0KN1S5o-BlTrXBzQpDbNePjBoCmBUQAvD_BwE&gclsrc=aw.ds&hl=zh-cn
开始集成
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