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 Props (属性)

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

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

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

React Native从零开始(三)Props(属性)和State(状态)

React Native从零开始(三)Props(属性)和State(状态) 一、Props(属性) 首先官网上的介绍:...

ReactNative入门之props与state

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

React学习笔记---Props&State

Propsprops是什么?props是properties(属性、性能)的缩写,我们可以通过他把任意类型的数据传递给组件。 大部分组件从Props获取数据并渲染 他是只读的!!!来看一个例子va...

React native学习第一章:Props

在React native中国里面有对props的定义: 大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。 import React, { Compone...

React Native入门学习笔记三(JSX语法)

参考示例: https://github.com/ruanyf/react-demosdemo2 简单数组遍历var names = ['Alice', 'Emily', 'Kate'];React...
  • xundh
  • xundh
  • 2016年06月23日 23:00
  • 6106

React Native学习笔记一之搭建开发环境

因为项目需要,今天开始正式学习React Native,先来搭建个开发环境忐忑的心情因为项目比较急,而且客户要求使用React Native开发,只能先学点基础然后在项目中使用的时候,边做边学了,在保...

react native学习笔记13——FlatList上拉加载

我们可以利用官方组件RefreshControl实现下拉刷新功能,但React Native官方没有提供相应的上拉加载的组件,因此在RN中实现上拉加载比下拉刷新要复杂一点。 虽然没有直接提供上拉加载...

React-Native学习笔记之:Modal实现覆盖效果(类似安卓中PopuWindow)

Modal组件可以用来覆盖包含React Native根视图的原生视图,类似于Android原生控件中的PopuWindow效果。 例如点击某个Button会在当前页面上弹出一个覆盖层页面,可以在...
  • true100
  • true100
  • 2017年04月17日 14:43
  • 2214
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react native 学习笔记之Props
举报原因:
原因补充:

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