现有Android项目 集成 React Native (一)

准备工作

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值