React Native的Props

大多数组件可以在创建时使用不同的参数进行自定义。这些创建参数称为props。例如，一个基本的React Native组件是Image。当您创建图像时，可以使用prop命名source来控制其显示的图像。

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=/>
    );
  }
}

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

注意{pic}被大括号括起来，以将变量pic嵌入到JSX中。你可以把任何JavaScript表达式放在大括号内JSX。你自己的组件也可以使用props。这样，您可以在应用程序的许多不同位置创建单个组件，每个位置的属性略有不同。只需在render函数中引用this.props。这里有一个例子：

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

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

使用名称作为props，我们可以自定义Greeting组件，因此我们可以为每个问候重复使用该组件。此示例还在JSX中使用Greeting组件，就像内置组件一样。做到这一点的力量是什么使React这么酷 - 如果你发现自己希望有一组不同的UI原语来工作，你只是发明新的。另一个新的东西在这里是视图组件。视图可用作其他组件的容器，以帮助控制样式和布局。使用props和基本的文本，图像和视图组件，您可以构建各种各样的静态屏幕。要了解如何让您的应用随时间变化，您需要了解状态。

Comments