这是深入浅出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. 从零开始编写自己的C#框架(5)——三层架构介绍

    三层架构对于开发人员来说,已经是司空见惯了,除了大型与超小型项目外,大多都是这种架构来进行开发. 在这里为初学者们简单介绍一下三层架构: (下面内容摘自<趣味理解:三层架构与养猪—<.NE ...

  2. Sublime写MarkDown实时预览

    [TOC] Sublime写MarkDown实时预览 Sublime作为神器,实至名归. 首先 1.安装Sublime,并安装Package Control,这里不多说. 2.安装MarkDown P ...

  3. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  4. Windows Server 2008 R2 添加且制成“NFS服务器”角色后与Unix客户端匿名访问常见问题

    在复杂的主机与网络环境中,我们可能会接触到多种主机与操作系统,配合Windows Server 2008 R2的原生“NFS服务器”功能可以让这样的复杂操作系统更方便应用. 然而面对网络上众多的帮助指 ...

  5. Cesium应用篇:3控件(3)SelectionIndicator& InfoBox

    假设这样一个场景,用户在Cesium球上加载了一个GeoJson文件(DataSource),里面是全美国所有州的Geometry信息(Entity),叠加到球面后,你自然会有一种冲动,点击某一个州, ...

  6. (十)WebGIS中地理坐标与屏幕坐标间的转换原理

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 地图本身是拥有坐标的,一般可以大致分为平面坐标和经纬度坐标, ...

  7. scikit-learn一般实例之一:保序回归(Isotonic Regression)

    对生成的数据进行保序回归的一个实例.保序回归能在训练数据上发现一个非递减逼近函数的同时最小化均方误差.这样的模型的好处是,它不用假设任何形式的目标函数,(如线性).为了比较,这里用一个线性回归作为参照 ...

  8. Nancy之给我们的网站添加自定义图标

    当我们在做一个网站时,可能经常会有这样一个需求,要给我们做的网站添加一个自定义的图标. 在Nancy中,默认是的下面这样 一个妹子的头像,其实也是挺好看的!! 那么当我们想要替换这个默认的,应该要怎么 ...

  9. Web页面实现后台数据处理进度与剩余时间的显示

    1.页面后台代码添加如下属性: /// <summary> /// 总数 /// </summary> private double total { set { Session ...

  10. 【Tip】如何让引用的dll随附的xml注释文档、pdb调试库等文件不出现在项目输出目录中

    项目输出目录(bin/debug|release)中经常是这个样子: main.exemain.pdb a.dll a.xml b.dll b.pdb b.xml ... 其中xml是同名dll的注释 ...