zoukankan      html  css  js  c++  java
  • React Native HelloWorld

    React Native helloworld

    'use strict';

    这行代码是用于开启 Strict Mode,Strict mode的错误处理可以有所提高,JavaScript的一些语言缺陷也可以避免。简而言之就是,JavaScript在这种模式下工作地更好!

    var React = require('react-native');

     这句代码是将 react-native 模块加载进来,并将它赋值给变量 React 的。React Native 使用同 Node.js 相同的模块加载方式:require,这个概念可以等同于 Swift 中的“链接库”或者“导入库”。

    var styles = React.StyleSheet.create({
      text: {
        color: 'black',
        backgroundColor: 'white',
        fontSize: 30,
        margin: 80
      }
    });
    

    以上代码定义了一段应用在 “Hello World” 文本上的样式。如果你曾接触过Web开发,那你很可能已经发现了:React Native 使用的是 CSS 来定义应用界面的样式。

    class PropertyFinderApp extends React.Component {
      render() {
        return React.createElement(React.Text, {style: styles.text}, "Hello World!");
      }
    }
    

      

    类 (class) 是在ES6中被引入的,纵然JavaScript一直在进步,但Web开发者受困于兼容浏览器的状况中,不能怎么使用JS的新特性。React Native运行在JavaScriptCore中是,也就是说,你可以使用JS的新特性啦,完全不用担心兼容什么的呢。

    注意:如果你是一名 Web 开发者,我百分百鼓励你要使用现代的JavaScript,然后使用像 Babel 这样的工具生成兼容性的 JavaScript,用于支持兼容性不好的老浏览器。

    PropertyFinderApp 继承了 React.Component(React UI的基础模块)。组件包含着不可变的属性,可变的状态变量以及暴露给渲染用的方法。这会你做的应用比较简单,只用一个渲染方法就可以啦。

    React Native 组件并不是 UIKit 类,它们只能说是在某种程度上等同。框架只是将 React 组件树转化成为原生的UI。

    最后一步啦,将这一行加在文件末尾:

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

      

    AppRegistry 定义了App的入口,并提供了根组件。

    保存 PropertyFinderApp.js,回到Xcode中。确保 PropertyFinder 规划(scheme)已经勾选了,并设置了相应的 iPhone 模拟器,然后生成并运行你的项目。几秒之后,你应该就可以看到 “Hello World” 应用正在运行了:

  • 相关阅读:
    在 Android 4.1上,分析 input -- android framework 部分 2
    Linux内核spin_lock、spin_lock_irq 和 spin_lock_irqsave 分析
    module_init 和 late_initcall 区别
    在 Android 4.4.4 上,分析 input -- android framework 部分
    Android 输入系统 与 按键
    INIT_WORK和INIT_DELAYED_WORK详解
    Android 中多点触摸协议
    android 电容屏(四):驱动调试之驱动程序分析篇 -- FocalTech
    android 电容屏(三):驱动调试之驱动程序分析篇
    android 电容屏(二):驱动调试之基本概念篇
  • 原文地址:https://www.cnblogs.com/streamice/p/react-helloWorld.html
Copyright © 2011-2022 走看看