React Native - 02 - 属性

大多数组件可以在创建时自定义，具有不同的参数。这些创建参数被称为属性。

例如，一个基本的React Native组件是Image。当你创建一个图像时，你可以使用一个名为source的属性来控制它显示的图像。

import React, { Component } from 'react';
import { Image } from 'react-native';
export default class Bananas extends Component {
    render () {
        let pic = {
            uri: '[https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg](https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg)'
        };
        return (
            <Image source={ pic } style={{ width: 375, height: 200 }} />
        );
    }
}

注意{pic}被大括号包围，以将变量pic嵌入到JSX中。您可以将任何JavaScript表达式放在JSX中的大括号内。

image.png

你自己的属性也可以使用属性。这使您可以在应用程序的许多不同位置使用单个组件，每个位置的属性稍有不同。只需在您的渲染函数中引用this.props即可。这是一个例子：

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Greeting extends Component {
    render() {
        return (
            <Text>Hello {this.props.name}</Text>
        );
    }
}
export default class LotsOfGreetings extends Component {
    render() {
        return (
            <View style={{ alignItems: 'center' }}>
                <Greeting name='张三' />
                <Greeting name='李四' />
                <Greeting name='王五' />
            </View>
        );
    }
}

image.png

使用名称作为属性允许我们自定义Greeting组件，所以我们可以为每个问候重用该组件。这个例子也使用JSX中的Greeting组件，就像内置组件一样。做这件事的力量是让React如此酷的原因 - 如果你发现自己希望有一套不同的用户界面原语可以使用，那么你只需要发明新的。

另一个新事物是View组件。一个视图作为其他组件的容器是有用的，以帮助控制样式和布局。

使用道具和基本的文本，图像和视图组件，您可以构建各种各样的静态屏幕。