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}。下...

React学习笔记---Props&State

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

React Native学习笔记之--组件之间数据的传递和跳转

React Native学习笔记之–组件之间数据的传递和跳转 自定义属性的定义方式和传递 假定组件ComponentA中的自定义属性为static props = { title: '...

react-native 学习笔记

语法相关 state与prop 语法相关state与propstate用法: state很像绑定在控件中的参数,当更新state中的值时,对应控件的显示就会更新。

React Native 学习笔记_1

搭建开发环境 根据 https://reactnative.cn/docs/0.40/getting-started.html#content 官方网站搭建开发环境 欢迎使用React Nati...

React-Native傻瓜式学习笔记(二):封装Navigator工具类

最近国内外使用React-Native写APP的公司越来越多了,我们公司也不甘落后,将使用React-Native重写APP这个事提上了日程。然而这个任务落到我头上的时候,我本人作为一个Android...

React-Native傻瓜式学习笔记(一):ListView的简单使用

最近国内外使用React-Native写APP的公司越来越多了,我们公司也不甘落后,将使用React-Native重写APP这个事提上了日程。然而这个任务落到我头上的时候,我本人作为一个Android...

React-Native Android 学习笔记——2,自定义 logger

通过上一篇《 React-Native Android 学习笔记——1,配置环境》下载了AwesomeProject项目并运行了 demo。如下图: 应该和你运行起来的相同,但是除了Welcom...

React Native Android学习笔记

React Native Android第一次接触。要去研究一个东西,首先需要将环境配置完成。环境搭建这里因为我是在windows下进行开发,所以参考的是 Windows下环境的搭建大概可以分为这几个...

REACT NATIVE + REDUX 初学者学习笔记 例子 @吉他码农

学习和开发RN 已经有2/3个月,刚开始觉得挺难,主要缺乏了ES6和REACT的基础语法,不过先实践再回去补基础是我的学习之道。现在已经在项目中都封装了挺多视图插件,用起来很方便,基本在视图交互基础功...
  • mcj010
  • mcj010
  • 2016-09-28 11:28
  • 1347
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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