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

相关文章

来自专栏jojo的技术小屋

原 Vue.js、vue安装步骤、单文件组

作者:汪娇娇 时间:2017年8月30日 1、npm淘宝镜像 直接用npm安装vue-cli会特别慢,在安装vue-cli之前可以先安装一个淘宝镜像。之后的安装...

3194
来自专栏Ken的杂谈

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

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

1732
来自专栏小狼的世界

如何在iOS 7.0中隐藏状态栏

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

862
来自专栏Python绿色通道

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

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

3774
来自专栏DeveWork

Google Chrome 浏览器 开发者工具 使用教程

对于Chrome 浏览器,除了占用内存的缺点,其他都很不错。对于Chrome 浏览器的开发者工具,Jeff 除了Elements、Resources、Netwo...

4846
来自专栏企鹅号快讯

前端性能优化——桌面浏览器前端优化策略

作者:ouven https://my.oschina.net/zhangstephen/blog/1601382 摘要: 前端性能优化是一个很宽泛的概念,本书...

2486
来自专栏云瓣

[译]React 在服务端渲染的实现

原文地址:Server-Side React Rendering 原文作者:Roger Jin React 在服务端渲染的实现 React是最受欢迎的客户...

3147
来自专栏Petrichor的专栏

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

1272
来自专栏Maroon1105

WordPress之去掉顶部工具栏

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

5610
来自专栏思考的代码世界

Python网络数据采集之采集JavaScript|第09天

2065

扫码关注云+社区

领取腾讯云代金券