props

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。

以常见的基础组件Image为例,在创建一个图片时,可以传入一个名为source的prop来指定要显示的图片的地址,以及使用名为style的prop来控制其尺寸。

e.g

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native'; class TianXin extends Component {
render() {
let pic = {
uri: 'http://img4q.duitang.com/uploads/item/201506/25/20150625170821_hzsVL.jpeg'
};
return (
<Image source={pic} style={{width: 200, height: 200}} />
);
}
} AppRegistry.registerComponent('Bananas', () => TianXin);

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props,然后按需处理即可。下面是一个例子:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native'; class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
} class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
} AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

初探React-Native的更多相关文章

  1. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  2. React Native IOS源码初探

    原文链接 http://www.open-open.com/lib/view/open1465637638193.html 每个项目都有一个入口,然后进行初始化操作,React Native 也不例外 ...

  3. React Native For Android 架构初探

    版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/171 来源:腾云阁 https://www.qclo ...

  4. React Native桥接器初探

    本文假设你已经有一定的React Native基础,并且想要了解React Native的JS和原生代码之间是如何交互的. React Native的工作线程 shadow queue:布局在这个线程 ...

  5. React Native 初探

    推荐文章 React Native 简介:用 JavaScript 搭建 iOS 应用 (1) React Native 简介:用 JavaScript 搭建 iOS 应用 (2) React Nat ...

  6. react native 学习资料整理

    入门教程 深入浅出 React Native:使用 JavaScript 构建原生应用 http://www.appcoda.com/react-native-introduction/  中文版 h ...

  7. 移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native

    React Native使用初探 February 06 2015 Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法.该方法 ...

  8. 最火移动端跨平台方案盘点:React Native、weex、Flutter

    1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...

  9. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  10. React Native 常用学习链接地址

    Android Studio下载http://www.android-studio.org/ 第二章:Android Studio概述(一)http://ask.android-studio.org/ ...

随机推荐

  1. vbs连接sql server及写文件操作

    此段代码是连接SQL SERVER的 代码内connMMSQL的参数要根据实际情况传入 Function connMMSQL(ip,user,pwd,database,strsql) Dim conn ...

  2. oracle与mysql创建表时的区别

    oracle创建表时,不支持在建表时同时增加字段注释.故采用以下方式: #创建表CREATE TABLE predict_data as ( id integer ), mid ), time dat ...

  3. 【POJ2104】K-th Number

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABToAAAJ2CAIAAADwi6oDAAAgAElEQVR4nOy9a5Pj1nnvi0/Q71Llj3

  4. Linux-Memory小记

    以前我对这块认识很模糊,而且还有错误的认识:今天由我同事提醒,所以我决定来好好的缕缕这块的关系.图: -------------------------------------------1.参数含义 ...

  5. [转] 有java基础的人如何转行做大数据?

    数据有两个方向,一个是偏计算机的,另一个是偏经济的.你学过Java,所以你可以偏将计算机基础1. 读书<Introduction to Data Mining>,这本书很浅显易懂,没有复杂 ...

  6. MySql: 常见sql语句

    1. show create table mysql> show create table t \G*************************** 1. row ************ ...

  7. 在一个aspx或ashx页面里进行多次ajax调用

    在用ajax开发asp.net程序里.利用ashx页面与前台页面进行数据交互.但是每个ajax交互都需要一个ashx页面.结果是项目里一大堆ashx页面.使项目难以管理.现在我们就想办法让一个ashx ...

  8. CDR VBA将字母改为大写

    ActiveShape.Text.FontProperties.Uppercase = cdrSmallCapsFontCase

  9. Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解

    Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解   在swing中,基于业务的考量,会有对话框来限制用户的行为及对用户的动作进行提示. Swing中 ...

  10. PHP多条件查询 (租房查询)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...