一.了解index.ios.js

  React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发,开发效率高、发布能力强,不仅拥有hybrid的开发效率,同时拥有native app相媲美的用户体验。让我们使用以下react native命令生成一个项目。

react-native init demo --verbose

  现在让我们用编辑器打开index.ios.js文件,分析代码结构:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native'; class demo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
} const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
}); AppRegistry.registerComponent('demo', () => demo);

1 导入模块

  第一句:import React, { Component } from 'react';
  使用import引入模块,相当于java的import和c++的#include。在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样:

//ES5
var React = require("react-native");
var {
Image,
Text,
PropTypes
} = React; //引用不同的React Native组件

在ES6里,import写法更为标准

//ES6
import React, {
Image,
Text,
PropTypes
} from 'react-native';、

2 批量定义组件  

  第二句代码,批量定义组件:

import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

3 定义组件

  构建项目的入口类。在ES6里,通过定义一个继承自React.Component的class来定义一个组件类。里面的render方法就是渲染视图用的。return返回的是视图的模板代码。其实就是JSX的模板语法。

class demo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hello React Native.
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}

4 定义组件的属性类型和默认属性

  相对于web开发,需要提供视图的样式,那么StyleSheet.create就是干这件事的,只是用JS的自面量表达了css样式。在render方法返回的视图模板里已经体现出来了,即style={styles.container}.其中style是视图的一个属性,styles就是是定义的样式表,container是样式表中的一个样式。

const styles = StyleSheet.create({
container: {
flex: ,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: ,
textAlign: 'center',
margin: ,
color: 'red'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: ,
},
});

5 注册应用入口

  最后将APP组件demo渲染到容器中。

AppRegistry.registerComponent('demo', () => demo);

资料参考:
http://www.cnblogs.com/bennman/p/5301320.html

React Native 开发之 (04) 例子讲解的更多相关文章

  1. 【转】【React Native开发】

    [React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19)  [React Native开发]React Native控件之Touchable*系列组 ...

  2. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  3. React Native开发入门

    目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下Reac ...

  4. React Native开发技术周报2

    (1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...

  5. React Native开发技术周报1

    (一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...

  6. DECO 一个REACT NAtive 开发IDE工具

    DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:h ...

  7. React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE

    Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮 ...

  8. React Native 开发笔记

    ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...

  9. React Native开发的通讯录应用

    React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero) 0.前言: 项目地址:https://github.com/vczero/React-Native ...

随机推荐

  1. 与Python Falling In Love_Python跨台阶(面向对象)

    第二课会介绍Python中的一些变量的使用.列表.元组.字典等一些详细内容...篇幅会比较多...因此在整理中... 先跳过第二课...直接来第三课..Python中面向对象的学习以及与mysql数据 ...

  2. 你的C#代码是怎么跑起来的(二)

    接上篇:你的C#代码是怎么跑起来的(一) 通过上篇文章知道了EXE文件的结构,现在来看看双击后是怎样运行的: 双击文件后OS Loader加载PE文件并解析,在PE Optional Header里找 ...

  3. test2

    package com.analysis.code; import org.apache.commons.lang3.StringUtils; import java.io.*; import jav ...

  4. HTML5+JS 《五子飞》游戏实现(八)人机对战

    要想实现人机对战,就必须让电脑自动下棋,而且要知道自动去查找对方的棋子,看看有没有可以挑一对的,有没有可以夹一个的,这样下起来才有意思. 当电脑用户下完棋后,电脑应立即搜索用户的棋子,然后如果没有被吃 ...

  5. js 0.1+0.2!=0.3

    准确的说就是js小数采用ieee的64位的双精度,1位表示正负,11位指数,52位小数,所以对于0.1js是无法精确表示的的,所以会多点, http://www.jb51.net/article/77 ...

  6. Vmware player 12

    免费版的虚拟机Vmware,体积小.运行快速... 官方下载界面 下载地址: http://yunpan.cn/cm5smywVvqS8V  访问密码 35ac 官方下载:点击下载

  7. android 获取时间

    首先,先说下java下可以正常使用的方法: import java.text.DateFormat; import java.text.SimpleDateFormat; import java.ut ...

  8. MyBatis学习--延迟加载

    简介 在resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能.例如:我们查询订单并 ...

  9. Django入门之自定义页面

    1.创建项目,创建app django-admin.py startproject HelloWord python3 manage.py startapp sync_one #第二步需要进入Hell ...

  10. java.io.IOException: Timed out waiting 20000ms for a quorum of nodes to respond

    16-11-14 21:23:41,540 FATAL org.apache.hadoop.hdfs.server.namenode.FSEditLog: Error: starting log se ...