牛骨文教育服务平台(让学习变的简单)

在开始编写这个房产搜索App之前,我们先来创建一个简单的Hello World项目。我们将通过这个例子来演示React Native的各个组件和概念。
用你喜欢的文本编辑器(例如Sublime Text)打开index.ios.js ,删除所有内容。然后加入以下语句:

"use strict";

这将开启严谨模式,这会改进错误的处理并禁用某些js语法特性,这将让JavaScript表现得更好。

注意: 关于严谨模式,读者可以参考 Jon Resig的文章:“ECMAScript 5 Strict Mode, JSON, and More”。

然后加入这一句:

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

这将加载 react-native 模块,并将其保存为React变量。React Native 使用和Node.js 一样的 require 函数来加载模块,类似于Swift中的import语句。

注意:
关于JavaScript 模块的概念,请参考 Addy Osmani的这篇文章

然后加入如下语句:

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

这将定义一个css样式,我们将在显示“Hello World”字符串时应用这个样式。
在React Native 中,我们可以使用 Cascading Style Sheets (CSS) 语法来格式化UI样式。
接下来敲入如下代码:

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

这里我们定义了一个JavaScript 类。JavaScript类的概念出现自ECMAScript 6。由于JavaScript是一门不断演变的语言,因此web开发者必须保持与浏览器的向下兼容。由于React Native基于JavaScriptCore,因此我们完全可以放心使用它的现代语法特性,而不需要操心与老版本浏览器兼容的问题。

注意:如果你是Web开发人员,我建议你使用新的JavaScript语法。有一些工具比如 Babel,可以将现代JavaScript语法转变为传统JavaScript语法,这样就能和老式浏览器进行兼容。

PropertyFinderApp 类继承自 React.Componen,后者是React UI中的基础。Components包含了一些不可变属性、可变属性和一些渲染方法。当然,这个简单App中,我们就用到一个render方法。
React Native 的Components不同于UIKit 类,它们是轻量级的对象。框架会将React Components转换为对应的本地UI对象。
最后敲入如下代码:

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

AppRegistry 代表了App的入口以及根组件。保存文件,返回Xcode。确保当前Scheme为PropertyFinder ,然后在模拟器运行App。你将看到如下效果:

看到了吧,模拟器将JavaScript代码渲染为本地UI组件,你不会看到任何浏览器的痕迹。
你可以这样来确认一下:
在Xcode中,选中 DebugView DebuggingCapture View Hierarchy,查看本地视图树。你将找不到任何UIWebView实例。

你一定会惊奇这一切是怎么发生的。在 Xcode 中打开 AppDelegate.m,找到application:didFinishLaunchingWithOptions:方法。
在这个方法中,创建了一个RCTRootView,该对象负责加载JavaScript App并渲染相关视图。
App一启动,RCTRootView会加载如下URL的内容:

http://localhost:8081/index.ios.bundle

还记得App启动时弹出的终端窗口吗?终端窗口中运行的packager和server会处理上述请求。
你可以用Safari来打开上述URL,你将会看到一些JavaScript代码。在React Native 框架代码中你会找到“Hello World”相关代码。

当App打开时,这些代码会被加载并执行。以我们的App来说,PropertyFinderApp组件会被加载,然后创建相应的本地UI组件。