这是深入浅出React Native教程的第二篇文章。

1. 环境配置


React Native环境配好之后,就可以开始创建我们的第一个App啦。

打开控制台,输入

react-native init AwesomeProject

上述命令的作用是在当前文件夹下创建一个名字叫AwesomeProject的项目模板。在运行该命令之前,可以先用cd命令到自己想创建react native的文件夹下。

当然,比较坑的是,执行这个命令会用耗费很长很长的时间,有时候还会出现各种各样的错误,例如,没有权限。所以在我们这次教程中,直接拿一个初始的项目来修改使用。地址如下:

github: https://github.com/CellChen/react-native-init

下载下来之后,找到tar文件夹,里面就是我们需要用到的项目了。

项目文件如下所示:(该教程主要是iOS开发,所以先忽略andorid相关的,其实android与iOS的目录类似。)

可以看出项目主要由index.ios.js以及ios项目组成。

打开控制台,确保当前控制台所指向的目录是AwesomeProject,输入

npm start

该命令主要是启动开发使用的本地服务器。

当服务器启动后,就可以用xcode打开ios项目,编译、运行,就可以看到这个最最最最最初始的项目啦~~

我们可以尝试修改下index.ios.js文件看看效果~

用文件编辑器(个人还是比较推荐使用sublime,好看、好用、插件多~)打开index.ios.js,可以看到如下的代码:

将第20行代码修改成 "这个是我第一个React Native的应用"

切换回iphone模拟器,CMD+R刷新,可以看到模拟器上的标题改成我们最新修改的文字了~(如果CMD+R刷新后看到的还是以前的文字的话,可以尝试将服务器停掉再重新打开~)

好啦,以上就是我们的第一个React Native应用了,如果对项目里的代码不理解,也没关系,后续会慢慢解释的~

深入浅出React Native 2: 我的第一个应用的更多相关文章

  1. 深入浅出React Native 3: 从零开始写一个Hello World

    这是深入浅出React Native的第三篇文章. 1. 环境配置 2. 我的第一个应用 将index.ios.js中的代码全部删掉,为什么要删掉呢?因为我们准备从零开始写一个应用~学习技术最好的方式 ...

  2. 深入浅出 React Native:使用 JavaScript 构建原生应用

    深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...

  3. 深入浅出React Native 1: 环境配置

    该教程主要介绍如何用react native来开发iOS,所以首先,你需要有一台mac,当然黑苹果也是可以的~ 创建一个react native的项目只需要安装以下五个组件~~(但....坑爹的是,不 ...

  4. 从零学React Native之01创建第一个程序

    本篇首发于简书 欢迎关注 上一篇文章是时候了解React Native了介绍了React Native.大家应该对React Native有个初步的认识. 接下来我们就可以初始化一个React Nat ...

  5. [译] Facebook:我们是如何构建第一个跨平台的 React Native APP

    英文原文(需FQ):https://code.facebook.com/posts/1189117404435352/ 早些时候,我们介绍过iOS版的React Native. React Nativ ...

  6. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  7. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  8. React Native资料汇总

    React Native 官方文档中文版翻译 http://wiki.jikexueyuan.com/project/react-native/homepage.html REACT NATIVE开发 ...

  9. react native 学习资料整理

    入门教程 深入浅出 React Native:使用 JavaScript 构建原生应用 http://www.appcoda.com/react-native-introduction/  中文版 h ...

随机推荐

  1. Delete Volume 操作 - 每天5分钟玩转 OpenStack(57)

    今天讨论 cinder 如何删除 volume . 状态为 Available 的 volume 才能够被 delete.如果 volume 当前已经 attach 到 instance,需要先 de ...

  2. C#由变量捕获引起对闭包的思考

    前言 偶尔翻翻书籍看看原理性的东西确实有点枯燥,之前有看到园中有位园友说到3-6年工作经验的人应该了解的.NET知识,其中就有一点是关于C#中的闭包,其实早之前在看书时(之前根本不知道C#中还有闭包这 ...

  3. mac下安装tomcat

    在window下面搭建tomcat环境很简单,那是因为我们不熟悉mac系统,当我们习惯了命令行的时候,也是so easy,只要通过以下几个步骤就可以解决,本人亲测可用,不会可以留言. 1.进入apch ...

  4. C# 对象锁

    现在有一种场景,服务端将一个任务派发给10个客户端执行,所有客户端执行完后,整个任务才算执行完. 每个客户端执行完后,通过http发送一个完成的消息给服务端,服务端发送邮件通知给用户. 当10个客户端 ...

  5. ES6 - Note6:Set与Map

    Set和Map是ES6中新增的数据结构,Set是集合,无序唯一,Map类似于对象,也是"key-value"形式,但是key不局限于字符串. 1.Set的用法 Set是构造函数,可 ...

  6. linux内核中的每cpu变量

    一.linux中的每cpu变量 看linux内核代码的时候,会发现大量的per_cpu(name, cpu),get_cpu_var(name)等出现cpu字眼的语句.从语句的意思可以看出是要使用与当 ...

  7. 如何高效地向Redis插入大量的数据

    最近有个哥们在群里问,有一个日志,里面存的是IP地址(一行一个),如何将这些IP快速导入到Redis中. 我刚开始的建议是Shell+redis客户端. 今天,查看Redis官档,发现文档的首页部分( ...

  8. 玩转Jquery,告别前端知道思路忘记知识点的痛苦

    本节内容: 本章主要讲解一下jquery,主要是工作中用的前端框架是datetables框架,然后datetables框架又是基于jqeury研发的,所以要想学一个东西,就必须要了解其底层,不然走路都 ...

  9. C++面向对象

    此博文仅作为C++考研专业课的复习内容. 面向对象 构造函数 在对象被创建的时候将自动调用. 复制构造函数 形参是本类对象的引用.其作用是使用一个已经存在的对象,去初始化一个同类的新对象. 复制构造函 ...

  10. Oracle Recovery 01 - 常规恢复之完全恢复

    背景:这里提到的常规恢复指的是数据库有完备可用的RMAN物理备份. 实验环境:RHEL6.4 + Oracle 11.2.0.4 DG primary. 一.常规恢复之完全恢复:不丢失数据 1.1 单 ...