美文网首页
RN学习(二)——集成CodePush

RN学习(二)——集成CodePush

作者: entre_los_dos | 来源:发表于2019-04-25 19:03 被阅读0次

        上一篇我整理的是安装RN环境以及创建第一个RN项目,也是我初识RN的第一步,为了看类似热更新的效果,我先开始集成的CodePush。

        网上文章都还挺多的,但是我第一次集成的时候就有问题,这次写的时候又鼓捣了半天。。。写的不对的地方,请大家多多指点~~

    安装CodePush到本地===在根目录下操作

    1. 安装CodePush

    npm install -g code-push-cli
    
    image

    测试CodePush是否安装成功,可用如下图所示来测。若本地安装,则会显示对应版本号。


    image

    2.注册CodePush

    code-push register
    
    image

    3.登录CodePush,浏览器会出现token

    image

    4.将token 复制粘贴过来。

    image

    判断是否登录成功,可如下所示来测。也可用code-push whoami来查看登录的账号。


    image

    5. CodePush添加app。

    code-push app add RNTest ios react-native
    

    RNTest:项目的名称,ios:如果是安卓用android。成功后,如下图所示。

    image

    好了,codePush安装完了,而且项目也创建了。这个跟咱们平时用的极光、友盟等第三方账号一样。添加完后,可在appcenter里面看到。

    image

    项目里集成CodePush===在项目目录下操作

    1. 进入RN项目,添加CodePush。

    npm install react-native-code-push --save
    

    安装成功后,可在项目如下图路径里找到对应文件。

    image

    2. 进入ios文件夹,创建Podfile

    image

    将Podfile里面的这个target删掉,否则工程跑不起来。

    image

    3. 往Podfile里面添加依赖库react-native-code-push。

    react-native link react-native-code-push
    

    Podfile如下所示,多一个CodePush

    image

    4. 进入ios工程里面,pod install。

    cd ios
    pod install
    

    5.现在run后,Xcode报错以及解决。

    image

    将下图Library处删掉。这是RN创建项目的时候,没有pod自己添加进来的


    image

    然后手动将下面的添加到Podfile文件中。

    # Your 'node_modules' directory is probably in the root of your project,
      # but if not, adjust the `:path` accordingly
      pod 'React', :path => '../node_modules/react-native', :subspecs => [
        'Core',
        'CxxBridge', # Include this for RN >= 0.47
        'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
        'RCTText',
        'RCTNetwork',
        'RCTWebSocket', # Needed for debugging
        'RCTAnimation', # Needed for FlatList and animations running on native UI thread
        # Add any other subspecs you want to use in your project
      ]
      # Explicitly include Yoga if you are using RN >= 0.42.0
      pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
    
      # Third party deps podspec link
      pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
      pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
      pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
    

    现在运行,又报了下方的错误。


    image

    莫慌,解决办法如下:

    1. 删除图下两个文件package-lock.json和node_modules,然后npm install
    image
    1. 删除Podfile.lock和Pods,然后pod install
    image
    1. 现在可以了。

    吐槽

        这篇我确实想小吐槽一下,可能是第一次装的时候,太不熟悉了,完全一脸慒,还遇到了各种奇葩的问题。各种查资料,询问各位RN大神。现在感觉,好像遇到的那些奇葩的问题(当时网上找了好多,试了不好使的)都可以用下面这些来解决,虽然简单粗暴,但是挺好使。

    1. 如果本地服务已经起来,如下图所示,那就先结束。或者npm start前先这样:killall -9 node。
    image
    1. 删除package-lock.json,删除node_modules,然后npm install
    2. 如果不好使,且有Pod的话,删除Podfile.lock和Pods,然后pod install

        OK,这篇就先到这里了~目前我是按我学习的顺序来整理的。下篇整理集成CodePush后APP的展示效果,主要包括Xcode配置、打包上传和app的最终呈现。

    相关文章

      网友评论

          本文标题:RN学习(二)——集成CodePush

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