1. 程式人生 > >React-Native 屬性設定props

React-Native 屬性設定props

元件的靜態資料由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屬性了。