最近由于公司的项目与发展方向的需求,需要在公司现有原生的 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应该一样的处理方式
本文讲述了如何将React Native作为一个模块嵌入到现有的安卓项目中,调整目录结构以符合企业需求。在调整过程中,遇到了依赖问题和运行命令的错误,通过修改项目和模块的build.gradle文件,以及调整run-android命令的路径,成功解决了问题。
2566

被折叠的 条评论
为什么被折叠?



