美文网首页React Native
拆分iOS、Android 和 React Native Cod

拆分iOS、Android 和 React Native Cod

作者: shuangyu1989 | 来源:发表于2018-03-28 10:50 被阅读0次

    前言:
    接上篇,在使用react native cli init project的时候,iOS、android 和react native code都在一个folder下面,如下图:

    Screen Shot 2018-03-27 at 11.48.28 PM.png

    这样的目录结构使得想要独立维护iOS、Android和RN三份代码变得很困难,可能想到的一些workaround就是把RN+iOS作为一个repo,RN+Android作为一个repo,再把RN作为subtree来管理。

    为了解决这个问题,让iOS、Android和React Native这三部分代码可以独立维护,于是有了这篇文章。目标结构如下图:


    Screen Shot 2018-03-27 at 11.50.55 PM.png

    Part 1:调整ios folder

    第一步:把ios folder拖到RNDemo同级
    第二步:删除原来所有的RN lib的reference,如下图中的红色引用:


    Screen Shot 2018-03-27 at 11.32.02 PM.png

    第三步:重新从import这些library

    //React.xcodeproj path
    RNDemo/node_modules/react-native/React
    //others
    RNDemo/node_modules/react-native/Libraries/...
    

    第四步:target->Build Phases->Bundle React Native code and images

    export NODE_BINARY=node
    ../RNDemo/node_modules/react-native/scripts/react-native-xcode.sh
    

    Part 1:调整android folder

    第一步:把android folder拖到RNDemo同级
    第二步:更新app的build.gradle
    第三步:更新project的build.gradle

    //build.gradle(app)
    apply from: "../../RNDemo/node_modules/react-native/react.gradle"
    
    //build.gradle(project)
    allprojects {
        repositories {
            mavenLocal()
            jcenter()
            maven {
                // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
                url "$rootDir/../RNDemo/node_modules/react-native/android"
            }
        }
    }
    

    到这里基础的react native开发环境算是配置完成

    相关文章

      网友评论

        本文标题:拆分iOS、Android 和 React Native Cod

        本文链接:https://www.haomeiwen.com/subject/ctmdcftx.html