react native 学习笔记之Props

原创 2016年08月30日 20:20:54

在IOS或者Android中,通常一个类都有成员变量和函数,成员变量也可以叫成员属性。在props的例子程序中,可以

把Image看成系统定义好的类,而Greeting看成是我们自己定义的一个类,在react native中称为组件

(Component)。那么这样理解的话,source={pic} 就是给Image的成员变量source赋值了,只是react native的语法

需要用{}括起来。同样就不难理解style={{width: 193, height: 110}}。


其它的可以参看我代码中的注释,可以帮助理解。

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

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


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' />  //给属性(成员变量)name赋值
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

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

React Native 学习笔记(四)-- State和Props

Part OneImage组件的自带属性Part Two自定义组件并添加属性上面的贴图中我们总结了组件属性的使用和赋值,在JSX语法中给属性赋值,值一般都是对象。比如上面的source={pic}。下...
  • uana_777
  • uana_777
  • 2016年12月05日 19:44
  • 1691

react native 研究

一、React Native所做的工作 1)更新DOM      只更新不读取。  2)响应事件      响应事件,状态变化,告知渲染。  二、React Native的优...
  • ljloving
  • ljloving
  • 2015年11月25日 15:49
  • 2831

react-native进入姿势

从react到react native, 已经走过许多时间。react native是一个高性能的用javascript开发app的框架。 正好准备学一点react,然后觉得不如直接学习react-...
  • qq_27254949
  • qq_27254949
  • 2017年10月30日 18:05
  • 106

ReactNative入门之props与state

前一篇博客做了一个helloworld的简单例子。今天,继续RN之旅。学会props与state的使用之后,就可以做组件之间的传值和交互了。这对与RN开发来说十分关键。Props: 在java中创建...
  • ZACH_ZHOU
  • ZACH_ZHOU
  • 2017年01月04日 11:08
  • 1059

React Native 组件的默认属性Props的两种写法

首先是ES5 的写法  是通过 getDefaultProps(){ return {duration:1000} } ES 6 的写法如下: static de...
  • JLhaoran
  • JLhaoran
  • 2017年04月11日 14:32
  • 2571

react native开发中eslint配置和初始化

先简单介绍一下mac系统环境下,eslint的配置。
  • yuanshuaicsdn
  • yuanshuaicsdn
  • 2017年09月17日 06:49
  • 643

react-native的简单使用

一、网上搜集RNandroid的问题 版本更新太快,到现在还没有到达版本1.0,技术并没有那么稳定 使用了RN,就意味着和Google的android开发控件走上了两条不一样的路线。 二、目前存在的问...
  • dsc114
  • dsc114
  • 2017年03月03日 16:49
  • 3905

混合开发的大趋势之一React Native Props (属性)

转载请注明出处:王亟亟的大牛之路还是老规矩,先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android 坚持尽量每天更昨天翻了点RN的第...
  • ddwhan0123
  • ddwhan0123
  • 2016年08月18日 11:16
  • 4999

React传递Props

1、React里有一个非常常用的模型就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节坑内有分厂复杂的实现。可以使用JSX展开属性来合并现有的props和其他值: ...
  • slandove
  • slandove
  • 2016年02月23日 14:25
  • 9539

React Native ref高级用法&&setNativeProps使用

http://blog.csdn.net/que_li/article/details/52872479 http://blog.csdn.net/que_li/article/de...
  • u011904605
  • u011904605
  • 2016年12月01日 21:48
  • 787
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react native 学习笔记之Props
举报原因:
原因补充:

(最多只允许输入30个字)