<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                # # 轉載請標明出處: [http://blog.csdn.net/developer_jiangqq/article/details/50456967](http://blog.csdn.net/developer_jiangqq/article/details/50456967) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言??? ? ? ? ? ? ?**【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新,請大家關注收藏:[http://www.lcode.org](http://www.lcode.org)** ? ? ? ? ?FaceBook早期開源發布了React Native For IOS,終于在2015年9月15日也發布了ReactNative for Android,雖然Android版本的項目發布比較遲,但是也沒有阻擋了廣大開發者的熱情。可以這樣講在2015年移動平臺市場上有兩個方向技術研究比較火,第一種為阿里,百度,騰訊,攜程,360等一線互聯網公司的插件化,熱修改等技術,第二種就是廣大開發者一直在討論的ReactNative技術。前幾天同我在美國的童鞋了解到,在國外現在很多創業型互聯網公司都在使用React Native技術,由此可以看出該項技術的前景還是不錯的。我在這邊我自己就大膽預測一下吧(呵呵,勿噴哦~):2016年將是React Native大力發展的一年。所以對于我自己來而言,2016年的主要技術方向,ReactNative是占了主角了。在接下來的很長一段時間內,我的博客會持續更新ReactNative的應用開發教程,歡迎大家關注以及相關交流! ???????? 剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! # (二)React Native介紹??? ???????? React Native? For Android是偉大的互聯網公司Facebook與2015年9月15日發布的,該可以讓我們廣大開發者使用JavaScript和React開發我們的應用,該提倡組件化開發,也就是說React Native給我們提供一個個封裝好的組件讓開發者來進行使用,甚至我們可以相關嵌套形成新的組件。使用React Native我們可以維護多種平臺(Web,Android和IOS)的同一份業務邏輯核心代碼來創建原生應用。現階段Web APP的的體驗還是無法達到Native APP的體驗,所以這邊fackbook更加強調的是learn once,write everywhere,應用前端我們使用js和React來開發不同平臺的UI,下層核心模塊編寫復用的業務邏輯代碼,提供應用開發效率。 [特別注意]目前react native在ios上僅支持ios7以上,Android僅支持Android4.1以上。 ?????? React Native項目github地址:[https://github.com/facebook/react-native](https://github.com/facebook/react-native) ?????? React Native項目官網文檔:[http://facebook.github.io/react-native/docs/getting-started.html](http://facebook.github.io/react-native/docs/getting-started.html) # (三)React Native配置安裝 ??????? 特別聲明:facebook官網說當前react native歡迎是需要OSX,不過我也看到了有人通過windows系統配置該環境哈~大家有興趣可以百度搜索一下。 ??????? 3.1.Homebrew安裝 ???????? Homebrew是OSX不可獲取的套件管理器,我們可以通過它獲取并且安裝很多組件,安裝方式如下: ~~~ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ~~~ 然后通過命令行執行brew -v進行檢查brew是否已經安裝成功。整體截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf5ae219.jpg) ??3.2.Node.js安裝,我們需要安裝Node.js4.0或者更高版本,這邊推薦采用Node管理器nvm來進行安裝,nvm項目地址:[https://github.com/creationix/nvm](https://github.com/creationix/nvm) ???? 第一部分:安裝nvm,查看項目官網官方推送curl或者wget方式安裝或者更新nvm: ???? 第一種:curl方式: ~~~ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash ~~~ ? ? 第二種:wget方式: ~~~ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash ~~~ 不過在使用這兩種方式之前,我們可以采用brew install curl或者brew install wget來確保已經安裝curl或者wget。我這邊采用了第一種方式安裝,具體安裝截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf5c2398.jpg) 這樣我們已經安裝了nvm,但是最好我們配置一下環境變量到.bash_profile文件中,具體配置如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf5e6394.jpg) 最終我們通過命令行執行nvm? --version檢查一下nvm是否已經安裝成功。 ?? 第二部分:安裝Node.js,根據官網文檔我們直接命令行執行如下命令即可完成完成: ~~~ nvm install node && nvm alias default node ~~~ 安裝截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf60839d.jpg) 該會進行安裝Node.js最新版本,并且會給我們打個別名,方便使用。通過nvm我們可以安裝多個版本的Node.js,并且可以非常輕松的選擇不同的版本進行切換使用。 ???? 【注意】如果現在采用是Node5.0版本的版本,官網是推薦安裝npm 2,該版本比npm 3速度更加快。在安裝完Node之后,命令行運行npm install? -g npm@2安裝即可。 ?第三部分:安裝watchmam,該用于監控bug文件,并且可以觸發指定的操作,安裝方式如下: ~~~ brew install watchman ~~~ 安裝截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf61c762.jpg) ?第四部分:安裝flow,flow是一個 JavaScript 的靜態類型檢查器,建議安裝它,以方便找出代碼中可能存在的類型錯誤,官網:[http://www.flowtype.org/](http://www.flowtype.org/)? 具體命令為:brew install flow 安裝截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf64430e.jpg) ? ? ?3.3.原生開發環境安裝: ?????????? 針對iOS開發,我們只需要安裝Xcode7.0或者7.0以后版本,該可以通過AppStore進行下載安裝 ?????????? 針對Android開發,Android環境配置網上非常多了,我相應看這篇文章的朋友電腦上面基本都有Android開發環境的了~針對安裝詳細([點擊進入參考文章](http://wiki.jikexueyuan.com/project/react-native/DevelopmentSetupAndroid.html)) ???? 3.4.React Native安裝 ??????? 現在就是最后一步,也是最激動人心的時刻到了,我們使用命令行運行如下命令安裝React Native: ~~~ npm install -g react-native-cli ~~~ 安裝截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf661857.jpg) ? ? ? ? ?經過以上的四個大步驟我們基本完成React Native從基本環境的搭建工作,下面我們來進行一個實例演示React Native項目的效果。 # (四)React Native第一個應用(AwesomeProject) ???????? 經過以上的四個大步驟我們基本完成React Native從基本環境的搭建工作,下面我們來進行一個實例演示React Native項目的效果。ReactNative第一個AwesomeProject,就不是HelloWorld啦。 ???????? 首先執行如下命令,生成一個工程: ~~~ react-native init AwesomeProject ~~~ 運行截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf680674.jpg) 目錄結構如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf6a443d.jpg) ? ? ? 我們仔細看上面的目錄,會發現該該生成android和ios兩個平臺的原生項目,大家有興趣可以打開android和ios目錄看一下,里邊就是一個Android? Studio和Xcode創建的項目。其中index.android.js和index.ios.js文件為Android和IOS的空殼應用文件。另外還有一個node_modules文件夾,該為Node.js存放和管理npm包得,也包含React Native框架文件。 查看項目部分代碼:index.android.js如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf6bcb77.jpg) ? ??4.1.運行iOS 應用: ???????????? ①.命令行執行cd AwesomeProject,路徑切換到項目主目錄 ???????????? ②.點擊ios/AwesomeProkect.xcodeproj進行運行Xocde ???????????? ③.使用編輯器進行打開index.ios.js進行相關修改,然后運行應用即可。 ?????? 4.2.運行Android應用: ??????????? ①.命令行執行cd AwesomeProject,路徑切換到項目主目錄 ??????????? ②.命令行執行react-native run-android進行加載運行android 應用。 ??????????? ③.同樣可以使用編輯器進行打開和修改index.android.js文件,接著通過菜單按鈕選擇ReloadJS來進行刷新修改 ???? 運行截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbf6ee2cf.jpg) ![](https://box.kancloud.cn/2016-02-29_56d3fbf715016.jpg) ![](https://box.kancloud.cn/2016-02-29_56d3fbf73112f.jpg) 這些步驟,命令執行完之后,那么我們第一個應用也完美運行啦,具體看如下效果! ![](https://box.kancloud.cn/2016-02-29_56d3fbf748020.jpg) # (五)已存在React Native項目添加Android版本 ???????? 因為React Native的Android版本的發布要晚于iOS版本,所以有很多接觸React Native比較早的應用可能只有iOS版本,我們可以進行如下的操作,給添加Android版本: ???????? ①.修改package.json文件來更新react-native到最新版本 ???????? ②.運行npm install命令 ???????? ③.最后執行以下react-native android命令即可 # (六)最后總結 ???????? 今天我們從初始開始,安裝各種工具以及命令,完成了React Native的基礎環境的搭建,并且成功運行第一個React Native for Android的應用。下一篇我們對推薦IDE(Atom)以及相關插件的安裝配置講解。敬請期待~ ????????? 尊重原創,轉載請注明:From Sky丶清([http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)) 侵權必究! 關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注,第一時間推送精彩文章)![](https://box.kancloud.cn/2016-02-29_56d3fbf75e010.jpg) 關注我的微博,可以獲得更多精彩內容 [![](https://box.kancloud.cn/2016-02-29_56d3fbf76bdef.png)](http://weibo.com/u/1855428195?s=6uyXnP)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看