• 學習 React Native 10

    到現在為止,AppDelegate.m 文件包含了兩個重要的知識點,您應該知道如何去修改他們了。

     

    第一個就是 jsCodeLocation 行,我們在前面的章節已經做過修改,目的是為了可以布署該應用到實際的設備上。 正如我們在生成的文件注釋中所解釋的那樣,第一個選項是為了開發環境所用,第二個選則被用來布署在硬盤上已經打包好的包。 現在,我們不會過多解釋第一個選項。在后面的章節,一旦我們準備好了提交應用程序到應用商店時,再來詳細討論這兩個方法。

     

    第二個,moduleName 傳遞給 RCTRootView, 以決定哪個組件將會在視圖中被加載。 這個地方也可以在你的程序中用來設置哪個組件會被渲染。

     

    為了在這里使用 FirstProject 的組件, 您需要用同樣的名字注冊React 組件。 打開 index.ios.js ,您會看到在最后一行已經完成了這個工作:

     

    AppRegistry.registerComponent('FirstProject', () => FirstProject);

     

    該命令把 FirstProject 的組件暴露出來,所以我們可以在AppDelegate.m 中使用他們。 對于大多數情況來說,都無須修改這個模板。但最好知道這命令的位置。

     

    導入進 React Native


    讓我們更仔細的查看一下 index.ios.js文件。 觀察您就會發現 require 語句的使用和通常的方法略有不同:

     

    var React = require('react-native');
    var {
      AppRegistry,
      StyleSheet,
          Text,
          View,
    } = React;?

    該處有些有意思的語法. 跟通常的語法一樣, React 是需要的,但是在接下來的語句會發生什么?

     

    使用React Native 工作有一個很古怪的用法就是您要清晰的表述那些要使用的每一個原生的模塊。象<div>這樣的標簽就不能簡單的存在了,代替他的是,您需要清晰的使用 <view> <text>來導入要使用的組件。庫功能諸如 Stylesheet 以及 AppRegistry 也同樣需要使用這樣的語法導入到程序中。 一旦我們開始構建我們自己的應用程序時,就會發生很多 React Native  的功能都需要被導入進來。

     

    FirstProject的組件

     

    現在可以來仔細查看一下 <FirstProject> 的組件了。 這些對您來說應該已經非常熟悉了, 因為 <FirstProject > 里面的代碼就象一般的 React 組件完全一樣了。 最主要的區別就是這里使用 <Text> <View>組件標簽代替了 <div>以及<span>,使用樣式對象也有區別。

     

    早先我已經提過, 在 React Native 中所有的樣式都是通過樣式對象,而不是樣式表來完成的。 實現這種方式的標準做法就是使用樣式表庫。 您可以在文章底部看到這些樣式對象是如何定義的。注意只有<Text>組件可以使用文本規格樣式,比方說fontSize(字體大小), 其它的布局邏輯都是通過 flexbox來處理的。我們將在比較遠的未來才來討論如何使用 flexbox 構建我們需要的布局。

     

    總結

     

    示例程序是一個很好的展示案例,幫助您來了解創建一個React Native 應用程序您所需要了解的那些基本知識。 他會加載一個 React 的組件并對其渲染,同時也展示了在 react native 中樣式化以及渲染的基本規則。 示例程序也給了我們如何設置我們開發環境的方法, 以及將應用布署到真實的硬件環境中。 然而,這仍然是一個非常基礎的應用, 我們將在本章基于該程序建立一個更全功能的應用程序。

     

    介紹要使用的工具

     

    工欲善其事,必先了解其器。 這一小節我們不會給您帶來很多出乎意料的東西,但是會對您開發有很大幫助的,非常實用的工具。 象Chrome的調試平臺,是 Native特別指定的工具,其它的一些,比方 Flow 以及 Jest, 這些和他們的ReactJS 的同伴們的行為還是有很大區別的。

     

    使用 Chrom 調試器

     

    默認的應用會告訴您,可以通過按下 CMD + CTRL + Z來訪問開發者菜單。 從這里,您可以打開Chrome 以及 Safari 的調試器。如果您正在使用物理設置,可以通過晃動設備來訪問開發者菜單。

     

    可以使用Chrome 或者是Safari 的調試器來查看 Console.log 所輸出的日志文件,或者是可以通過調試器調試您的代碼,就和平常您調試網站的做法一樣。 如果您需要快速刷新,這將會讓您的開發過程有一個較小的減速,因為調試器每次聯接到模擬器時,大約要額外再花一到兩秒的時間。


    不深思則不能造于道。不深思而得者,其得易失。

    名人名言- 曾國藩
    • By 優聯實達
    • 2015-11-28
    • 1621
    • 公司新聞,網站開發,網站設計,UI
  • 少妇高潮久久久久7777