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 条评论
登录 后参与评论

相关文章

来自专栏技术墨客

React新特性——Protals与Error Boundaries

在React 16.x 新增了一个名为“Protals”的特性,直接按照字面意思翻译实在不靠谱。在描述这个特性时,我们还是用官方的英文单词来指定它。Portal...

1954
来自专栏前端说吧

js - 预加载+监听图片资源加载制作进度条

这两天遇到一个新需求:一个一镜到底的h5动画。因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕。即处理预加载。

5281
来自专栏DeveWork

WordPress 中获取文章的第一段文字的函数

之前写过一篇《WordPress 文章截断方式:有more标签的优先more标签,否则截断一定字数》,自认为是一个不错的首页文章截取方式,但如今Jeff 又发现...

1925
来自专栏进击的君君的前端之路

HTML知识点整理

1614
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(4)---自定义用户交互

你可以从多方面自定义用户界面来自定义用户与Spread控件的交互方式。同时,你还可以自定义如何处理用户交互方式。 设置允许用户进行的操作 下面的列表总结了通过控...

2076
来自专栏听雨堂

动态控件的新思路

        常常有如此感叹:动态控件好加,但是状态维持困难。就是说,加入动态控件很容易,关联处理事件也不难,但是对于控件的状态把握,却很麻烦。往往需要在lo...

1727
来自专栏更流畅、简洁的软件开发方式

.net firamework 框架里面的控件的继承关系。

     记得当初学习VB6.0的时候,入门的书,一上来就是控件的介绍,控件的属性、事件的使用,拖拽一个文本框、一个按钮,然后再双击按钮,在按钮的事件里面给文本...

2147
来自专栏QQ音乐前端团队专栏

Web Components 初探

任何 UI 框架或库最期望目标之一是帮助我们建立通用的模式或约定。

6304
来自专栏快乐八哥

使用jQuery Draggable和Droppable实现拖拽功能

上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能。最后运行的效果如下图所示: ? 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax ...

2416
来自专栏十月梦想

less快速入门

我们都知道写 CSS 代码是有些枯燥无味的,尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的...

1033

扫码关注云+社区