您的位置:首页 > 移动开发

如何用 React Native 创建一个iOS APP?

2016-01-06 15:31 543 查看
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native,并将继续为 React Native 投资。

其好处显而易见:减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差,开发新功能可以更迅速。



下面,我们可以尝试用React Native创建一个 iOS APP.

在我们开始之前,我建议:你可以在 Github 里先下载 React Native 的代码框架。里面还有一些示例项目,2048 的游戏, Movies(一个看电影的 APP),SampleApp, TicTacToe (一款游戏)和 UIExplorer(能显示出所有用 React Native 替代的控件,如ListView,TabBar,MapView, Slider)),对于学习用如何用 React Native 创建 UI,这些都是非常好的例子,尤其是 UIExplorer APP,它几乎用到了每一个您的 APP 中需要创建的 UI 控件。

首先,我们先来安装相应的工具。React native 是使用 Node.js 来 创建 JavaScript 代码。如果你已经在你电脑上安装上了这些工具,你可以跳过下面这几步。

推荐使用 Homebrew的方式来安装 nvm,watchman 和 flow。

在Mac下,如果用homebrew,那么只用一行就可以装好:

brew install node


接下来安装watchman

brew install watchman


watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.

接下来安装 npm

npm install -g react-native-cli


nmp 是 node的一个三方管理工具,相当于 Ruby中的RubyGems,iOS中的 CocoaPods,Java中的 Gradle/Maven,基本上,它使您能够轻松下载和管理你的项目需要的任何依赖库。

在终端,找到你希望保存的项目文件,然后运行下面的文件夹。

react-native init BookSearch


以上使用 CLI 工具来构建一个 Native 项目,是准备建立并运行原样。当这个过程完成后,你就会在终端窗口中打开 Xcode 的BookSearch.xcodeproj 并运行应用程序像往常一样。做到这一点,模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时,它加载从以下网址 JavaScript 的应用程序。

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



终端被打开,服务器开始作出反应来处理上述请求。该 Native 负责读取和建设 JSX(我们将看看这个版本)和 JavaScript 代码。



运行这个 APP,你可以看到下图中的模拟器,如果你想在开发运行有几个步骤,你应该这样做。



欢迎屏幕给出了一些关键的指令,你应该注意:编辑应用程序的用户界面,你应该修改,当你创建项目时生成的 index.ios.js 文件,如果您更改 JavaScript 代码,重新加载命令应用程序 Command-R 看到的变化,如果你想要更多的选择,使用命令控制 Command-Control-Z 打开开发者菜单,提供了这样的选项,使现场重新加载和浏览器的调试。



在任何时候做本教程时你可能会遇到一个红色屏幕模拟器,可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时,关闭终端窗口,停止在 Xcode 中的应用并再次运行它。对于其他错误,是由于语法错误代码中或网络请求超时时(如果你的应用从互联网上获取数据),一个简单的重新加载后修复这个问题应该怎么做。

如果你在敦促 Command-R 键盘但什么都没有发生,硬件键盘可能没有连接到模拟器上。选择模拟器上的选项菜单以连接它:Hardware > Keyboard > Connect Hardware Keyboard.

如果你按上边程序做了它依然不能重新加载,那么你可能需要重启你的电脑。我遇到过一次突然死机,重启电脑可以完成加载。

我们现在开始构建应用程序,打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。你还可以使用 Xcode,但你会发现它并不适合因为在代码格式化、自动完成和语法错误突出显示时它不是非常灵活。你可以通过学习本文来决定并选择合适的 JavaScript IDE。我用过 RudbyMine,但实际上任何 IDE 都支持 JavaScript。如果你能得到一个支持 JSX 的那真很不错。

当你打开 indx.ios.js 文件,你就会看到正在运行的应用程序构建 UI 的代码。你可能看到以下代码块。

'use strict'


以上代码启用了严格的模式,增加了处理原生 JavaScript 代码对错误的改善。

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


以上代码可以加载 react-native 模块,并将它赋予变量的反应。在你调用任何模块之前你需要把外部模块加载到你的文件中来。可以把它作为Swift 和 Objective-C 的导入库。

var { AppRegistry, StyleSheet, Text,
View,
} = React;


上面是一个解构赋值,你可以通过它将多个对象属性分配给一个变量。这能让他们在文件作用域被引用。以上是可选择的,但如果你不用它,那么每次你使用一个组件在你代码中时,你就必须使用完全限定的名称,例如:「React.AppRegistry」而不能只用「AppRegistry」 、「React.StyleSheet」 而不能用「StyleSheet」 等等。

var BookSearch = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
</Text>
</View>
);
}
});


上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用 JSX(JavaScript语法扩展)来构建应用程序的 UI。如果您以前使用过 XML(甚至HTML),JSX 就会记住并熟悉你。它具有相同的均衡功能来打开和关闭标签并使用属性来设置值标签。你不需要使用 JSX 本地反应,你可以使用纯 JavaScript,但 JSX 建议它的简单定义树结构。如果你有很多 UI 的代码,通过大型的 JSX 树结构将更容易阅读理解。

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});


上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS(层叠样式表),在此之前这应该是熟悉的。React Native 使用 CSS 样式应用程序的UI。如果你看看 JSX 代码,你会看到不同风格的代码被用在不同的地方。例如: style={style.container}设置样式定义容器的外部视图包含其他UI组件。

上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS(层叠样式表),在此之前这应该是熟悉的。React Native 使用 CSS 样式应用程序的 UI。如果你看看 JSX 代码,你会看到不同风格的代码被用在不同的地方。例如: style={style.container}设置样式定义容器的外部视图包含其他 UI 组件。

(未完待续)

OneAPM Mobile Insight 以真实用户体验为度量标准进行 Crash 分析,监控网络请求及网络错误,提升用户留存。访问 OneAPM 官方网站感受更多应用性能优化体验,想阅读更多技术文章,请访问 OneAPM 官方技术博客

本文转自 OneAPM 官方博客
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ios