React Native 第一篇-Hello World!

傅_hc

发布于 2018-06-28 17:10:18

4480

发布于 2018-06-28 17:10:18

文章被收录于专栏：iOS开发随笔iOS开发随笔

前几天配置好了环境，今天打算写个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，是不是很强大？）就可以看到如下效果：