请选择 进入手机版 | 继续访问电脑版

想学小码跨平台技术吗?来这看看吧...(最新详解版)

发表于 2016-07-07 02:26 显示全部楼层 67 4814

本帖最后由 胡永辉 于 2016-8-7 18:30 编辑

叶建华老师编,

编主(HYH)亲自实践,总结,

(。・・)ノ 

为大家带来,最基础且最麻烦的,进入跨平台世界的第一步,

环境搭建

 (React Native的开发环境)

言不多说,进入教程吧


所有用到的工具: 00.png  

还有,良好的网络环境,网速越快越好


(。・・)ノ  编主小贴士: 请将电脑旁所有,尖锐,刀具,易碎物品收好,

                                        安装中间会出现情绪波动大的场面,

                                        配置Mac电脑最好在保修期内(冲动砸了,还能保修嘛)

                                      

一、环境需求    

1.1  安装Homebrew


     HomebrewOS X的套件()管理器,我们可以通过它获取并且安装很多组件

安装方式:


ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 

1.png       


2.png


3.png


 命令行执行brew -v进行检查brew是否已经安装成功(下图为安装成功)

4.png 

1.2  安装npm  Node.js

     Node.js最好安装4.0及其以上更高版本,node安装成功后npm自动也就有了,直接下载安装Node.js,网址:https://nodejs.org/en/download/  


1.21.png


1.22.png


 

1.3  安装WatchMan

该插件用于监控bug文件和文件变化 ,并且可以触发指定的操作

安装方式

 brew install watchman 

……………………………………………………………………………. 

1.31.png

  …………………………………………………………………………….  
 验证是否安装成功   


  1.32.png 


(以下情况,编主导致原因是:第一步没安装完成,重新从第一步安装完后就没有出现了)

1.33.png

(注意:如果提示command not found,就在前面加上sudo获得最高权限)
 

注意:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local  


1.34.png     

1.35.png
 

  1.3  安装Flow

      flow是一个 JavaScript 的静态类型检查器,建议安装它,以方便找出代码中可能存在的类型错误

安装方式

    brew install flow
1.36.png


    验证是否安装成功
 
 1.37.png 


二、React Native安装


2.1 安装React Native


 npm install -g react-native-cli 


 2.11.png 

2.2 安装截图如下:

2.22.png
 

三、 ios开发环境需求

Xcode 7 及其以上更高版本
 

四、 Android开发环境需求


安装最新版的JDK:   

   
     下载安装地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 

4.11.png

4.12.png


安装Android studio

(好处:可省略多种配置操作,省略的多种配置操作,此处省略不讲   ) 


这里我用最新的(2.1.2版本),原因在另一篇"Bug总结"里有说明.


下载网址1:   http://www.android-studio.org 

下载网址2:  https://developer.android.com/studio/index.html#mac-bundle 


4.13.png
 4.14.png 


新版界面: 

4.15.png

 

4.16.png



4.17.png



4.18.png


4.19.png 


弄好后,先放着!     


  4.1  安装Genymotion与安装VirtualB虚拟机  

       Genymotion是一个第三方模拟器,它比Google官方的模拟器更易设置且性能更好。但是,它只针对个人用户免费。


1)下载并安装Genymotion


     下载网址:  https://www.genymotion.com/

4.11.png  


2)安装VirtualBox (打开Genymotion,如果你尚未安装VirtualBox,它有可能会提示你安装)

4.12.png     


3)  启动Genymotion(这里我们要用到一个需要注册的账户,可以先去登录账户注册的教程 --> 注册 —> 在这之后的下面)


4.13.png


 4.14.png  
   
 4.15.png  
 


 4.16.png
 
 

4.17.png

     

4.18.png


下载安卓模拟器

4.19.png


4.20.png


4.21.png


4.22.png


4.23.png








5)登录账户注册: (账户登录才可使用,网址: https://www.genymotion.com/ )    

       

5.11.png


5.12.png


5.13.png



    输入上面信息,创建之后,进入下面的界面:    

5.14.png       


      


5.15.png



进入邮箱,打开邮件,激活账户   

5.16.png

5.17.png


5.18.png



邮箱再次收到邮件(第二封邮件)

5.19.png


   



五、 React Native的第一个应用  


5.1 执行命令,生成一个工程


     react-native init 项目名称


在桌面上新建一个名为"第一个工程"的文件夹(其实,文件夹名随便取都可以)

5.11.png


项目名为自定义的字母组合

5.12.png

      

注意:由于众所周知的网络原因,需要等待一段时间(具体视网络情况而定)。react-native命令行从npm官方源拖代码时会遇上麻烦,可以将npm仓库源替换为国内镜像:  


     npm config set registry https://registry.npm.taobao.org

     npm config set disturl https://npm.taobao.org/dist


注意:如果提示command not found,就在前面加上sudo获得最高权限)       


   5.2  运行成功的截图 


