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. ThinkPHP3.2.3多文件上传,文件丢失问题的解决

    描述 thinkphp多文件上传时,有些时候会出现文件丢失的情况.比如上传多个图片,最终只上传了一个图片.本地测试的时候是正常的,但上传到服务器上就会出现丢失文件这种情况. 原因 查看tp上传类(Th ...

  2. C++指针参数引用

    粘个代码占位置,以后有时间把指针函数,函数指针都补上 #include <iostream> using namespace std; void freePtr1(int* p1){ /* ...

  3. 编写高质量代码:改善Java程序的建议

    建议的采用顺序是List<T>.List<?>.List<Object> List<T>.List<?>.List<Object> ...

  4. Struts开发包结构

  5. 父类div高度适应子类div

    父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...

  6. 应用市场中包名(package name)的唯一性

    一般的应用商店,在开发者上传应用(APP)的时候,都会对应用的包名进行唯一性的校验.如果此时,用户上传的应用的包名与数据库中的已有的APP的包名一样,那么正常情况下,该应用就不能上传,而弹出提示说,该 ...

  7. SpringMVC

    使用注解去完成整个项目 安装spring的一个插件,则相关的提示就会出来

  8. linux系统的初化始配置(包括网络,主机名,关闭firewalld与selinux)

    每次我们使用Linux都会对系统进行初始化的配置,下面我们一一列出来. 1.服务的开启 systemctl enable firewalld.service //将指定的服务设置为开机启动 syste ...

  9. CorelDRAW x6 X8安装失败解决方法

    CorelDRAW x6 X8自定义安装时,到最后经常会出现以下问题: 解决方法如下: 在自定义安装时,出现以下这个界面时,点击红色箭头的地方 将下图红色箭头指向的选项,点击取消,不要选上,即可解决安 ...

  10. 安卓手机 虚拟键盘输入用 position:fixed解决 !!!

    下面 主要代码 方便看. 样式 <style> *{ margin:0; padding:0; } html{ height:100%;/*关键代码*/ } body{ height:10 ...