react native 学习笔记之Props

来源：互联网发布：unix环境编程视频编辑：程序博客网时间：2024/06/07 10:26

在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