开发者社区> oneapm_official> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

诚然,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?

下面,我们可以尝试用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 代码。
如何用React Native创建一个iOS APP?
运行这个 APP,你可以看到下图中的模拟器,如果你想在开发运行有几个步骤,你应该这样做。
如何用React Native创建一个iOS APP?
欢迎屏幕给出了一些关键的指令,你应该注意:编辑应用程序的用户界面,你应该修改,当你创建项目时生成的 index.ios.js 文件,如果您更改 JavaScript 代码,重新加载命令应用程序 Command-R 看到的变化,如果你想要更多的选择,使用命令控制 Command-Control-Z 打开开发者菜单,提供了这样的选项,使现场重新加载和浏览器的调试。
如何用React Native创建一个iOS APP?

在任何时候做本教程时你可能会遇到一个红色屏幕模拟器,可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时,关闭终端窗口,停止在 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 官方博客

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《React Native移动开发实战》出版啦
对不起,我来晚了 首先要感谢支持和关注我的朋友,感谢人邮的赵老师,还有公司的领导和同事,他们在我写作的过程中给了很多有用的信息,也给了很多有用的建议,为本书的写作提供了很大帮助。感谢,再次感谢!!! 工作6年多以来,一直想写一本自己的书,一方面是对自己工作经历的一个总结,也是对希望写一本书给曾经的自己一个交代,毕竟30岁的人了,搞不了几年的技术了。
1740 0
《React Native移动开发实战》一一3.3 完善轮播广告——Image组件
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.3节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1711 0
《React Native移动开发实战》一一1.6 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.6节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
918 0
《React Native移动开发实战》一一1.2 React Native的特点
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
2083 0
《React Native移动开发实战》一一1.5 小试牛刀——更改React Native项目源码
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1176 0
《React Native移动开发实战》一一1.1 看透React Native
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.1节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1960 0
《React Native移动开发实战》一一2.6 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.6节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1108 0
《React Native移动开发实战》一一2.2 Git版本控制工具
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1862 0
《React Native移动开发实战》一一3.9 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.9节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1371 0
+关注
oneapm_official
分享技术干货,解决性能问题,塑造品牌力量!
188
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载