React Native 一个开始

React Native是Facebook开源的一个移动端开发框架。Facebook用js封装了大量的原生控件,让开发可以用React.js开发移动端App。

我们可以在React中文网查看开发环境的搭建。

http://reactnative.cn/docs/0.44/getting-started.html#content

搭建完环境后,我们可以看到一个极简的demo:

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello React</Text>
    );
  }
}

// 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldDemo', () => HelloWorldApp);

我们先来分析一下,这一段代码的结构。

这一段代码可以分为三部分:

  1. 依赖包引入:
  • 引入的是React和Component基础组件。
  • 引入App注册类和需要的UI组件(Text)。
  1. 创建一个React组件类,重载它的渲染方法:
  • 返回一段类似H5的代码。
  • HelloWorldApp的render方法在调用时,会调用子控件(子Component)的render方法。
  1. 将第2步中创建的Component注册到App中:
  • 这里需要注意的是registerComponent第一个参数是需要注册的原生App的项目名,第二个参数是在第2步中注册的Component。

在环境配置完成后,再完成这三步,就可以运行一个显示"Hello React"的界面。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python绿色通道

Python爬虫:学习Selenium并使用Selenium模拟登录知乎

现在开始要学习使用Python进行动态爬虫了,而Selenium是来进行动态爬虫的一种工具

1564
来自专栏ytkah

小程序提升界面使用体验 丰富了内容展示组件

  昨晚,微信小程序开放了更多页面内能力,主要是提升界面使用体验、丰富内容展示组件、完善系统硬件能力,这些能力的提升可以帮助开发者更好地优化使用体验,让用户爱上...

4148
来自专栏web编程技术分享

【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面

3858
来自专栏快乐八哥

jQuery Tools Scrollable使用的限制

在现在很多项目中,都会使用到jQuery Tools中scrollable。特别对于显示Photo Gallery,当然目前国内国外都有第三方非常优秀的的类似j...

1945
来自专栏小程序的道路

小程序生命周期

小程序并不是 HTML5 应用,而是更偏向于传统的 CS 架构,它是基于数据驱动的模式,一切皆组件(视图组件)。下面是小程序与普通 Web App 的对比。 ...

1351
来自专栏Ken的杂谈

JS/Jquery解决回车键触发表单提交问题

因为现在大多数浏览器,当表单中的文本框或其他可提交元素为当前焦点时,敲回车键就会触发表单提交。

902
来自专栏微信小程序开发

小程序开发注意点儿,新手入门基础

1、域名配置,不配置无法访问 小程序开发,要调用API,就必须把域名填写在配置里面,这点儿一定要记住,万一服务端突然上线一次,发现线上服务出问题了,很有可能就...

51611
来自专栏Petrichor的专栏

tkinter: 事件 & 绑定 (Events and Bindings)

1012
来自专栏小狼的世界

如何在iOS 7.0中隐藏状态栏

使用Cordova做了一个小项目,在原来iOS6的时候显示挺好,升级为iOS7后,每次App启动后都会显示状态栏,而且状态栏和App的标题栏重叠在一起,非常难看...

742
来自专栏Maroon1105

WordPress之去掉顶部工具栏

用WP搭建自己博客的人都会发现网站上面有一个黑色的工具栏,影响网站美观度,那么怎么去掉顶部工具栏呐?

4080

扫码关注云+社区