编主测试,等待时间较长,如果运行失败,再重新创建项目测试 (失败原因未知)  

 5.13.png


或:(下图为叶建华老师测试的图)


  5.14.png

 

5.3 目录结构截图


5.15.png


目录结构分析:(看看了解下)  


a)默认生成androidios两个平台的原生项目;

b)其中,index.android.jsindex.ios.js文件为Android和iOS的空壳应用文件;

c)此外,node_modules文件夹,是为Node.js存放和管理npm包资源,也包含React Native框架文件。


六、运行工程文件


      不管是 iOS 还是 Android,在开发调试阶段,都需要在 Mac 上启动一个 HTTP 服务,称为Debug Server,默认运行在 8081 端口,APP 通 Debug Server 加载 js。


6.1   打开Xcode,运行你的第一个React Native创建的iOS应用


6.11.png

 

6.12.png


或: (下图为叶建华老师测试的图)


6.13.png  

        图1 - 启动React native 服务器


运行成功,模拟器界面图:

6.14.png  

        图2 - 客户端运行界面


  6.2  React Native创建的项目是通过WebStorm打开的 


 6.15.png


6.16.png


  6.3 把React Native创建的应用跑在Android上 (未测试)  


a) 命令行执行cd SeeMyGoProduct,路径切换到项目主目录

b) 命令行执行react-native run-android进行加载运行android 应用。

c) 使用编辑器进行打开和修改index.android.js文件,接着通过菜单按钮选择Reload JS来进行刷新修改


 


七、运行安卓程序(前面说的不能关的服务器要开着,没开运行不了安卓代码) 

 

 >1. 打开VirtualB虚拟机


7.11.png  


>2.  打开Genymotion(之前没关的话,就不用打开了)


7.12.png     

7.13.png


7.14.png


可能会出现如下弹窗: 


 7.15.png


7.16.png


>3. 可以关闭VirtualB虚拟机了(看着碍事而已)


>4.运行安卓代码 


      > 打开Android studio

7.17.png

 

7.18.png


我选的是: 以后提醒我!     

 7.19.png


7.20.png


7.21.png


7.22.png


7.23.png


7.24.png


总算编辑完了,大半夜不睡觉编帖,也是不容易了...

总结说下,跨平台环境的搭建,会遇到各种问题,上面的情况,已经算是很理想的了.

出现的问题,请转战编主第二帖"小码哥跨平台之:React Native开发环境搭建(bug总结)",这里有编主自己遇到一些问题及解决方式...



编主(HYH)

与你同在

...

评分

参与人数 3学币 +14 收起 理由
小码哥官方团队 + 3 赞一个!
seemygo + 6 6666按照帖子一步步来全程教学~.
小兰老师 + 5 凌晨2点多编辑的帖子,赞赞赞~.

查看全部评分

回复 使用道具
举报
夕夕要努力

发表于 02-09 10:30 显示全部楼层

回复 支持 反对 使用道具
举报
magicpapacy

发表于 02-09 10:15 显示全部楼层

回复 支持 反对 使用道具
举报
RMB战士

发表于 02-09 10:06 显示全部楼层

回复 支持 反对 使用道具
举报
愚人花园

发表于 02-08 17:19 显示全部楼层

路过,支持一下

回复 支持 反对 使用道具
举报
我爱大菠萝

发表于 02-08 15:00 显示全部楼层

回复 支持 反对 使用道具
举报
任天翔

发表于 02-08 14:54 显示全部楼层

无需回复的,我们保持沉默,如需回复的,就回21个字!

回复 支持 反对 使用道具
举报
今夜为你想

发表于 02-08 14:47 显示全部楼层

1 先请大家注意我的头像。看到什么诡异的吗。 2 然后请大家仔细看我的ID,有什么内涵? 3 没看出来就默念我的ID 十遍,然后结合我的头像一起看!! 4 好了,你继续往楼下看吧,我就是来混脸熟的。

回复 支持 反对 使用道具
举报
东北兰蔻

发表于 02-08 14:26 显示全部楼层

支持!支持!!

回复 支持 反对 使用道具
举报
张比亚

发表于 02-08 09:01 显示全部楼层

围观楼主

回复 支持 反对 使用道具
举报

发表新文章
胡永辉

版主

0

学分

305

学币

518

积分

版主

Rank: 7Rank: 7Rank: 7

积分
518

小码哥一周年勋章活动达人勋章小码哥版主勋章前100注册用户勋章小码哥iOS学员勋章真土豪勋章勋章论坛百帖达成勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育