专栏首页iOS开发随笔React Native 第一篇-Hello World!

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 Native 环境配置的坑

    傅_hc
  • iOS 旧项目在Xcode 8下报错'SenTestingKit/SenTestingKit.h' file not found

    傅_hc
  • HTML-JavaScript动态添加元素appendChild

    开始自学一下前端的基础知识,这里记录一下知识点,毕竟不熟,不记录很容易就忘记了。前端最佳的学习资料就是在MDN,没有之一。

    傅_hc
  • 初识React

    小胖
  • React Native之React速学教程(上)

    React Native之React速学教程(上) 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发R...

    CrazyCodeBoy
  • 2020年值得你去试试的10个React开发工具

    JavaScript每天都在出现大量的框架和工具,而React是除了上次我们提到的Vue和Ember之外另一款比较流行的框架。但因为新的工具每天都在不断的出现,...

    葡萄城控件
  • React 16

    模版支持fragment和string类型,对应ReactElement数组和字符串

    ayqy贾杰
  • React组件的本质

    也许你已经使用React很长时间了,你使用优雅的jsx语法和React hooks来构建组件,最终构成页面。

    Mirone

扫码关注云+社区

领取腾讯云代金券