React Native 第一篇-Hello World!

前几天配置好了环境,今天打算写个hello world看看rn的神奇之处 首先运行成功的界面是

Simulator Screen Shot 2016年4月22日 上午12.38.41.png

同时还有一个终端界面也会运行起来,这是React Navtive Packager,它在node容器中运行。千万不要关闭这个窗口,让它一直运行在后面。如果你不小心关了它,可在Xcode中先停止程序,再重新运行程序。

然后我们打开文件下的index.ios.js文件(我用Sublime Text打开),然后删除里面的东西(或者注释也行),不用重新运行Xcode,等一下你就知道rn的强大之处。

然后加入以下语句:(我的项目名称为:PropertyFinder)

'use strict'  //这将开启严谨模式,这会改进错误的处理并禁用某些js语法特性,这将让JavaScript表现得更好。
var React = require('react-native'); //这将加载 react-native 模块,并将其保存为React变量。React Native 使用和Node.js 一样的 require 函数来加载模块,类似于Swift中的import语句。
var styles = React.StyleSheet.create({
    text:{
        color:'black',
        backgroundColor:'white',
        fontSize:30,
        margin:80
    }
});//这将定义一个css样式,我们将在显示“Hello World”字符串时应用这个样式。
class PropertyFinderApp extends React.Component{
    render(){
        return React.createElement(React.Text,{style:styles.text},"Hello World");
    }
}//

React.AppRegistry.registerComponent('PropertyFinder',function(){return PropertyFinderApp});

保存文件,返回模拟器(模拟器在选中状态),直接在模拟器上按command + R重新运行(不用重新运行Xcode,是不是很强大?)就可以看到如下效果:

Simulator Screen Shot 2016年4月24日 下午11.34.47.png

接下来你可以随便改改样式玩一下

本文Demo:https://github.com/huicongfu/PropertyFinder 原文链接:React Native Tutorial: Building Apps with JavaScript

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏linux驱动个人学习

硬盘写到一半时断电,文件系统里会发生什么?

知乎问题: 断电时文件系统发生了什么?硬盘又发生了什么?下一次开机时写到一半的文件在系统层面还在吗?在底层还在吗? 更进一步的, 文件系统如何保证事务性, 会不...

2694
来自专栏听雨堂

用AutoHotKey建立自己的便签本

     如果要我选一个我最常用的windows程序,那一定是notepad了,事实上,我把它的快捷方法放到快速启动栏以便随时打开它。顺手记录各种东西:网址,关...

1878

Go微服务,第10部分:集中式日志记录

在Go微服务博客系列的这一部分中,我们将介绍基于Logrus,Docker Gelf日志驱动程序和“作为服务的日志记录” Loggly服务的Go微服务的日志记录...

1263
来自专栏idba

Python 模块之logging

Python 的logging 模块定义的函数和类为应用程序和库实现了一个灵活的事件日志系统。该模块提供多种日志级别并且支持多种记录日志的方式比如 终端,文...

672
来自专栏刘远的专栏

airflow—服务失效监控(5)

因为DAG文件会在调度器和worker执行时加载,如果在DAG中引用了第三方的库或进行了DB操作,则这些操作会在DAG文件加载时被频繁调用。举个例子,如果升级了...

1203
来自专栏Java Web

Java 面试知识点解析(五)——网络协议篇

1719
来自专栏about云

kafka权威指南 第二章第6节 Kafka集群配置与调优

问题导读: 1 Kafka集群有什么优势? 2 集群中部署多少个节点合适? 3 集群针对系统如何调优? Kafka集群 对于本地的开发工作或者概念性的...

3586
来自专栏PHP技术

Session原理简述

Session存在的意义,估计每个用做web开发的人都是了解的,就为了解决HTTP是个无状态协议所带来的问题,不多说了。这里主要想说的是服务端与客户端是如何利用...

1134
来自专栏Java Web

Java 面试知识点解析(五)——网络协议篇

在遨游了一番 Java Web 的世界之后,发现了自己的一些缺失,所以就着一篇深度好文:知名互联网公司校招 Java 开发岗面试知识点解析 ,来好好的对 Jav...

3519
来自专栏大内老A

ASP.NET Core应用针对静态文件请求的处理[1]: 以Web的形式发布静态文件

虽然ASP.NET Core是一款“动态”的Web服务端框架,但是在很多情况下都需要处理针对静态文件的请求,最为常见的就是这对JavaScript脚本文件、CS...

1765

扫码关注云+社区