对 React Native 调整目录结构(针对安卓)

本文讲述了如何将React Native作为一个模块嵌入到现有的安卓项目中,调整目录结构以符合企业需求。在调整过程中,遇到了依赖问题和运行命令的错误,通过修改项目和模块的build.gradle文件,以及调整run-android命令的路径,成功解决了问题。

最近由于公司的项目与发展方向的需求,需要在公司现有原生的 android 和 ios 项目上嵌入 React Native,好能够更灵活更新内容与代码能够更好的跨平台。

React Native 确实是厉害,跨平台发展的阻力又被缩小一些。不过在使用中确实也遇到不少问题,今天要说的就是对ReactNative项目目录结构的调整。

然后呢,现在由于MBP不再我这,所以就先做安卓项目的调整,IOS还没处理,但我相信区别和安卓不会太大。


一般ReactNative的目录结构是这样

|----AwesomeProject

      |----android

      |----ios

就是一种主项目是ReactNative的感觉,但公司的需求是把ReactNative做为一个模块嵌入,所以即使是一个测试项目,也希望目录结构能是这样

|----AwesomeProject

|----android

|----ios

一种三个子项目平级,IOS和Android平级的感觉。


但是,从AwesomeProject中把android文件夹拖出来会后安卓项目会有很多错误,很明显是依赖的问题

首先,到 Project 的 build.gradle 中 把

url "$rootDir/AwesomeProject/node_modules/react-native/android"
改成
url "$rootDir/../AwesommeProject/node_modules/react-native/android"
这样就能找到依赖了。

但是还有错误,依旧是路径的问题,接着到 Module 的 build.gradle 中 把

apply from: "$rootDir/../node_modules/react-native/android"
改成
apply from: "../../Awesome/node_modules/react-native/android"

然后rebuild后就能运行了。


这样虽然不影响安卓项目的独立运行,也不影响 react-native -start 命令的使用,但是react-native run-android 命令会出错,当然了,路径已经变了,

然后也很简单,修改run-android命令所需要的路径就好,但是在哪里修改呢,我一开始也是很困惑的,然后就找到了

在 AwesomeProject\node_modules\react-native\local-cli\runAndroid 目录下,有一个 runAndroid.js 文件,猜测我们用命令执行的就是这里的代码

随便用什么编辑器打开文件把

function checkAndroid(args) {
  return fs.existsSync(path.join(args.root, 'android/gradlew'));
}

这个函数里的安卓前加两个点,变成'../android/gradlew'

然后

function run(args, reject) {
  process.chdir(path.join(args.root, 'android'));

这里也做同样处理,变成'../android'

保存之后 run-android 命令就正常工作了,IOS应该一样的处理方式



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值