React Native HelloWorld

標籤：

React Native helloworld

‘use strict‘;

這行代碼是用於開啟 Strict Mode，Strict mode的錯誤處理可以有所提高，JavaScript的一些語言缺陷也可以避免。簡而言之就是，JavaScript在這種模式下工作地更好！

var React = require(‘react-native‘);

 這句代碼是將 react-native 模組載入進來，並將它賦值給變數 React 的。React Native 使用同 Node.js 相同的模組載入方式：require，這個概念可以等同於 Swift 中的“連結庫”或者“匯入庫”。

 

var styles = React.StyleSheet.create({  text: {    color: ‘black‘,    backgroundColor: ‘white‘,    fontSize: 30,    margin: 80  }});

以上代碼定義了一段應用在 “Hello World” 文本上的樣式。如果你曾接觸過Web開發，那你很可能已經發現了：React Native 使用的是 CSS 來定義應用介面的樣式。

class PropertyFinderApp extends React.Component {  render() {    return React.createElement(React.Text, {style: styles.text}, "Hello World!");  }}

　　

類 (class) 是在ES6中被引入的，縱然JavaScript一直在進步，但Web開發人員受困於相容瀏覽器的狀況中，不能怎麼使用JS的新特性。React Native運行在JavaScriptCore中是，也就是說，你可以使用JS的新特性啦，完全不用擔心相容什麼的呢。

注意：如果你是一名 Web 開發人員，我百分百鼓勵你要使用現代的JavaScript，然後使用像 Babel 這樣的工具產生相容性的 JavaScript，用於支援相容性不好的老瀏覽器。

PropertyFinderApp 繼承了 React.Component（React UI的基礎模組）。組件包含著不可變的屬性，可變的狀態變數以及暴露給渲染用的方法。這會你做的應用比較簡單，只用一個渲染方法就可以啦。

React Native 組件並不是 UIKit 類，它們只能說是在某種程度上等同。架構只是將 React 組件樹轉化成為原生的UI。

最後一步啦，將這一行加在檔案末尾：

React.AppRegistry.registerComponent(‘PropertyFinderApp‘, function() { return PropertyFinderApp });

　　

AppRegistry 定義了App的入口，並提供了根組件。

儲存 PropertyFinderApp.js，回到Xcode中。確保 PropertyFinder 規劃（scheme）已經勾選了，並設定了相應的 iPhone 模擬器，然後產生並運行你的項目。幾秒之後，你應該就可以看到 “Hello World” 應用正在運行了：

 

React Native HelloWorld