你好， React Native
最后更新于：2022-04-01 04:30:02
在开始编写这个房产搜索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的[这篇文章](http://addyosmani.com/writing-modular-js/)。
然后加入如下语句：
~~~
var styles = React.StyleSheet.create({
text: {
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
}
});
~~~
这将定义一个css样式，我们将在显示“Hello World”字符串时应用这个样式。
在React Native 中，我们可以使用 [Cascading Style Sheets (CSS)](http://www.w3schools.com/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中，选中 Debug\View Debugging\Capture 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组件。