初学react-native_Alanqiuz_react-native 依赖包冲突

大大的周 02-07 6296

将RN 集成到原生项目步骤：

1.前提搭配好环境 2.首先创建一个空目录用于存放 React Native 项目，然后在其中创建一个/android子目录，把你现有的 Android 项目拷贝到/android子目录中。 3.安装 JavaScript 依赖包

在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：

{ "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { "start": "yarn react-native start" }, "dependencies": { "react": "17.0.2", "react-native": "^0.67.2" } }

接下来我们使用 yarn 或 npm（两者都是 node 的包管理器）来安装 React 和 React Native 模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），然后运行下列命令来安装：

$ yarn add react-native

这样默认会安装最新版本的 React Native，同时会打印出类似下面的警告信息（你可能需要滚动屏幕才能注意到）：

warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".

这是正常现象，意味着我们还需要安装指定版本的 React：

$ yarn add react@16.2.0

注意必须严格匹配警告信息中所列出的版本，高了或者低了都不可以。

如果你使用多个第三方依赖，可能这些第三方各自要求的 react 版本有所冲突，此时应优先满足react-native所需要的react版本。其他第三方能用则用，不能用则只能考虑选择其他库。

所有 JavaScript 依赖模块都会被安装到项目根目录下的node_modules/目录中（这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。

把node_modules/目录记录到.gitignore文件中（即不上传到版本控制系统，只保留在本地）。

4.将现有的Android原生项目拷贝到RN 项目中的Android 目录

拷贝最好参考新建的RN 项目，开始根据官网流程操作出现报错。拷贝完之后导入到 Android studio 链接外网同步相关库。

如果出现

Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release.

解决方案：

android/app/src/main 目录下创建assets 文件夹

切换到项目根目录输入 yarn react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

再次yarn start 启动服务，再用Android studio 就可以连接设备运行成功。

运行效果

demo 和相关文档连接：react-native集成到原生demo-Android文档类资源-CSDN下载