初探React-Native
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的更多相关文章
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- React Native IOS源码初探
原文链接 http://www.open-open.com/lib/view/open1465637638193.html 每个项目都有一个入口,然后进行初始化操作,React Native 也不例外 ...
- React Native For Android 架构初探
版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/171 来源:腾云阁 https://www.qclo ...
- React Native桥接器初探
本文假设你已经有一定的React Native基础,并且想要了解React Native的JS和原生代码之间是如何交互的. React Native的工作线程 shadow queue:布局在这个线程 ...
- React Native 初探
推荐文章 React Native 简介:用 JavaScript 搭建 iOS 应用 (1) React Native 简介:用 JavaScript 搭建 iOS 应用 (2) React Nat ...
- react native 学习资料整理
入门教程 深入浅出 React Native:使用 JavaScript 构建原生应用 http://www.appcoda.com/react-native-introduction/ 中文版 h ...
- 移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native
React Native使用初探 February 06 2015 Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法.该方法 ...
- 最火移动端跨平台方案盘点:React Native、weex、Flutter
1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...
- React Native指南汇集了各类react-native学习资源、开源App和组件
来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...
- React Native 常用学习链接地址
Android Studio下载http://www.android-studio.org/ 第二章:Android Studio概述(一)http://ask.android-studio.org/ ...
随机推荐
- vbs连接sql server及写文件操作
此段代码是连接SQL SERVER的 代码内connMMSQL的参数要根据实际情况传入 Function connMMSQL(ip,user,pwd,database,strsql) Dim conn ...
- oracle与mysql创建表时的区别
oracle创建表时,不支持在建表时同时增加字段注释.故采用以下方式: #创建表CREATE TABLE predict_data as ( id integer ), mid ), time dat ...
- 【POJ2104】K-th Number
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABToAAAJ2CAIAAADwi6oDAAAgAElEQVR4nOy9a5Pj1nnvi0/Q71Llj3
- Linux-Memory小记
以前我对这块认识很模糊,而且还有错误的认识:今天由我同事提醒,所以我决定来好好的缕缕这块的关系.图: -------------------------------------------1.参数含义 ...
- [转] 有java基础的人如何转行做大数据?
数据有两个方向,一个是偏计算机的,另一个是偏经济的.你学过Java,所以你可以偏将计算机基础1. 读书<Introduction to Data Mining>,这本书很浅显易懂,没有复杂 ...
- MySql: 常见sql语句
1. show create table mysql> show create table t \G*************************** 1. row ************ ...
- 在一个aspx或ashx页面里进行多次ajax调用
在用ajax开发asp.net程序里.利用ashx页面与前台页面进行数据交互.但是每个ajax交互都需要一个ashx页面.结果是项目里一大堆ashx页面.使项目难以管理.现在我们就想办法让一个ashx ...
- CDR VBA将字母改为大写
ActiveShape.Text.FontProperties.Uppercase = cdrSmallCapsFontCase
- Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解
Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解 在swing中,基于业务的考量,会有对话框来限制用户的行为及对用户的动作进行提示. Swing中 ...
- PHP多条件查询 (租房查询)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...