美文网首页React Native开发React Native开发经验集
Android ReactNative导入 、sublime探坑

Android ReactNative导入 、sublime探坑

作者: silencefun | 来源:发表于2017-11-14 20:43 被阅读194次

    ReactNative 环境配好了半年一直没尝试过,当初也就跑了个helloworld,是时候 把该补的工作补上去了。折腾了一天半,又熟悉了node.js git ,sublime 等等

    1.sublime

    虽然不需要激活,但是 默认的也是一个没多大用的核心--其他的功能都要以插件的形式装上去--就像Eclipse。
    默认是没有Package Settings和Package Control两个菜单。
    不要想通过命令行的形式---慢还不靠谱。
    还是下载之后离线安装简单粗暴:

    1.点击Preferences>Browse Packages菜单
    2.进入打开的目录的上层目录,然后再进入Installed Packages/目录
    3.下载Package Control.sublime-package并复制到Installed Packages/目录
    4.重启 Sublime Text。

    其他参考别人的建议React Native开发推荐的一些插件:

    • ReactJS : 支持React开发,代码提示,高亮显示 ,介绍地址:sublime-react

    • Emmet :前端开发必备。

    • Terminal : 在sublime中打开终端并定位到当前目录,神器,mac下的快捷键为:command+shift+T

    • react-native-snippets:react native 的代码片段,

    打开sublime遇到一个提示

    Sublime Text Error while loading PyV8 binary:exit code 1 Try to manually install Pyv8 form

    https://github.com/emetio/pyv8-binaries

    于是到网上寻找答案 解决方法如下:

    1. 去gihub下载 PyV8,连接地址:

      https://github.com/emmetio/pyv8-binaries#readme

    2. 进入 路径 C:\Users\UserName\AppData\Roaming\Sublime Text 2\Packages\PyV8 没有的文件夹新建

    3. 我自己的文件是 C:\Users\BianGX\AppData\Roaming\Sublime Text 3\Packages\PyV8 把下载的 pyv8-win64-p3 解压 拷贝进来就好了.

    2.React native踩的大坑

    新建项目必须要用Windows 下 win+X 命令行 创建新的项目必须用 管理员权限那个,其他的启动 并不需要


    image.png

    虽然 hello world 跑的通但是 还是要进阶看demo 采坑开始。

    每个项目导入后 进入项目 root 都要执行

    npm install react-native-cli
    npm install -g (全局安装,为什么 每个都要来一次 虽然只要一次)

    但是这速度是在不敢恭维,就算使用代理也很慢---可能物理距离太远,npm 太TM慢了怎么办 更换 淘宝的 服务器--好的感谢阿里爸爸--

    $ npm install -g cnpm --registry=http://registry.npm.taobao.org

    这个命令 使用淘宝的镜像--据说15分钟同步一次--所以 都是一样的。

    image.png

    导入的是来自阿里开发人员,你的又一Github客户端哦~项目github也超过了1000个star。主要功能:

    • Feeds like web github home. (Github个人主页)
    • Search users or repos. (搜索用户或者开源库)
    • Star, watch repos, follow guys. (start,watch库,follow用户)
    • Explore trending repos daily, weekly, monthly. (查看浏览趋势)
    • Check who's famous in some filed all of the world. (检查特殊的commit)
      项目地址:https://github.com/xiekw2010/react-native-gitfeed

    有个大小为-1b的包果然卡了十分钟, 肯定坏了那就从新再来一次,结果又十分钟还不好我也是醉了。


    image.png

    换到 Android Studio 来。。下了10分钟 都没有下完,


    image.png

    wtf.我换个项目还不行?

    该为国外一个天气预报客户端,界面效果简约优美,项目地址:
    https://github.com/stage88/react-weather

    于是又下载 解压 安装。。。。。。。

    终于到了再一次 run-android

    image.png
    找不到或无法加载主类?--好吧 看看gradle 的具体版本有问题--那么重新下载 放到 原路径:C:\Users\silencefun.gradle\wrapper\dists\gradle-2.10-all
    gradle 的历个版本:https://gradle.org/releases/ image.png

    根据提示 codepush.gradle 不存在于是到了路径下看了果然是个空的文件夹

    于是 百度之;
    安装Code-Push的命令行工具:

    npm install -g code-push-cli

    进入App根目录,运行一下命令:

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

    然后再来一次。。。

    漫长的七分钟 终于成功了


    image.png

    但是 第一次还没加载完又满屏的 红 WTF??看一下 服务的窗口OOM??

    image.png

    我感到了代码对我深深的恶意--写法优雅优美的代码高高在上鄙视着你这个无能为力的码畜!
    不能忍了------我再来一个,,差点给网速跪了

    image.png
    image.png

    慢,那我再换一个。。。https://github.com/togayther/react-native-cnblogs 最近更新 几天以前,还不错
    ping 值都300 我也很无奈啊

    image.png

    轻车熟路 安装:


    image.png

    执行 run-android ,
    开始编译配置:


    image.png

    服务成功启动:


    image.png image.png

    最后 还是失败了--服务端问题 js 文件创建失败-但是Android端是正常的


    image.png

    刚好 那个 30days下完了,那么 再来一次(想认输么,哪那么容易?)

    我还是认输了---自己的npm版本略低---又是一堆坑要填。

    最后的最后,就算是自己跑demo,总算还是学点了经验:
    1.在github看demo项目最后的维护时间---1month 甚至更久的以year为单位的 就不要去尝试了--技术更新太快,太多的 坑要一个个来填:有些方法都弃用了,有些方法改名了等等
    2.不要一棵树吊死,不行就换一个,Windows本身坑就多啊----看来 mac book在向我招手。
    3.把坑以及解决办法记下来,相信我,你还会再次遇到的---大神请无视。
    4.熟悉命令行真的很重要也很有用--敲出来比点按键爽多了。

    相关文章

      网友评论

        本文标题:Android ReactNative导入 、sublime探坑

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