RN入门基础2：JSX静态布局之自定义属性props

一、prosp属性介绍

组件在创建时可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。 比如Image组件，可以传入一个名为source的prop来指定要显示的图片，以及使用名为style的prop来控制其尺寸。

二、代码举例

1.基础组件Image使用props，传入一个名为source的prop来指定要显示的图片，使用名为style的prop来控制其尺寸。

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

注意：

{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到JSX语句中。

括号的意思是括号内部为一个js变量或表达式，需要执行后取值。

因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

效果：

 

2.自定义的组件使用props。使用时只需在render函数中引用this.props，然后按需处理即可。

自定义Greeting 组件，并将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。

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' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

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

效果：