侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130555 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

爱之初体验 ----- React Native

2024-05-10 星期五 / 0 评论 / 0 点赞 / 7 阅读 / 9542 字

1. Start Google, 进入 RN 官网 https://facebook.github.io/react-native/docs/getting-started.html​​​​​​

 1. Start Google, 进入 RN 官网 

  https://facebook.github.io/react-native/docs/getting-started.html​​​​​​

           

 2. 环境选择: Linux(Ubuntu Mate) + Android

 3. 环境准备 : Nodejs + Npm + Android SDK  +  watchman (optional) 

  https://facebook.github.io/react-native/docs/getting-started.html

 

  •    Nodejs
    • Google 进入 https://nodejs.org/en/;
      • 进入nodejs 官网下载 nodejs 的编译版本 :   node-v4.4.5-linux-x64.tar.xz 
    • 解压缩下载的nodejs 到指定目录 
    • 通过软连接方式来关联 node,npm 命令到 PATH  ;
      •  ln -s  /absolute-path-to-node-dir/bin/node /usr/bin/node; 
      •  ln -s  /absolute-path-to-node-dir/bin/npm  /usr/bin/npm; 

 

  • Android Sdk Linux 
    • Google 进入 android sdk 下载地址:
      • https://developer.android.com/studio/index.html;
      • 同样,下载后解压到目录
    • SDK Manager依赖于 Java,因此也需要下载java
      • http://www.oracle.com/technetwork/java/javase/archive-139210.html​​​​​​

 

  • Watchman
    • git clone https://github.com/facebook/watchman.git
    • cd watchman
    • sudo ./autogen.sh
    • sudo ./configure make && sudo make install
    • watchman 的编译需要automake , 因此如有失败请尝试安装依赖 automake: sudo apt-get install automake;
    • watchman 并不是必备的,因此也可以不安装。

                                 

    

 4. SDK Manager 下载编译apk需要的库 ,RN 默认使用 android-23 版本进行编译的,所以需要现在23 版本的库,由于不考虑使用virtual device ,因此只是需要下载 对应的 Build-tools, Platform, Google-Library;

最终的结果如下:

 

     

 5. 好了,真的开始RN的部分了:

  • 首先,安装rn cli : (sudo) npm install -g react-native-cli;
  • 初始化一个示例项目,此处保持与官网一致,具体可以随意: (sudo) react-native init AwsomeProject; ( 此处时间较长,因为会下载整个android + ios + npm框架)
  • 项目初始化完毕,进入该项目 : cd AwsomeProject;
  • 开始build 
  • (sudo) react-native run-android 

正常情况下到这步就已经能够在手机上看到了示例的应用了。不过这之间还有很多国内风格的事情,那就是   墙,网络,ERR_NET::

  1. apk 首次编译会下载gradle完整包,不过,国内禁止,好在这个是可以配置的:

      

    2. 如上图,在  ${project.dir} / android / gradle /wrapper / gradle-wrapper.properties 文件中 , distributionUrl 配置了 gradle 的下载路径,果断自己离线下载一个,并部署到本地的服务路径替换,下载瞬间完成奥。。。(此方法同样适用编译普通android)

    3. 这步过去之后,会一马平川下去,APK也能正常编译出来,可是在将APK传输到手机上的时候有了问题。。。传输失败了,虽然也可以手动上传,但是作为一个完美主义者这并不是一个最佳的解决方案,再次 Google,立刻找到了一个解决方案

            http://www.hacksparrow.com/react-native-android-unable-to-upload-some-apks.html

        ,为了尊重其他人的成果,请大家可以参照上面的这个路径,另外解决方案也附在下图,

其实,是 gradle 1.3.1 的一个bug,这里没去看有没有新版本发布了,暂时先降级到1.2.3 ,好了这次编译通过,也正常安装到手机上了。

 

6.其他事项

对于首次接触安卓的同学,下面是些可能遇到的问题

adb devices ; 如果设备不能读出来说明驱动有问题,这时候就不要考虑是RN的问题了

adb devices; 如果设备列出的属性 是UNAUTHORIZED: 请注意,第一次调试某个手机时候,手机会出现允许 debug 的提示,要在手机上允许后才能够读取手机的信息

为什么官网上使用 android-studio ? 而博主你用的 android-sdk : 其实android-studio 也是调用了命令行的android-sdk,而依赖,考虑到且在linux上,android-studio 也有好多各种因素,我就选择了比较轻便的sdk。

对于部分手机,首次运行应用可能会出现的白屏:http://blog.csdn.net/itpinpai/article/details/50845625; 请参照这里,主要是需要权限;还有就是设备必须正确配置服务(电脑的ip地址);

 

7.说了半天,成果图都忘记贴出来了,依然保持官网的原风:

对于首次接触安卓的同学,下面是些可能遇到的问题

后续各种RN项目我会尽量抽时间整理出来,希望大家能喜欢。

7.不得不说的事 

This Article is composed by Samuel Zuuka,  anyone is free to  View , Like  .  And also to Forward ,  Save to local ,  Print , Share to Friends or by  any other spread method  with obvious reference to this article or my mail : [email protected] ,thank you!

If you do need to use this article without sealing my information ,  please concat me by mail [email protected] 

此博客为 Samuel Zuuka 原创, 任何人可随意  查阅  点赞 , 对于  转发  保存本地  印刷  分享好友  以及其他任何方式  传播行为  需要明显的注明文章出处或者我本人的邮箱地址  [email protected], 谢谢!

如您确实需要不在标注我本人信息的情况下使用此文章,请邮件联系我 [email protected] 

 

 

 

广告 广告

评论区