<button id="9slfp"><object id="9slfp"></object></button>
<button id="9slfp"><object id="9slfp"><menuitem id="9slfp"></menuitem></object></button>
    <em id="9slfp"></em>
    <button id="9slfp"><acronym id="9slfp"><input id="9slfp"></input></acronym></button>
  • 免費開源的iOS開發學習平臺

    React Native基礎:2-編寫Hello World

    根據學習軟件編程語言的歷史傳統,最開始都要寫一個"Hello world"程序。接下來,我們通過修改上一節創建的項目,在手機屏幕上顯示出Hello world。

    Hello World實現方法

    首先選中Atom左邊選項卡【File Tree】,點擊【Add Project Folder】按鈕,選擇上一節創建項目的目錄,即AwesomeProject目錄。

    添加完成之后,可以在【File Tree】中看到該項目的所有文件列表。由于React Native同時支持iOS與Android,因此在工程文件中,iOS應用的代碼寫在index.ios.js文件中,而Android應用的代碼寫在index.android.js中。

    打開index.ios.js文件,刪除其中所有的代碼內容,并把下方的代碼添加到index.ios.js文件中。

    import React, { Component } from 'react'; 
    import {
      AppRegistry,
      Text
    } from 'react-native';
    
    export default class AwesomeProject extends Component {
      render() {
        return (
          <Text>Hello world</Text>
        );
      }
    }
    
    AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
    

    在終端中,執行下面的命令,運行程序。程序運行后,在打開的iOS模擬器左上角可以看到顯示出的“Hello World”提示信息。

    react-native run-ios
    

    我們簡單介紹一下在index.ios.js文件中填寫的代碼含義:

    1. 首先,通過import加載代碼所需要的模塊;
    2. 繼承Component實現AwesomeProject組件。注意名字需要和工程名一致,不可修改!
    3. 注冊AwesomeProject組件成為整個應用的根容器。

    import和export

    在Hello World代碼中,我們使用到了關鍵字import。在React Native中,import用于加載其他模塊的變量。除了import外,還有export關鍵字,通過export可以指定被其他模塊導入(使用)的變量。比如,有下面的兩個文件a.js與b.js。

    // a.js
    var hello = "hello";
    export {hello};
    
    // b.js
    import {hello} from "./a.js"
    console.log(hello) // hello
    

    在a模塊(文件)通過export關鍵字指定了可以被其他模塊導入(使用)的變量--hello。b模塊(文件)通過import關鍵字導入了a模塊的變量hello, 并且打印出它的值。在使用import時,需要在大括號({})中,寫上需要導入的變量名。

    還有一種import方法可以不需要指定變量名就可以將其導入。例如,我們對a.js與b.js文件進行如下的修改。

    // a.js
    var hello = "hello";
    var other = "export default"
    export {hello};
    export default other
    
    // b.js
    import otherExport, {hello} from "./a.js"
    console.log(hello) // hello
    console.log(otherExport) // export default
    

    我們可以在a模塊中通過代碼export default,導出一個默認的變量。在b模塊中導入的時候不需要指定具體的名字。本質上,a模塊的export default操作,輸出一個名稱為default的變量,然后系統允許為它取任意名字,但一個模塊內最多只能有一個export default。

    Component與AppRegistry

    在Hello World代碼中,定義了一個名為AwesomeProject的組件(Component),并且使用AppRegistry內置模塊進行了“注冊”操作。我們在編寫React Native應用時,會編寫出很多組件,而一個App的界面,其實是各式各樣組件的組合。組件本身的結構可以非常簡單,唯一必須要做的是在render方法中返回一些JSX語句用于渲染組件。

    AppRegistry模塊則是用來告知React Native哪一個組件被注冊為整個應用的根容器,只有這樣React Native才知道從哪里開始渲染。


    精品h动漫无遮挡在线看中文|久久精品国产精品亚洲艾草|久久亚洲春色中文字幕|精品人妻少妇一区二区三区|欧美精品v国产精品v

    <button id="9slfp"><object id="9slfp"></object></button>
    <button id="9slfp"><object id="9slfp"><menuitem id="9slfp"></menuitem></object></button>
    <em id="9slfp"></em>
    <button id="9slfp"><acronym id="9slfp"><input id="9slfp"></input></acronym></button>