React-Native入门指南之HelloWorld

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 直接看效果,看看红色是否已经修改

 

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

 
时间: 2024-10-09 13:17:53

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

React Native 入门宝典

声明:该书的笔者为徐嬴老师,一名具有5年IOS开发经验,和两年RN开发经验的老司机. 原文可以在gitbook上找到 笔者只是为他的书中提的的一些列问题,进行有偿答疑. 有偿答疑.本书将持续保持更新,有关问题可以加群讨论. 正在上传...取消 简介 笔者在研究ReactNative过程中,发现其中文资料相对较少,已出版的大部分图书资料都已过时.Facebook中的ReactNative开发团队以每月更新一版的速度在向前推进版本. 为更好的让广大开发者快速入门ReactNative,笔者结合自身开

React Native 入门基础知识总结

中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看看阮一峰老师的<ECMAScript 6 入门>这篇文章.里面涉及很多 ES6 的新特性.我之前也是看了阮老师的文章做了一些学习笔记 ES6 学习笔记. 1.环境搭建 环境搭建中文教程,点击跳转RN中文社区 :http://reactnative.cn/docs/0.40/getting-star

React Native入门-刘望舒

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

React Native入门(二)Atom+Nuclide安装、配置与调试

相关文章 React Native入门 前言 上一篇文章我们搭建了开发环境,并写了个Hello World.这一节我们来学习React Native的开发IDE:Atom+Nuclide的安装.配置与调试.本文所讲的内容只适用于Mac平台. 1.开发IDE选择 React Native的开发IDE有很多种,比如FaceBook 官方推荐的 Atom+Nuclide.Android Studio的同门WebStorm(收费).Sublime Text 3.Visual Studio Code和De

React Native入门(三)组件的Props(属性)和State(状态)

相关文章 React Native入门系列 前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性.样式等等.同样的,React Native中的组件也有属性.样式和状态. 1.Props(属性) 组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变.下面拿Image的source属性和Text的onPress属性作为举例. Image的source属性 import React, {Component} from 're

React Native升级指南|v0.40+升级适配经验与心得

尊重版权,未经授权不得转载 本文出自:http://blog.csdn.net/fengyuzhengfan/article/details/54585899 React Native作为一个有上千开发者参与的开源项目,自从2015年3月27日第一版发布以来到现在已经有147次版本发布了,平均起来几乎每周都会有新的版本发布.随着一次次版本的迭代,React Native也逐渐稳定,版本发布频率保持在了每一到两周一次.新版本不停的迭代对于React Native开发者来说,及时升级React Na

React Native入门(一)环境搭建与Hello World

前言 目前关于React Native的教程很多,官方文档写的也不错,但是感觉大部分教程写的不是很清楚,导致我各种碰壁.因此我来写一个简洁的教程.本篇文章基于React Native 0.43,只适用于用Windows平台的Android开发者. 1.配置React Native 首先我们要先来安装一些软件,如下所示. Chocolatey Chocolatey是一个Windows上的命令行包管理器,安装了Chocolatey就可以通过命令行来安装一些我们需要软件.我们打开cmd命令行程序使用如

React Native入门-实战解析(上)

来自Leo的原创博客,转载请著名出处 我的stackoverflow 概述 随着app端越来越复杂,迭代越来越快,很多app采用原生+html5的方式来实现,然后不知道什么时候,它就有了个高大上的名字 - hybrid app.类似的框架也很多,比较有名的有 Ionic PhoneGap 这种app的原理是,用webview来实现类似原生的界面,也就是用h5写的代码是运行在webview里的.优点很明显 动态部署(不需要每次通过应用商店的审核,尤其是iOS,审核有时候真的觉得两颗蛋不够疼的.)

React Native ——入门环境搭配以及简单实例

一.Homebrew 是OS X 的套件管理器. 首先我们需要获取 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 1.我们可以先通过在终端输入: brew -v 如果没有安装就输入Homebrew的镜像路径去下载 2.拥有了brew,就可以通过它去下载一些依赖了,比如node,我们可以在终端输入:brew install node,如果