效果图



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

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

代码如下:

App.js

import React, { Component } from 'react';
import { Image } from 'react-native'; export default class Bananas extends Component {
render() {
//定义变量进行引用
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 375, height: 110}} />
);
}
}

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。

只需在render函数中引用this.props,然后按需处理即可。下面是一个例子:

import React, { Component } from 'react';
import { Text, View } from 'react-native'; class Greeting extends Component {
render() {
// 父组件中的props属性name,在子组件中取到
return (
<View style={{alignItems: 'center'}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}
} export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}



上面的例子出现了一样新的名为View的组件。View 常用作其他组件的容器,来帮助控制布局和样式

react-native中的props的更多相关文章

  1. react native中对props和state的理解

    最近使用react native这个新的技术做完一个项目,所以赶紧写个博客巩固一下. 今天我想说的是props和state,当然这是我个人的理解,如果有什么不对的地方,望指正. 首先我先说说props ...

  2. react native中props的使用

    react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...

  3. React Native中组件的props和state

    一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...

  4. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  5. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  6. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  7. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

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

  8. react native中state和ref的使用

    react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...

  9. React Native中加载指示器组件ActivityIndicator使用方法

    这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...

  10. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

随机推荐

  1. mysql数据库修改数据表引擎的方法

    对于MySQL数据库,如果你要使用事务以及行级锁就必须使用INNODB引擎.如果你要使用全文索引,那必须使用myisam. INNODB的实用性,安全性,稳定性更高但是效率比MYISAM稍差,但是有的 ...

  2. Delphi 在dbgrideh中表格输入数据时有效性的检查(转)

    在数据库系统设计中经常要用到在表格中进行数据录入,如何判断在数据导入时的数据有效性呢?下面介绍几种常用的方法与大家交流. 方法一:Dbgrid是与Table,在Table的Column的OnSetTe ...

  3. 使用JAVA获取JSON报文

    基本JSON格式: { "name": "liming", "age": "13", "array" ...

  4. JSTL 之 <c:out>

    jstl的<c:out value="${hello}"></c:out> EL表达式的${hello },两者一般没什么不同,但是EL表达式输出的时候回尝 ...

  5. CentOS6.5内核编译

    内核源码包下载地址,戳我 1.准备并解压内核安装包:linux-4.14.6.tar.xz # .tar.xz -C /usr/src/ # cd /usr/src/linux- #查看linux-目 ...

  6. BZOJ4356Ceoi2014 Wall——堆优化dijkstra+最短路树

    题目描述 给出一个N*M的网格图,有一些方格里面存在城市,其中首都位于网格图的左上角.你可以沿着网络的边界走,要求你走的路线是一个环并且所有城市都要被你走出来的环圈起来,即想从方格图的外面走到任意一个 ...

  7. 基准对象object中的基础类型----元组 (五)

    object有如下子类: CLASSES object basestring str unicode buffer bytearray classmethod complex dict enumera ...

  8. IntegrityError at /admin/users/userprofile/add/ (1452, 'Cannot add or update a child row: a foreign key constraint fails (`mxonline`.`django_admin_log`, CONSTRAINT `django_admin_log_user_id_c564eba6_

    报错现象 在执行 django 后台管理的时候添加数据导致 1452 错误 报错代码 IntegrityError at /admin/users/userprofile/add/ (1452, 'C ...

  9. HTTPserver v3.0 版本项目

    项目介绍 模拟使用 socket  多线程 / io多路复用 实现一个简单的 httpserver 和 webframe 交互的项目程序 期望可以实现简单的 以 http 协议为标准的 和浏览器 / ...

  10. 爬虫_淘宝(selenium)

    总体来说代码还不是太完美 实现了js渲染网页的解析的一种思路 主要是这个下拉操作,不能一下拉到底,数据是在中间加载进来的, 具体过程都有写注释 from selenium import webdriv ...