React-Native 属性设置props

来源:互联网 发布:阿里云服务器新手 编辑:程序博客网 时间:2024/05/21 13:40

组件的静态数据由props控制,大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。

//Image中的source和style就是其属性(props)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}} />    );  }}

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props,然后按需处理即可。下面是一个例子:

//这个例子中的this.props.name就是用的在LotsOfGreetings中初始化的时候给定的name里面的值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' />        <Greeting name='Jaina' />        <Greeting name='Valeera' />      </View>    );  }}AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

如果是涉及到动态变化就需要使用到state属性了。

原创粉丝点击