React-native 作为facebook开源项目,最近是火的一塌糊涂,它采用node.js能够写ios和android的native界面代码,简直是太酷了。支持动态更新,而且appstore 提交不会拒绝。

学习新的技术都是从HelloWorld开始的,我们先搞个HelloWorld看看React-native。

一,环境配置
(1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦。
(2)在Mac上安装Xcode,建议Xcode 6.3以上版本
(3)安装brew ,mac 上命令行的安装工具
终端命令:

 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

(4)安装node.js:https://nodejs.org/download/

brew install node

(5)建议安装watchman,

brew install watchman 

(6)安装flow:

brew install flow

ok,按照以上6个步骤,你应该已经配置好了环境,可以开启react-native之旅了。

二,创建项目

现在我们需要创建一个React-Native的项目,因此可以按照下面的步骤:
打开终端,开始React-Native开发的旅程吧。

(1)安装命令行工具

sudo npm install -g react-native-cli

(2)创建一个空项目

react-native init HelloWorld

(3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。

  我们来看看生成的文件

打开ios目录

(4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。
启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。

三、改改HelloWorld

Xcode里面的代码目录结构暂时不用管了,打开HelloWorld项目文件夹,找到index.ios.js文件。
index.ios.js文件就是React-Native JS 开发之旅的入口文件了。 先来个感性的认识,修改一
些文本,下一篇会解读里面的代码。用文本编辑器打开index.ios.js文件。
(1)找到代码<Text></Text>部分:

<Text style={styles.welcome}>
Welcome to React Native!
</Text>

修改成如下:

<Text style={styles.welcome}>
React-Native入门学习
www.cnblogs.com/likwo
</Text>

(2)找到代码

welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},

修改成如下:

welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'red',
},

  

cmd+R 直接看效果,看看红色是否已经修改

 

四、恭喜你, 你已经学会了ios  react-native的HelloWorld ,觉得有帮助,请点个赞!

 

iOS React-Native入门指南之HelloWorld的更多相关文章

  1. React Native入门指南

    转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Go ...

  2. React-Native入门指南之HelloWorld

    iOS React-Native入门指南之HelloWorld React-native 作为facebook开源项目,最近是火的一塌糊涂,它采用node.js能够写ios和android的nativ ...

  3. 【独家】React Native 版本升级指南

    前言 React Native 作为一款跨端框架,有一个最让人头疼的问题,那就是版本更新.尤其是遇到大版本更新,JavaScript.iOS 和 Android 三端的配置构建文件都有非常大的变动,有 ...

  4. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  5. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  6. React Native入门——布局实践:开发京东client首页(一)

    有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...

  7. React Native入门教程 3 -- Flex布局

    上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...

  8. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  9. React Native入门-刘望舒

    React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性 ...

  10. 李洪强iOS开发之-入门指南

    李洪强iOS开发之-入门指南 1零基础小白如何进行iOS系统学习 首先,学习目标要明确:其次,有了目标,要培养兴趣,经常给自己一些正面的反馈,比如对自己的进步进行鼓励,在前期小步快走:再次,学技术最重 ...

随机推荐

  1. Winform(C#.NET)自动更新组件的使用及部分功能实现

    声明:核心功能的实现是由园子里圣殿骑士大哥写的,本人是基于他核心代码,按照自己需求进行修改的.   而AutoUpdaterService.xml文件生成工具是基于评论#215楼 ptangbao的代 ...

  2. 【知识积累】服务器端获取客户端的IP地址(当客户端调用由Axis开发的WebService)

    一.前言 由于项目中一个小的模块需要获取客户端的IP地址以保证安全调用webservice接口,项目中客户端使用C#编写,服务器端使用Java编写,服务器端与客户端采用Axis开发的WebServic ...

  3. Android一些关于分辨率和布局的设置

      1.Android手机屏幕大小不一,有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢? drawable- hdpi.drawable- mdpi.dra ...

  4. Android系统目录介绍

    src目录:完成对java代码的编写 assets目录: 资源目录 res目录: 图片,布局文件和字符串,菜单等文件 bin目录:输出文件夹 如生成的apk安装文件 project.propertie ...

  5. 抓取代理IP

    写脚本从指定网站抓取数据的时候,免不了会被网站屏蔽IP.所以呢,就需要有一些IP代理.随便在网上找了一个提供免费IP的网站西刺做IP抓取.本次实践抓取的是其提供的国内匿名代理.可以打开网站查看一下源码 ...

  6. 载入条LoadingBar

    这个控件太傻瓜了,只搁在博客里算了.日前需要用到一个载入条, 但不想找GIF图片,.NET里面没有提供这个控件,只有ProgressBar.自己写吧!要写也不难,就是周期性绘制一个长方形,让那个长方形 ...

  7. 注册asp.net 4.0 到iis

    如果没有按照正常的先装iis后装.net的顺序,可以使用此命令重新注册一下: 32位的Windows:------------------------------------------------- ...

  8. Redis配置集群二(window)

    第一篇那redis的基础命令都差不多讲了一遍了,这篇就将怎么配置集群了,最后要达到的效果是一台主redis,还有几台从的redis,每次数据都是同步的,当主redis挂掉了,那么就会从几台从redis ...

  9. 2016 大连网赛---Different GCD Subarray Query(GCD离散+树状数组)

    题目链接 http://acm.split.hdu.edu.cn/showproblem.php?pid=5869 Problem Description This is a simple probl ...

  10. HDU 5792---2016暑假多校联合---World is Exploding

    2016暑假多校联合---World is Exploding Problem Description Given a sequence A with length n,count how many ...