关闭

react native 学习笔记之Props

标签: react nativereact native props
414人阅读 评论(0) 收藏 举报
分类:

在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);

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:92095次
    • 积分:1267
    • 等级:
    • 排名:千里之外
    • 原创:41篇
    • 转载:8篇
    • 译文:0篇
    • 评论:20条
    最新评论