初探React-Native

Z时代
2024-01-10
分类：综合

react

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。

以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的prop来指定要显示的图片的地址，以及使用名为style的prop来控制其尺寸。

e.g

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class TianXin extends Component {
  render() {
    let pic = {
      uri: 'http://img4q.duitang.com/uploads/item/201506/25/20150625170821_hzsVL.jpeg'
    };
    return (
      <Image source={pic} style={{width: 200, height: 200}} />
    );
  }
}
AppRegistry.registerComponent('Bananas', () => TianXin);

自定义的组件也可以使用`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={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);